瀏覽器與服務器通訊技術——Ajax詳解

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

1、 建立XHR對象

var xhr=new XMLHttpRequest();

2、啓動和發送請求

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

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

xhl.send(null);

send方法接受一個參數，即要做爲請求主體發送的數據。若是不須要經過請求主體發送數據，則必須傳入null。

3、 處理響應

調用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 }    

4、異步獲取數據

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對象會中止觸發事件。

5、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 }

6、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請求的兩倍。

7、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");

8、進度事件

有如下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.onprogress=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);