使用BOM接口從服務(wù)器獲取數(shù)據(jù)，獲取的是整個頁面，得到數(shù)據(jù)之后需要刷新整個頁面。運用ajax技術(shù)無須刷新頁面即可從服務(wù)器取得數(shù)據(jù)。ajax的核心是XMLHttpRequest對象。

一、 創(chuàng)建XHR對象

var xhr=new XMLHttpRequest();

二、啟動和發(fā)送請求

xhr.open("get","example.php",false);

open方法接受3個參數(shù)：要發(fā)送的請求的類型，請求的URL和表示是否異步發(fā)送請求的布爾值。URL相對于執(zhí)行代碼的當(dāng)前頁面。

xhl.send(null);

send方法接受一個參數(shù)，即要作為請求主體發(fā)送的數(shù)據(jù)。如果不需要通過請求主體發(fā)送數(shù)據(jù)，則必須傳入null。

三、 處理響應(yīng)

調(diào)用send()之后，請求就會被分派到服務(wù)器，等待服務(wù)器的響應(yīng)。在收到響應(yīng)后，響應(yīng)的數(shù)據(jù)會自動填充XHR對象的屬性，相關(guān)屬性簡介如下：
responseText：作為響應(yīng)主體被返回的文本。
responseXML：如果響應(yīng)內(nèi)容類型為"text/xml",這個數(shù)據(jù)將保存包含響應(yīng)數(shù)據(jù)的XML DOM文檔。
status：響應(yīng)的HTTP狀態(tài)說明。一般來說，可以將HTTP狀態(tài)代碼200作為成功的標(biāo)志，此時可以取得responseText屬性的值。狀態(tài)代碼304表示請求的資源并沒有被修改，可以使用瀏覽器緩存中的版本。
statusText：HTTP狀態(tài)的說明。

1 xhr.open("get","example.php",false); 2 xhr.send(null); 3 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ 4 alert("成功"+xhr.responseText); 5 }else{ 6 alert("失敗"+xhr.responseText); 7 }

四、異步獲取數(shù)據(jù)

XHR對象有一個readyState屬性，該屬性表示請求/響應(yīng)過程的當(dāng)前活動階段。這個屬性可取的值如下：

0：未初始化。尚未調(diào)用open()方法。

1：啟動。已經(jīng)調(diào)用open()方法，但尚未調(diào)用send()方法。

3. 發(fā)送。已經(jīng)調(diào)用send()方法，但尚未接受到響應(yīng)。

3. 接受。已經(jīng)接受到部分響應(yīng)數(shù)據(jù)。

4. 完成。已經(jīng)接受到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了。

只要readyState的屬性值改變一次，就會觸發(fā)一次readystatechange事件。

1 var xhr=new XMLHttpRequest(); 2 xhr.onreadystatechange=function(){ 3 if(xhr.readyState==4){ 4 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ 5 alert(xhr.responseText); 6 }else{ 7 alert("失敗"+xhr.responseText); 8 } 9 } 10 }; 11 xhr.open("get","example.php",true); 12 xhr.send(null);

調(diào)用xhr.abort()方法，XHR對象會停止觸發(fā)事件。

五、get請求

get請求常用于向服務(wù)器查詢某些信息，可以將查詢字符串追加到url的末尾：

xhr.open("get","example.php?age=20&name=xiaoming",true);

查詢字符串中每個參數(shù)的名稱和值都必須使用encodeURIComponent()進(jìn)行編碼，然后才能放到URL的末尾。下面這個函數(shù)可以輔助向現(xiàn)有URL的末尾添加查詢字符串參數(shù)：

1 function addURLParam(url,name,value){ 2 　　url+=(url.indexOf("?")==-1?"?":"&"); 3 　　url+=encodeURIComponent(name)+"="+encodeURIComponent(value); 4 　　return url; 5 }

六、POST請求

POST請求，通常用于向服務(wù)器發(fā)送應(yīng)該被保存的數(shù)據(jù)。POST請求的主體可以包含非常多的數(shù)據(jù)，而且格式不限。如果服務(wù)器上的PHP想通過$_POST超級全局變量獲取數(shù)據(jù)，可以使用XHR來模仿表單提交：首先將Content-Type頭部信息設(shè)置為application/x-www-form-urlencoded，也就是表單提交時的內(nèi)容類型，其次以適當(dāng)方式創(chuàng)建一個字符串。

1 xhr.open("post","test.php",true); 2 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 3 var data="age=20&name=dongfeng" 4 xhr.send(data);

也可以通過serialize()函數(shù)將頁面中表單的數(shù)據(jù)進(jìn)行序列化，然后通過XHR發(fā)送到服務(wù)器。

1 xhr.open("post","test.php",true); 2 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 3 var form=document.getElementById("user-info"); 4 xhr.send(serialize(form));

與get請求相比，POST請求消耗的資源會多一些。從性能角度來看，以發(fā)送相同的數(shù)據(jù)計，Get請求的速度最多可達(dá)到POST請求的兩倍。

七、FormData

FormData為序列化表單以及創(chuàng)建與表單格式相同的數(shù)據(jù)提供了便利。使用FromData的方便之處體現(xiàn)在不必明確地在XHR對象上設(shè)置請求頭部。XHR對象能夠識別傳入的數(shù)據(jù)類型是FormData的實例，并配置適當(dāng)?shù)念^部信息。

1 xhr.open("post","test.php",true); 2 var form=document.getElementById("user-info"); 3 xhr.send(new FormData(form));

可以使用append方法向FromData對象中追加數(shù)據(jù)：

var data=new FormData(); data.append("name","snsart");

八、進(jìn)度事件

有以下6個進(jìn)度事件：

loadstart:在接受到響應(yīng)數(shù)據(jù)的第一個字節(jié)時觸發(fā)。

progress:在接受響應(yīng)期間持續(xù)不斷的觸發(fā)。

error:在請求發(fā)生錯誤時觸發(fā)。

abort：在因為調(diào)用abort()方法而終止連接時觸發(fā)。

load：在接受到完整的響應(yīng)數(shù)據(jù)時觸發(fā)。

loadend:在通信完成或者觸發(fā)error、abort或load事件后觸發(fā)。

其中onprogress事件處理程序會接收到一個envent對象，其target屬性時XHR對象，并且有三個額外的屬性：lengthComputable、position和totalSize。其中，lengthComputable是一個表示進(jìn)度信息是否可用的布爾值，position表示已經(jīng)接收的字節(jié)數(shù)，totalSize表示根據(jù)

Content-Length響應(yīng)頭部確定的預(yù)期字節(jié)數(shù)。有了這些數(shù)據(jù)，就可以創(chuàng)建一個進(jìn)度指示器了：

1 xhr.οnprοgress=function(event){ 2 　　var divStatus=document.getElementById("status"); 3 　　if(event.lengthComputable){ 4 　　　　divStatus.innerHTML="接收："+event.position+"總共："+"event.tatalSize"+"字節(jié)"; 5 　　} 6 }; 7 xhr.open("get","altevents.php",true); 8 xhr.send(null);

?

轉(zhuǎn)載于:https://www.cnblogs.com/snsart/p/10896137.html

總結(jié)

以上是生活随笔為你收集整理的浏览器与服务器通信技术——Ajax详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。