AJAX以及XMLHttpRequest

AJAX技術

概念：源自百度百科 — — AJAX（Asynchronous Javascript And XML）

簡單歸納一下：

• AJAX是web編程的技術，不是一門新的編程語言
• AJAX充當了客戶端與服務器之間的中間人，經過異步（也可同步，但下降用戶體驗，不提倡）來作HTTP的GET與POST請求操做。
• AJAX經過一個對象XMLHttpRequest來實現異步通訊的（核心）

XMLHttpRequest對象

API：XMLHttpRequest接口文檔

 主要屬性和方法

①建立對象

var xhr         //此時xhr至關於客戶端與服務器之間的中間人   
if(window.XMLHttpRequest)   //IE6.0 和 IE5.5中，window沒有XMLHttpRequest屬性
{
    xhr = new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE6.0 和 IE5.5中,用此方法建立
{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

②向服務器發送請求

通常客戶端向服務器發送請求爲GET和POST兩種，，在XMLHttpRequest對象中，經過如下方法實現：

• xhr.open() — — 初始化請求，至關於在發送請求前，對請求的方法、連接等進行配置。

xhr.open(method, url, async)
-----------------------------
//method:有GET、POST等HTTP請求方法
//url：向服務器請求資源的url
//async：是否異步請求。true爲異步、false爲同步

• xhr.send()  — — 在open方法中配置完後，經過此方法發送請求。若是是異步請求（默認爲異步請求，即open（）中，async參數爲true），則此方法會在請求發送後當即返回；若是是同步請求，則此方法直到響應到達後纔會返回。

------------GET----------------

//將參數配置到url中
xhr.open('GET', 'Http://www.jaykoo.com/index.php?foo=bar&lorem=ipsum', true)

xhr.send()


------------POST----------------

xhr.open('POST', 'Http://www.jaykoo.com/index.php', true)

xhr.setRequestHeader("Content-type","application/json; charset=utf-8")

//將參數放置在HTTP內容中進行POST請求
//send(body),通常要把傳送的數據放在body中
xhr.send('foo=bar&lorem=ipsum')

看完上面的 send() 操做，有如下兩個疑問（待解決）：

• 一、xhr.setRequestHeader()是什麼？
• 二、爲何GET與POST請求的參數，前者放在url中，後者放在send的請求內容體中？

③請求狀態的變化以及響應事件

AJAX請求分爲幾個階段，在XMLHTTPRequest中經過readystate屬性來指定不一樣的階段狀態。當狀態改變時會經過onreadystatechange屬性來調用回調函數，對不一樣階段狀態的改變做出響應操做。

• xhr.readystate
• xhr.onreadystatechange = callback

readystate

狀態值	描述
0	XMLHttpRequest 代理已被建立， 但還沒有調用 open() 方法。
1	open() 方法已經被觸發。在這個狀態中，能夠經過  setRequestHeader() 方法來設置請求的頭部， 能夠調用 send() 方法來發起請求。
2	send() 方法已經被調用，響應頭也已經被接收。
3	響應體部分正在被接收。若是 responseType 屬性是「text」或空字符串， responseText 將會在載入的過程當中擁有部分響應數據。
4	請求操做已經完成。這意味着數據傳輸已經完全完成或失敗。

onreadystatechange

看屬性名就可知道，當readystate屬性狀態值變化時，xhr立刻回調用onreadystatechange定義的回調函數。

（readystatechange實際上是xhr的註冊事件，onreadystatechange實際上是對事件的響應）

xhr.onreadystatechange = function(){
    if(xhr. readystate = 4){
        /* do something */
    }
}

經過readystate狀態值，能夠對XMLHttpRequest的請求響應狀態進行判斷。但卻沒法判斷服務器返回的響應報文中，HTTP的狀態碼（例如常見的，200成功，403服務器拒絕請求，404頁面資源沒法找到等）。這裏XMLHttpRequest對象中用status屬性來獲得響應狀態碼的值。

status

返回了XMLHttpRequest響應中的數字狀態碼。status對應在服務器響應報文中標準的HTTP響應碼。若在響應前或是XMLHttpRequest出錯時，status的值爲0