XMLHttpRequest對象

  AJAX你們已經都知道了，是爲了實現異步通信，提升用戶體驗度，而將不少舊知識（XML,DOM,JavaScript,HTML,Jquery,Css……）從新融合的一個新的知識框架。而，XMLHttpRequest對象則是其中的重重之中。這篇博客重點總結一下這個對象的使用。固然仍是按照經典的五步法來學習，之後在實踐中有更多更好的想法，會拿出來分享的！

 

           首先，須要先了解這個對象的屬性和方法：

 

 

屬性	說明
readyState	表示XMLHttpRequest對象的狀態：0：未初始化。對象已建立，未調用open； 1：open方法成功調用，但Sendf方法未調用； 2：send方法已經調用，還沒有開始接受數據； 3：正在接受數據。Http響應頭信息已經接受，但還沒有接收完成； 4：完成，即響應數據接受完成。
Onreadystatechange	請求狀態改變的事件觸發器（readyState變化時會調用這個屬性上註冊的javascript函數）。
responseText	服務器響應的文本內容
responseXML	服務器響應的XML內容對應的DOM對象
Status	服務器返回的http狀態碼。200表示「成功」，404表示「未找到」，500表示「服務器內部錯誤」等。
statusText	服務器返回狀態的文本信息。

 

 

 

 

方法	說明
Open(string method,string url,boolean asynch, String username,string password)	指定和服務器端交互的HTTP方法，URL地址，即其餘請求信息； Method:表示http請求方法，通常使用"GET","POST". url：表示請求的服務器的地址； asynch：表示是否採用異步方法，true爲異步，false爲同步； 後邊兩個能夠不指定，username和password分別表示用戶名和密碼，提供http認證機制須要的用戶名和密碼。
Send(content)	向服務器發出請求，若是採用異步方式，該方法會當即返回。 content能夠指定爲null表示不發送數據，其內容能夠是DOM對象，輸入流或字符串。
SetRequestHeader(String header,String Value)	設置HTTP請求中的指定頭部header的值爲value. 此方法需在open方法之後調用，通常在post方式中使用。
getAllResponseHeaders()	返回包含Http的全部響應頭信息，其中相應頭包括Content-length,date,uri等內容。 返回值是一個字符串，包含全部頭信息，其中每一個鍵名和鍵值用冒號分開，每一組鍵之間用CR和LF（回車加換行符）來分隔！
getResponseHeader(String header)	返回HTTP響應頭中指定的鍵名header對應的值
Abort()	中止當前http請求。對應的XMLHttpRequest對象會復位到未初始化的狀態。

對這個對象有了靜態了了解，知道它長的什麼樣子，有什麼功能了，下邊該咱們使用它了，固然這裏我也用五步法寫出代碼來：

第一步：建立XMLHttpRuquest對象：

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

           try{  

               xmlhttprequest=new ActiveXObject(activeName[i]);  

               break;  

           }catch(e){  

           }  

       }  

   }  

   if(xmlhttprequest==undefined || xmlhttprequest==null){  

       alert("XMLHttpRequest對象建立失敗！！");  

   }else{  

       this.xmlhttp=xmlhttprequest;  

   }  

 

第二步：註冊回調方法

 

[javascript]  view plain copy print ?

 

"font-size:18px;">xmlhttp.onreadystatechange=callback;  

 

    第三步：設置和服務器交互的相應參數

[javascript]  view plain copy print ?

 

"font-size:18px;"> xmlhttp.open("GET","ajax?name=" +userName,true);  

    第四步：設置向服務器端發送的數據，啓動和服務器端的交互

 

 

[javascript]  view plain copy print ?

 

"font-size:18px;">  xmlhttp.send(null);  

 

    第五步：判斷和服務器端的交互是否完成，還要判斷服務器端是否返回正確的數據

 

[javascript]  view plain copy print ?

 

"font-size:18px;">//根基實際條件寫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基本上就建立好，能夠正常使用了，可是這是須要很是多的代碼的，總不能每次建立都寫這麼多吧？固然不是了，咱們學習了面向對象，咱們將其必要相同的部分都抽象出來，使之成爲一個獨立類，別的直接調用便可，在網上看了一個，感受寫的挺好：

 

 

 

[javascript]  view plain copy print ?

 

//類的構建定義，主要職責就是新建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

        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();  

    }  

  }  

}  

 

          固然這些都須要咱們在實踐中不斷的摸索，使用，再總結屬於本身的一套經常使用類，方法等。固然XMLHttpRequest還有「瀏覽器緩存問題」，「中文亂碼問題」，「跨域訪問問題」等等，由於都沒有遇到過這些東西，因此這裏先了解一下，之後遇到再認真研究！