ajax实现过程

特征

Ajax能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据，也就是说，可以使用XHR对象取得新数据，然后通过DOM将新数据插入到页面中。而且Ajax与XML无关，这种技术就是无需刷新页面就能从服务器取得数据。

实现过程;

创建XMLHttpRequest对象(需要考虑各浏览器兼容的问题)

function createXHR(){
    if (typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined"){
        if (typeof arguments.callee.activeXString != "string"){
            var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
                i, len;
            for (i=0,len=versions.length; i < len; i++){
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                    } catch (ex){
                    //跳过
                        }
                    }
                }
        return new ActiveXObject(arguments.callee.activeXString);
        } else {
            throw new Error("No XHR object available.");
    }

}

var xhr = createXHR();

2、使用XMLHttpRequest对象打开一个连接(指定连接方式<post/get>和连接地址以及是否同步)

xhr.open("POST","URL ",false);

调用XMLHttpRequest对象的open方法。第一个参数是提交数据的方式，取值为post/get；第二个参数是提交的目标页面(也就是用于处 理提交数据的页面)；第三个参数指定是否请求是异步的-缺省值为true，为了发送一个同步请求，需要把这个参数设置为false。

3、设置请求的头部(请求的类型和请求的编码格式)

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

4、设置回调函数

主要用于处理从服务端发送给客户端的数据，主要使用javascript去调用页面中的元素，并根据服务端返回的结果去控制页面中元素的更新。内部实现实际上是javascript中的事件处理机制。

具体实现：

//事件绑定

xhr.onreadystatechange=show;

//事件处理函数

function show()

{

   //如果readyState为4，表示响应已经被完全接收。

   if(xhr.readyState==4)

   {

      //如果获得的结果状态代码为200，表示服务端正常返回

      if((xhr.status>=200 && xhr.status <300) || xhr.status == 304 )

      {

         //客户端响应代码

      }else {

              alert ("Request was unsuccessful:" + xhr.status);

       }

   }

}

5、发送请求

调用XMLHttpRequest对象的send方法实现数据的发送。

具体实现：

            if(uname.value!=null)

xmlHttp.send("uname="+uname.value);

6、更新页面显示

在发送数据到服务端之后，服务端处理完毕会返回客户端一个响应，我们在客户端所设定的回调函数实际上就是对事件的处理，当readystate属性发生变化的时候都会触发事件处理函数，如果readystate变成了4并且响应的状态码是200的话，那么则表示服务端正常返回了信息。这个时候我们就能够获 得服务端的响应信息并进行相对应的处理。

具体实现：

alert(xmlHttp.responseXML);

alert(xmlHttp.responseHTML);

返回的状态码能看出什么？

支持哪些数据格式？应该是所有数据格式

ajax解决多任务同时调度解决方案

同步与异步：

ajax.open方法中，第3个参数是设同步或者异步。prototype等js类库一般都默认为异步，即设为true。先说下同步的情况下，js会等待请求返回，获取status。不需要onreadystatechange事件处理函数。而异步则需要onreadystatechange事件处理，且值为4再正确处理下面的内容。