利用Google接口实现拼写检查

在开发一个国外外包项目时，客户提出一个需求，就是希望在文本框中输入单词，在保存前能够进行拼写检查，如果发现单词错误，可以提醒用户进行改正，为此，在结合参考了各种方案之后，选择了一个免费的方案，Google的一个API接口，https://www.google.com/tbproxy/spell?lang=，该接口提供多种语言的拼写检查，并能够返回相似的单词，并且幸运的是，在网上找到了一个开源的程序包googiespell，所以经过简单的包装处理，做成了一个拼写检查的小控件，使用起来就很方便了。

　　实现原理

　　在.net的页面上，在submit按钮提交之前，将页面的文本框内容，通过ajax的方式，采用代理类的方式，发送给Google的接口，接口会返回拼写结果，如果没有拼写错误，浏览器端就直接执行提交操作，如果有错误，弹出一个Spell Check Error的对话框，提示用户进行修改，点“yes”返回页面修改，点“No”的话就忽略掉拼写错误，直接提交。

　　代码分享

　　用户控件Shouji138.com.SpellValid.ascx

　　这个文件封装了错误提示的输入框效果，还有提交按钮的一些操作代码。

<%@　Control　Language="C#"　AutoEventWireup="true"　Codebehind="Shouji138.com.SpellValid.ascx.cs"
　　　　Inherits="SpellCheck.Shouji138_com_SpellValid"　%>
　
<script　type="text/javascript">
　　　　var　googie5　=　new　GoogieSpellMultiple("/googiespell/",　"/googiespell/sendSpellReq.aspx?lang=");
　
　　　　//New　menu　item　"Add"
　　　　var　add_checker　=　function(elm)　{
　　　　　　　　return　true;
　　　　};
　　　　var　add_item　=　function(elm,　current_googie)　{
　　　　　　　　googie5.ignoreAll(elm);
　　　　};
　　　　//googie5.appendNewMenuItem("Add",　add_item,　add_checker);
　
　　　　var　fn_no_more_errors　=　function(e)　{
　　　　　　//　　alert('no　more　errros');
　　　　　　　　passcheck　=　true;
　　　　}
　
　　　　googie5.setDependent();
　　　　googie5.setCustomAjaxError(function(req)　{
　　　　　　　//　alert('error');
　　　　});
　　　　googie5.useCloseButtons();
　　　　googie5.noMoreErrorsCallback(fn_no_more_errors);
　　　　googie5.setSpellContainer("global_spell_container");
　　　　//　googie5.decorateTextareas(textbox,　"hel",　"t");
　
　　　　//Getstatespan2();
　
　　　　var　passcheck　=　false;
　　　　var　savebutton　=　null;
　　　　var　waiti　=　0;
　
　　　　function　CheckSpell(obj)　{
　
　　　　　　　　if　(typeof　(Page_ClientValidate)　==　'function')　{
　　　　　　　　　　　　if　(Page_ClientValidate()　==　false)　{
　　　　　　　　　　　　　　　　return　false;
　　　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　savebutton　=　obj;
　
　　　　　　　　if　(googie5.noErrorsFound()　||　passcheck)　{
　　　　　　　　　　　//　alert("CheckSpell　ok");
　　　　　　　　　　　　return　true;
　　　　　　　　}
　　　　　　　　//alert(document.getElementById("global_spell_container").innerHTML);
　　　　　　　　if　(document.getElementById("okclickspan"))
　　　　　　　　　　　　invokeClick(document.getElementById("okclickspan"))
　　　　　　　　setTimeout("WaitSavetate()",　1000);
　　　　　　　　return　false;
　　　　}
　
　　　　function　ToDoNext()　{
　　　
　　　　
　　　　　　　　if　(savebutton.href)　{
　　　　　　　　　　　　var　href　=　savebutton.href.replace("javascript:",　"");
　　　　　　　　　　　　href　=　unescape(href);
　　　　　　　　　　　　//alert(href);
　　　　　　　　　　　　eval(href);
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　__doPostBack(savebutton.id,"");
　　　　　　　　　return　true;
　　　　　　　　}
　　　　}
　
　
　　　　function　WaitSavetate()　{
　　　　　　　　if　(waiti　>　100)　{
　　　　　　　　　　　　waiti　=　0;
　　　　　　　　　　　　return;
　　　　　　　　}
　　　　　　　　waiti++;
　　　　　　　　//document.getElementById("statespan").innerHTML　=　"waiting:"　+　waiti　+　"　"　+　googie5.noErrorsFound();
　　　　　　　　if　(passcheck　||　googie5.noErrorsFound())　{
　　　　　　　　　　　　//alert("pass");
　　　　　　　　　　　　//invokeClick(savebutton);　　　　　　　　　　　
　　　　　　　　　　　　　　　　ToDoNext();
　　　　　　　　　　　
　　　　　　　　　　　//　__doPostBack(savebutton.id,　'');
　　　　　　　　}
　　　　　　　　else　{
　　　　　　　　　　　　if　(googie5.getState()　==　"checking_spell")　{
　　　　　　　　　　　　　　　　setTimeout("WaitSavetate()",　500);
　　　　　　　　　　　　}
　　　　　　　　　　　　else　{
　　　　　　　　　　　　　　　　showdivspellcheckerror();
　　　　　　　　　　　　}
　　　　　　　　}
　　　　}
　　　　function　getText1value()　{
　　　　　　　　alert(document.getElementById(textbox).value);
　
　　　　}
　　　　function　invokeClick(element)　{
　　　　　　　　if　(element.click)　element.click();
　　　　　　　　else　if　(element.fireEvent)　element.fireEvent('onclick');
　　　　　　　　else　if　(document.createEvent)　{
　　　　　　　　　　　　var　evt　=　document.createEvent("MouseEvents");
　　　　　　　　　　　　evt.initEvent("click",　true,　true);
　　　　　　　　　　　　element.dispatchEvent(evt);
　　　　　　　　}
　　　　}
　
</script>
　
<script　type="text/javascript">
　　　　function　closedivspellcheckerror()　{
　　　　　　　　document.getElementById("divspellcheckerror").style.display　=　"none";
　　　　}
　　　　function　showdivspellcheckerror()　{
　　　　　　　　var　alertFram　=　document.getElementById("divspellcheckerror");
　　　　　　　　alertFram.style.position　=　"absolute";
　　　　　　　　alertFram.style.left　=　"50%";
　　　　　　　　alertFram.style.top　=　"50%";
　　　　　　　　alertFram.style.marginLeft　=　"-125px";
　　　　　　　　alertFram.style.marginTop　=　-75　+　document.documentElement.scrollTop　+　"px";
　　　　　　　　//alertFram.style.width　=　"450px";
　　　　　　　　//alertFram.style.height　=　"150px";
　　　　　　　　//alertFram.style.background　=　"#ccc";
　　　　　　　　alertFram.style.textAlign　=　"center";
　　　　　　　　//alertFram.style.lineHeight　=　"150px";
　　　　　　　　alertFram.style.zIndex　=　"10001";
　　　　　　　　document.getElementById("divspellcheckerror").style.display　=　"";
　　　　}
</script>
　
<div　class="shouji138errorbox"　id="divspellcheckerror"　style="display:　none;　width:　400px">
　　　　<div　id="SccNotify"　class="yui-module　yui-overlay　yui-panel"　style="visibility:　inherit;">
　　　　　　　　<div　class="shouji138_notice-error">
　　　　　　　　　　　　Spelling　Error</div>
　　　　　　　　<div　class="shouji138_notice-body">
　　　　　　　　　　　　Spelling　errors　detected.<br　/>
　　　　　　　　　　　　Do　you　wish　to　correct　them?
　　　　　　　　　　　　<br　/>
　　　　　　　　　　　　Click　Yes　to　return,click　No　to　continue　submit.<br　/>
　　　　　　　　</div>
　　　　　　　　<div　class="shouji138_notice_foot">
　　　　　　　　　　　　<a　href="javascript:;"　onclick="closedivspellcheckerror();">
　　　　　　　　　　　　　　　　<img　src="googiespell/btn_yes.gif"　style="border:　0px;"　alt="yes"　/></a>　  <a
　　　　　　　　　　　　　　　　　　　　href="javascript:ToDoNext();"><img　src="googiespell/btn_no.gif"　style="border:　0px;"
　　　　　　　　　　　　　　　　　　　　　　　　alt="no"　/></a>
　　　　　　　　</div>
　　　　</div>
</div>

代理类：sendSpellReq.aspx.cs

　　这个类的作用就是发送请求到Google的接口：

using　System;
using　System.Data;
using　System.Configuration;
using　System.Collections;
using　System.Web;
using　System.Web.Security;
using　System.Web.UI;
using　System.Web.UI.WebControls;
using　System.Web.UI.WebControls.WebParts;
using　System.Web.UI.HtmlControls;
　
using　System.Net;
using　System.IO;
using　System.Text;
　
namespace　SpellCheck.googiespell
{
　　　　public　partial　class　sendSpellReq　:　System.Web.UI.Page
　　　　{
　　　　　　　　protected　void　Page_Load(object　sender,　EventArgs　e)
　　　　　　　　{
　　　　　　　　　　　　Response.Buffer　=　true;
　　　　　　　　　　　　Response.Expires　=　-1;
　　　　　　　　　　　　Response.Charset　=　"utf-8";
　　　　　　　　　　　　Response.ContentType　=　"text/html";
　　　　//手机主题　　http://www.shouji138.com
　　　　　　　　　　　　string　url　=　"https://www.google.com/tbproxy/spell?lang="　+　Request.QueryString["lang"];
　　　　　　　　　　　　Stream　InputStream　=　Request.InputStream;
　　　　　　　　　　　　StreamReader　inputreader　=　new　StreamReader(InputStream,　Encoding.UTF8);
　　　　　　　　　　　　string　arcxml　=　inputreader.ReadToEnd();
　　　　　　　　　　　　//Log.SaveNote(arcxml);
　
　　　　　　　　　　　　HttpWebRequest　myRequest　=　(HttpWebRequest)WebRequest.Create(url);
　　　　　　　　　　　　myRequest.Method　=　"POST";
　　　　　　　　　　　　byte[]　postBytes　=　Encoding.UTF8.GetBytes(arcxml);
　　　　　　　　　　　　myRequest.ContentType　=　"application/x-www-form-urlencoded";
　　　　　　　　　　　　myRequest.ContentLength　=　arcxml.Length;
　
　　　　　　　　　　　　//　发送数据
　　　　　　　　　　　　using　(Stream　reqStream　=　myRequest.GetRequestStream())
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　reqStream.Write(postBytes,　0,　postBytes.Length);
　　　　　　　　　　　　}
　　　　　　　　　　　　HttpWebResponse　HttpWResp　=　(HttpWebResponse)myRequest.GetResponse();
　　　　　　　　　　　　StreamReader　reader　=　new　StreamReader(HttpWResp.GetResponseStream(),　Encoding.UTF8);
　　　　　　　　　　　　string　result　=　reader.ReadToEnd();
　　　　　　　　　　　　reader.Close();
　　　　　　　　　　　　HttpWResp.Close();
　　　　　　　　　　　　//　　Log.SaveNote(result);
　　　　　　　　　　　　Response.Write(result);
　　　　　　　　　　　　Response.End();
　　　　　　　　}
　　　　}
}

使用方法

　　1. 在需要使用拼写检查的地方，把Shouji138.com.SpellValid.ascx控件拖进去，然后在头部加上js代码和css代码，如下：

　　2. 在页面合适的地方加入一个拼写检查的容器DIV

　　<div　id="global_spell_container"　class="globalcontainer"></div>

　　3. 在页面的底部，引入控件

　　<uc1:Shouji138_com_SpellValid　ID="tc1"　runat="server"></uc1:Shouji138_com_SpellValid>

　　4.最后，把需要进行拼写检查的控件，进行注册一下，比如：

　　使用特点

　　1. 功能强大，可以检查多国语言，如英语，法语，俄语等等;

　　2. 使用简单，只需添加简单的一些代码就可以实现页面上所有输入框的拼写检查;
3. 检查迅速，实时检查，实时返回结果;

　　4. 可以提供相似的单词选择。

　　下载和截图

　　欢迎各位来我的小站(恋主题:http://www.shouji138.com)下载代码包，该控件只免费供个人学习研究之用，如果用于商业用途，请跟作者联系。

　　演示地址：http://www.shouji138.com/aspnet2/spellcheck/

　　下载地址：http://www.shouji138.com/aspnet2/files/SpellCheck.rar

　　效果截图：

«
»

PHP教程

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类