Ajax系统学习总结

柔情只为你懂 2022-08-22 11:25 148阅读 0赞

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

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

![这里写图片描述][20160526195337166]

![这里写图片描述][20160526195348524]

## **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等待总结。

[20160526195337166]: /images/20220722/2489901723f64a4588130d92fbf09131.png
[20160526195348524]: /images/20220722/a1787955ad224bec86782ccb900dcc16.png