Ajax系统学习总结

Ajax的工作原理相当于在用户和服务器之间加上了一个中间层，是用户操作与服务器响应异步化。Ajax的一个最大的特点是无需刷新页面，便可向服务器传输或读写数据（又称无刷新更新页面），这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以异步向服务器发送请求，并处理响应结果，而无须刷新页面也不用每次将数据处理的工作提交给服务器来做，这样既减轻了服务器的负担又加快了响应速度、缩短了用户等候的时间。

1、Ajax学习——XMLHttpRequest对象的属性和方法

2、Ajax学习——XMLHttpRequest对象的创建

XMLHttpRequest对象是整个Ajax开发的基础，它具有从客户端到服务端异步发送http请求的能力。XMLHttpRequest对象由javascript创建并使用。由于XMLHttpRequest对象不是一个通用的国际标准，不同的浏览器对其实现方式也不相同。要想实现浏览器运行的Ajax程序，需要考虑所有的使用场合。

创建XMLHttpRequest对象的方法：

   var xmlhttprequest; 
   if(window.XMLHttpRequest){ 
       xmlhttprequest=new XMLHttpRequest(); 
       if(xmlhttprequest.overrideMimeType){ 
           xmlhttprequest.overrideMimeType("text/xml"); 
       } 
   }else if(window.ActiveXObject){ 
       var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; 
       for(var i=0;i<activeName.length;i++){ 
           try{ 
               xmlhttprequest=new ActiveXObject(activeName[i]); 
               break; 
           }catch(e){ 

           } 
       } 
   } 

   if(xmlhttprequest==undefined || xmlhttprequest==null){ 
       alert("XMLHttpRequest对象创建失败！！"); 
   }else{ 
       this.xmlhttp=xmlhttprequest; 
   } 
}

3、Ajax学习——使用XMLHttpRequest对象与服务器端通信的过程

1、第一步：

使用open()方法创建一个http请求：

open(method,url,asynchronous,username,password);
/*
     method：http请求方式，post或者get；
     url：服务器端程序的url；
     asynchronous：定义request是否异步，为true异步请求 ，send()函数再发送request后马上返回；为false同步请求 ，send()函数必须在收到回执后才执行，默认为true；
     username：有些url要求request带用户名，一般不会用到；
     password：一般不会用到。
*/

例如：xmlhttp.open("GET","ajax?name=" +userName,true);

2、第二步：

使用send()方法发送一个请求：

send(body);
//body参数表示要向服务器发送的数据，其格式为字符串

注意：
（1）使用get请求，所有的提交字符串都显示在了url上，所以发送的数据body为null；
（2）使用post请求，在send提交之前需要设置http头，request.setRequestHeader(***);
（3）其它情况下post请求和get请求没区别。

例如：xmlhttp.send(null);

3、第三步

使用onreadystatechange事件捕获请求状态变化：
onreadystatechange是XMLHttpRequest对象的参数，是用来定义此对象状态改变事件发生时的监听器，它的值对应一个javascript函数。

4、第四步

使用readyState属性判断请求状态变化：
readyState的值表示了当前的请求状态，可能的状态有5个。

例如：

xmlhttp.onreadystatechange=callback;
//根据实际条件写callback的功能代码 
function callback(){ 
     if（xmlhttp.readState==4）{ 
         //表示服务器的相应代码是200；正确返回了数据   
        if(xmlhttp.status==200){   
            //纯文本数据的接受方法   
            var message=xmlhttp.responseText;   
            //使用的前提是，服务器端需要设置content-type为text/xml   
            //var domXml=xmlhttp.responseXML;   
            //其它代码 
         }   
    } 
 } 

将通信过程抽象为如下一个独立的类：

//类的构建定义，主要职责就是新建XMLHttpRequest对象 
var MyXMLHttpRequest=function(){ 
    var xmlhttprequest; 
    if(window.XMLHttpRequest){ 
        xmlhttprequest=new XMLHttpRequest(); 
        if(xmlhttprequest.overrideMimeType){ 
            xmlhttprequest.overrideMimeType("text/xml"); 
        } 
    }else if(window.ActiveXObject){ 
        var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; 
        for(var i=0;i<activeName.length;i++){ 
            try{ 
                xmlhttprequest=new ActiveXObject(activeName[i]); 
                break; 
            }catch(e){ 

            } 
        } 
    } 

    if(xmlhttprequest == undefined || xmlhttprequest == null){ 
        alert("XMLHttpRequest对象创建失败！！"); 
    }else{ 
        this.xmlhttp=xmlhttprequest; 
    } 

    //用户发送请求的方法 
    MyXMLHttpRequest.prototype.send=function(method,url,data,callback,failback){ 
        if(this.xmlhttp!=undefined && this.xmlhttp!=null){ 
            method=method.toUpperCase(); 
            if(method!="GET" && method!="POST"){ 
                alert("HTTP的请求方法必须为GET或POST!!!"); 
                return; 
            } 
            if(url==null || url==undefined){ 
                alert("HTTP的请求地址必须设置！"); 
                return ; 
            } 
            var tempxmlhttp=this.xmlhttp; 
            this.xmlhttp.onreadystatechange=function(){ 
                if(tempxmlhttp.readyState==4){ 
                    if(temxmlhttp.status==200){ 
                        var responseText=temxmlhttp.responseText; 
                        var responseXML=temxmlhttp.reponseXML; 
                        if(callback==undefined || callback==null){ 
                            alert("没有设置处理数据正确返回的方法"); 
                            alert("返回的数据：" + responseText); 
                        }else{ 
                            callback(responseText,responseXML); 
                        } 
                    }else{ 
                        if(failback==undefined ||failback==null){ 
                            alert("没有设置处理数据返回失败的处理方法！"); 
                            alert("HTTP的响应码：" + tempxmlhttp.status + ",响应码的文本信息：" + tempxmlhttp.statusText); 
                        }else{ 
                            failback(tempxmlhttp.status,tempxmlhttp.statusText); 
                        } 
                    } 
                } 
            } 

            //解决缓存的转换 
            if(url.indexOf("?")>=0){ 
                url=url + "&t=" + (new Date()).valueOf(); 
            }else{ 
                url=url+"?+="+(new Date()).valueOf(); 
            } 

            //解决跨域的问题 
            if(url.indexOf("http://")>=0){ 
                url.replace("?","&"); 
                url="Proxy?url=" +url; 
            } 
            this.xmlhttp.open(method,url,true); 

            //如果是POST方式，需要设置请求头 
            if(method=="POST"){ 
                this.xmlhttp.setRequestHeader("Content-type","application/x-www-four-urlencoded"); 
            } 
            this.xmlhttp.send(data); 
    }else{ 
        alert("XMLHttpRequest对象创建失败，无法发送数据！"); 
    } 
    MyXMLHttpRequest.prototype.abort=function(){ 
        this.xmlhttp.abort(); 
    } 
  } 

} 

有关Ajax框架，比如AjaxPro等待总结。