AJAX——核心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<activeName.length;i++){
           try{
               xmlhttprequest=new ActiveXObject(activeName[i]);
               break;
           }catch(e){

           }
       }
   }

   if(xmlhttprequest==undefined || xmlhttprequest==null){
       alert("XMLHttpRequest對象創建失敗！！");
   }else{
       this.xmlhttp=xmlhttprequest;
   }

    第二步：註冊回調方法

<span style="font-size:18px;">xmlhttp.onreadystatechange=callback;
</span>

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

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

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

<span style="font-size:18px;">  xmlhttp.send(null);</span>

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

<span style="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;
            //其它代碼
         }
    }
 }
</span>

         通過這五步XMLHttpRequest基本上就創建好，可以正常使用了，但是這是需要非常多的代碼的，總不能每次創建都寫這麼多吧？當然不是了，我們學習了面向對象，我們將其必要相同的部分都抽象出來，使之成爲一個獨立類，別的直接調用即可，在網上看了一個，感覺寫的挺好：

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

          當然這些都需要我們在實踐中不斷的摸索，使用，再總結屬於自己的一套常用類，方法等。當然XMLHttpRequest還有“瀏覽器緩存問題”，“中文亂碼問題”，“跨域訪問問題”等等，因爲都沒有遇到過這些東西，所以這裏先了解一下，以後遇到再認真研究！