对ajax基础的掌握随笔

原始的ajax，在第一个页面定义如下:

        function createAjax() {
            var xmlhttp;
            if (window.ActiveXObject)
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//对ie浏览器创建
            else if (window.XMLHttpRequest)
                xmlhttp = new XMLHttpRequest();//对其他浏览器创建
            return xmlhttp;
        }
    //ajax_POST
        function ajaxPOST() {
            var xmlhttp = createAjax();//创建
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            xmlhttp.open("post", "get.aspx", true);//get/post,  url  ,  是否异步传输
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //post方式必须加上的一句
            xmlhttp.onreadystatechange = function () {    //状态变化时执行的函数
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    document.getElementById("result").innerHTML = xmlhttp.responseText;
            }
            xmlhttp.send("name="+name+"&pwd="+pwd);//发送
        }
        //ajax_GET
        function ajaxGET() {
            var xmlhttp = createAjax();
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            xmlhttp.open("get", "get.aspx?name="+name+"&pwd="+pwd, true);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    document.getElementById("result").innerHTML = xmlhttp.responseText;
            }
            xmlhttp.send(null);
        }

onreadyStateChange事件是在readyState属性发生改变时触发的
readyState的值表示了当前请求的状态，在事件处理程序中可以根据这个值来进行不同的处理。 
readyState有五种可取值0：尚未初始化，1：正在加载，2：加载完毕，3：正在处理；4：处理完毕。一旦readyState属性的值变成了4，就可以从服务器返回的响应数据进行访问了。 

Status存储了服务器端返回的Http请求响应代码，它表示请求的处理结果.

Http状态码含义:
200 请求成功 
202 请求被接受但处理未完成 
400 错误请求 
404 请求资源未找到 
500 内部服务器错误

接着在data.aspx页面cs文件中的PageLoad中写如下代码:

            Response.Clear();
            string name = Request.QueryString["name"];
            string pwd = Request.QueryString["pwd"];
            Response.Write("名字是：" + name + "<br />密码是：" + pwd);
            Response.End();

这样，这个ajax程序就完成了。

有点麻烦是不是？倘若用JQuery的ajax，那么事情变得简单得多。

data.aspx.cs页面不动，将第一个页面改为:

 $(function () {
             $("#btn").click(function () {
                 var name = document.getElementById("name").value;
                 var pwd = document.getElementById("pwd").value;
                $("#result").load("get.aspx?name=" + name + "&pwd=" + pwd, function (responseText, textStatus, XMLHttpRequest) {    //JQueryAjaxGet
                    document.getElementById("result").innerHTML = responseText;
                });     //JQueryAjaxGet
                $("#result").load("get.aspx", { "name": name,"pwd":pwd }, function (responseText, textStatus, XMLHttpRequest) {                        document.getElementById("result").innerHTML = responseText;                
                });     //JQueryAjaxPost        
         });
});

可以看到，不需要创建xmlHttp对象，只需要一个load()方法。
load()方法

对于get:   url,回调函数(不需要返回success)

对于post: url,param,回调函数

回调函数function(responseTest,textStatus,XMLHttpRequest){}，其中

responstTest        //请求返回的内容

textStatus           //请求状态：success，error

XMLHttpRequest  //XMLHttpRequest对象