对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对象