Ajax的工作原理相當于在用戶和服務器之間加上了一個中間層，是用戶操作與服務器響應異步化。Ajax的一個最大的特點是無需刷新頁面，便可向服務器傳輸或讀寫數據（又稱無刷新更新頁面），這一特點主要得益于XMLHTTP組件XMLHTTPRequest對象。這樣就可以異步向服務器發送請求，并處理響應結果，而無須刷新頁面也不用每次將數據處理的工作提交給服務器來做，這樣既減輕了服務器的負擔又加快了響應速度、縮短了用戶等候的時間。

1、Ajax學習——XMLHttpRequest對象的屬性和方法

2、Ajax學習——XMLHttpRequest對象的創建

XMLHttpRequest對象是整個Ajax開發的基礎，它具有從客戶端到服務端異步發送http請求的能力。XMLHttpRequest對象由javascript創建并使用。由于XMLHttpRequest對象不是一個通用的國際標準，不同的瀏覽器對其實現方式也不相同。要想實現瀏覽器運行的Ajax程序，需要考慮所有的使用場合。

創建XMLHttpRequest對象的方法：

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

3、Ajax學習——使用XMLHttpRequest對象與服務器端通信的過程

1、第一步：

使用open()方法創建一個http請求：

open(method,url,asynchronous,username,password); /*method：http請求方式，post或者get；url：服務器端程序的url；asynchronous：定義request是否異步，為true異步請求 ，send()函數再發送request后馬上返回；為false同步請求 ，send()函數必須在收到回執后才執行，默認為true；username：有些url要求request帶用戶名，一般不會用到；password：一般不會用到。 */例如：xmlhttp.open("GET","ajax?name=" +userName,true);

2、第二步：

使用send()方法發送一個請求：

send(body); //body參數表示要向服務器發送的數據，其格式為字符串注意： （1）使用get請求，所有的提交字符串都顯示在了url上，所以發送的數據body為null； （2）使用post請求，在send提交之前需要設置http頭，request.setRequestHeader(***); （3）其它情況下post請求和get請求沒區別。例如：xmlhttp.send(null);

3、第三步

使用onreadystatechange事件捕獲請求狀態變化：
onreadystatechange是XMLHttpRequest對象的參數，是用來定義此對象狀態改變事件發生時的監聽器，它的值對應一個javascript函數。

4、第四步

使用readyState屬性判斷請求狀態變化：
readyState的值表示了當前的請求狀態，可能的狀態有5個。

例如：

xmlhttp.onreadystatechange=callback; //根據實際條件寫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對象 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(); } } }

有關Ajax框架，比如AjaxPro等待總結。

總結

以上是生活随笔為你收集整理的Ajax系统学习总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。