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

一、 創建XHR對象

var xhr=new XMLHttpRequest();

二、啟動和發送請求

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

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

xhl.send(null);

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

三、 處理響應

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

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 }

四、異步獲取數據

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

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

1：啟動。已經調用open()方法，但尚未調用send()方法。

3. 發送。已經調用send()方法，但尚未接受到響應。

3. 接受。已經接受到部分響應數據。

4. 完成。已經接受到全部響應數據，而且已經可以在客戶端使用了。

只要readyState的屬性值改變一次，就會觸發一次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);

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

五、get請求

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

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

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

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

六、POST請求

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

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()函數將頁面中表單的數據進行序列化，然后通過XHR發送到服務器。

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請求消耗的資源會多一些。從性能角度來看，以發送相同的數據計，Get請求的速度最多可達到POST請求的兩倍。

七、FormData

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

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

可以使用append方法向FromData對象中追加數據：

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

八、進度事件

有以下6個進度事件：

loadstart:在接受到響應數據的第一個字節時觸發。

progress:在接受響應期間持續不斷的觸發。

error:在請求發生錯誤時觸發。

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

load：在接受到完整的響應數據時觸發。

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

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

Content-Length響應頭部確定的預期字節數。有了這些數據，就可以創建一個進度指示器了：

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

?

轉載于:https://www.cnblogs.com/snsart/p/10896137.html

總結

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

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