AJAX——核心XMLHttpRequest對象

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

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

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

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

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

第一步：建立XMLHttpRuquest對象：

 1 var xmlhttprequest;  2    if(window.XMLHttpRequest){  3        xmlhttprequest=new XMLHttpRequest();  4        if(xmlhttprequest.overrideMimeType){  5            xmlhttprequest.overrideMimeType("text/xml");  6  }  7    }else if(window.ActiveXObject){  8        var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];  9        for(var i=0;i<activeName.length;i++){ 10            try{ 11                xmlhttprequest=new ActiveXObject(activeName[i]); 12                break; 13            }catch(e){ 14                         
15  } 16  } 17  } 18      
19    if(xmlhttprequest==undefined || xmlhttprequest==null){ 20        alert("XMLHttpRequest對象建立失敗！！"); 21    }else{ 22        this.xmlhttp=xmlhttprequest; 23    } 

第二步：註冊回調方法：

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

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

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

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

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

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

 1 <span style="font-size:18px;">//根基實際條件寫callback的功能代碼 
 2 function callback(){  3      if（xmlhttp.readState==4）{  4          //表示服務器的相應代碼是200；正確返回了數據 
 5         if(xmlhttp.status==200){  6             //純文本數據的接受方法 
 7             var message=xmlhttp.responseText;  8             //使用的前提是，服務器端須要設置content-type爲text/xml 
 9             //var domXml=xmlhttp.responseXML; 
10             //其它代碼 
11  } 12  } 13  } 14 </span> 

 經過這五步XMLHttpRequest基本上就建立好，能夠正常使用了，可是這是須要很是多的代碼的，總不能每次建立都寫這麼多吧？固然不是了，咱們學習了面向對象，咱們將其必要相同的部分都抽象出來，使之成爲一個獨立類，別的直接調用便可，在網上看了一個，感受寫的挺好：

 1 //類的構建定義，主要職責就是新建XMLHttpRequest對象 
 2 var MyXMLHttpRequest=function(){  3     var xmlhttprequest;  4     if(window.XMLHttpRequest){  5         xmlhttprequest=new XMLHttpRequest();  6         if(xmlhttprequest.overrideMimeType){  7             xmlhttprequest.overrideMimeType("text/xml");  8  }  9     }else if(window.ActiveXObject){ 10         var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; 11         for(var i=0;i<activeName.length;i++){ 12             try{ 13                 xmlhttprequest=new ActiveXObject(activeName[i]); 14                 break; 15             }catch(e){ 16                          
17  } 18  } 19  } 20       
21     if(xmlhttprequest == undefined || xmlhttprequest == null){ 22         alert("XMLHttpRequest對象建立失敗！！"); 23     }else{ 24         this.xmlhttp=xmlhttprequest; 25  } 26       
27     //用戶發送請求的方法 
28     MyXMLHttpRequest.prototype.send=function(method,url,data,callback,failback){ 29         if(this.xmlhttp!=undefined && this.xmlhttp!=null){ 30             method=method.toUpperCase(); 31             if(method!="GET" && method!="POST"){ 32                 alert("HTTP的請求方法必須爲GET或POST!!!"); 33                 return; 34  } 35             if(url==null || url==undefined){ 36                 alert("HTTP的請求地址必須設置！"); 37                 return ; 38  } 39             var tempxmlhttp=this.xmlhttp; 40             this.xmlhttp.onreadystatechange=function(){ 41                 if(tempxmlhttp.readyState==4){ 42                     if(temxmlhttp.status==200){ 43                         var responseText=temxmlhttp.responseText; 44                         var responseXML=temxmlhttp.reponseXML; 45                         if(callback==undefined || callback==null){ 46                             alert("沒有設置處理數據正確返回的方法"); 47                             alert("返回的數據：" + responseText); 48                         }else{ 49  callback(responseText,responseXML); 50  } 51                     }else{ 52                         if(failback==undefined ||failback==null){ 53                             alert("沒有設置處理數據返回失敗的處理方法！"); 54                             alert("HTTP的響應碼：" + tempxmlhttp.status + ",響應碼的文本信息：" + tempxmlhttp.statusText); 55                         }else{ 56  failback(tempxmlhttp.status,tempxmlhttp.statusText); 57  } 58  } 59  } 60  } 61               
62             //解決緩存的轉換 
63             if(url.indexOf("?")>=0){ 64                 url=url + "&t=" + (new Date()).valueOf(); 65             }else{ 66                 url=url+"?+="+(new Date()).valueOf(); 67  } 68               
69             //解決跨域的問題 
70             if(url.indexOf("http://")>=0){ 71                 url.replace("?","&"); 72                 url="Proxy?url=" +url; 73  } 74             this.xmlhttp.open(method,url,true); 75               
76             //若是是POST方式，須要設置請求頭 
77             if(method=="POST"){ 78                 this.xmlhttp.setRequestHeader("Content-type","application/x-www-four-urlencoded"); 79  } 80             this.xmlhttp.send(data); 81     }else{ 82         alert("XMLHttpRequest對象建立失敗，沒法發送數據！"); 83  } 84     MyXMLHttpRequest.prototype.abort=function(){ 85         this.xmlhttp.abort(); 86  } 87  } 88 }  

  固然這些都須要咱們在實踐中不斷的摸索，使用，再總結屬於本身的一套經常使用類，方法等。固然XMLHttpRequest還有「瀏覽器緩存問題」，「中文亂碼問題」，「跨域訪問問題」等等。