ajax的简单应用

最近搞一个学习码的验证，为了客户体验，需用到ajax。首页通过自定义一个验证控件进行验证：

<asp:CustomValidator ID="CustomValidator2" runat="server" Display="Dynamic"
ErrorMessage="学习码不对" ForeColor="Red" ClientValidationFunction="learnCode" ValidationGroup="questions"></asp:CustomValidator>
其中 learnCode函数的js代码如下：

    <script type="text/javascript">
        function learnCode(sender, args) {
            var state1 = learnCheck();
            //alert(state1);
            if (state1 == "1") {
                args.IsValid = true;
            }
            else {
                args.IsValid = false;
            }
        }
 
    </script>

其中learnCheck()函数为ajax中js的一个函数，在页面引用该js文件

    <script src="js/learnCode.js" type="text/javascript"></script>

learnCode.js文件中的代码如下：

var XMLHttpReq = false;
var learnCodeState; //定义学习码的状态，错误为0,默认为错误
//创建XMLHttpRequest对象       
function createXMLHttpRequest() {
    if (window.XMLHttpRequest) { //Mozilla 浏览器
        XMLHttpReq = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) { // IE浏览器
        try {
            XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) { }
        }
    }
}
//发送请求函数
function sendRequest(url) {
    createXMLHttpRequest();
    XMLHttpReq.open("GET",url, false);
    XMLHttpReq.onreadystatechange = processResponse; //指定响应函数
    XMLHttpReq.send(null);  // 发送请求
}
// 处理返回信息函数
function processResponse() {
    if (XMLHttpReq.readyState == 4) { // 判断对象状态
        //alert(XMLHttpReq.status);
        if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
            var res = XMLHttpReq.responseText;
            if (res == "1") {
                learnCodeState = "1";
                return;
            }
            else {
                learnCodeState = "0";
                return;
            }
        } else { //页面不正常
            window.alert("您所请求的页面有异常。");
        }
    }

}
// 身份验证函数
function learnCheck() {
    //sendRequest('CheckLearnCode.aspx?learnCode=' + document.getElementById("txtLearnCode").value+"&t=" + Math.random());
    var num = Math.random();
    //alert(document.getElementById("txtLearnCode").value);
    var code =encodeURI(document.getElementById("txtLearnCode").value);
    //alert(code);
    sendRequest('CheckLearnCode.aspx?learnCode=' +code + '&t=' + num);
    return learnCodeState;
}

这里因为我要及时获取js文件返回的learnCodeState值，所以使用了同步刷新，即：

XMLHttpReq.open("GET",url, false);

如果使用异步，则改为：XMLHttpReq.open("GET",url, true);

但使用同步刷新时也有个问题，浏览器会保存有缓存，当我的学习码改变了，浏览器还是保留上一次的学习码，后来一看原来是传送的url的问题，因为每次传送的url相同的话，浏览器则会去取上一次保留的值。为了解决这个问题，我需要将url改为每次都不一样。

设置一个随机数

var num = Math.random();
然后加在url后面，让url每次都不同 
sendRequest('CheckLearnCode.aspx?learnCode=' +code + '&t=' + num);
同时为了传送中文参数时出现乱码，则会参数进行编码，如下

 var code =encodeURI(document.getElementById("txtLearnCode").value);
服务器文件CheckLearnCode.aspx.cs的代码如下：

public partial class CheckLearnCode : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
       string learnCode =Server.UrlDecode(Request.QueryString["learnCode"].ToString());
        string sql = "select top 1 * from LearnCode";

        string result = "0";//默认为不成功

      DataSet ds = SqlHelper.ExecuteDataset(SqlHelper.conn, CommandType.Text, sql);
      if (ds.Tables[0].Rows.Count>0)
      {
          string code = ds.Tables[0].Rows[0]["LearnCode"].ToString();
          if (code == learnCode)
              result="1";//学习码匹配成功
      }
      Response.Write(result);
      Response.End();
    }
}

这样，整个ajax验证终于搞定。