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;    }

    第二步：註冊回調方法

xmlhttp.onreadystatechange=callback;

    第三步：設定和伺服器互動的相應參數

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

    第四步：設定向伺服器端發送的資料，啟動和伺服器端的互動

  xmlhttp.send(null);

    第五步：判斷和伺服器端的互動是否完成，還要判斷伺服器端是否返回正確的資料

//根基實際條件寫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基本上就建立好，可以正常使用了，但是這是需要非常多的代碼的，總不能每次建立都寫這麼多吧。當然不是了，我們學習了物件導向，我們將其必要相同的部分都抽象出來，使之成為一個獨立類，別的直接調用即可，在網上看了一個，感覺寫的挺好：

//類的構建定義，主要職責就是建立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還有“瀏覽器緩衝問題”，“中文亂碼問題”，“跨域訪問問題”等等，因為都沒有遇到過這些東西，所以這裡先瞭解一下，以後遇到再認真研究。