溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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對象：
[javascript] view plain copy print?
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;
}
第二步：注冊回調方法
[javascript] view plain copy print?
<span style="font-size:18px;">xmlhttp.onreadystatechange=callback;
</span>
第三步：設置和服務器交互的相應參數
[javascript] view plain copy print?
<span style="font-size:18px;"> xmlhttp.open("GET","ajax?name=" +userName,true);
</span>
第四步：設置向服務器端發送的數據，啟動和服務器端的交互
[javascript] view plain copy print?
<span style="font-size:18px;"> xmlhttp.send(null);</span>
第五步：判斷和服務器端的交互是否完成，還要判斷服務器端是否返回正確的數據
[javascript] view plain copy print?
<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基本上就創建好，可以正常使用了，但是這是需要非常多的代碼的，總不能每次創建都寫這么多吧？當然不是了，我們學習了面向對象，我們將其必要相同的部分都抽象出來，使之成為一個獨立類，別的直接調用即可，在網上看了一個，感覺寫的挺好：
[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<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還有“瀏覽器緩存問題”，“中文亂碼問題”，“跨域訪問問題”等等，因為都沒有遇到過這些東西，所以這里先了解一下，以后遇到再認真研究！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
