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验证终于搞定。