突破：Ajax請求

==> 本人文章純屬我的理解，若有差池萬望斧正<==

Ajax的介紹

Ajax請求是現代網頁最重要的構成元素之一，經過這項技術，用戶能夠在不重載整個頁面的狀況下，完成局部數據的交互與刷新。若是這項功能不存在，那每一次向服務器申請數據，全部內容都須要從新下載、排列。
雖然聽上去這是一個凌駕於網頁規則之上的高階技術。但本質上它仍然是http請求，或者說主要以該請求爲載體，這個請求能夠具有HTTP請求的全部特徵，如：請求行，請求頭，請求體。並開放了一些可供開發者自定義的內容。咱們不須要關心XMLHttpRequest實例的具體實現方式，只須要了解——這個請求幫你向服務器傳達什麼？它返回的響應如何處理？
Ajax請求通常以DOM的某個事件驅動，如加載完畢，點擊等

Ajax的流程

一個完整的Ajax具備如下4個執行步驟：

1，建立實例
Ajax經過XMLHttpRequest()的實例來實現，其中XML是一種經典的、標準的、兼容性強的數據存儲格式。但當下的主要網絡傳輸方式，大都以更加輕量、易讀的JSON進行。IE6及IE5並不支持該實例的建立，若是考慮到兼容上述瀏覽器，能夠建立ActiveXObject("Microsoft.XMLHTTP") 實例。經常使用的兼容寫法以下：

try{
    var xhr = new XMLHttpRequest()
}catch{
    var xhr = new ActiveObject('Microsoft.XMLHTTP')
}
--------------------------
var xhr
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest()
}else{
    xhr = new ActiveObject('Microsoft.XMLHTTP')
}

2，定義請求內容
經過實例.open(請求方法，請求URL，是否異步) 定義請求的發送方式和內容，與HTTP請求不一樣的是，Ajax僅可使用get或post兩種請求方法；請求URL同HTTP標準；請求行中，用於填寫協議版本的部分，此處能夠忽略或寫入一個布爾值。布爾值默認爲true，此時請求被異步處理，若是爲false則進行同步處理。

當同步處理進行時，頁面的其餘行爲將陷入停滯沒法被觸發，由於JS的線程正在被佔用，直到Ajax收到響應數據或失敗結果後纔會恢復。這種請求可用於移動端APP，你在看到滾動條或loading圖時，任何動做都不會被瀏覽器捕獲到，由於此時的瀏覽器無暇顧及你的其餘命令。
雖然JS是單線程，但瀏覽器不是，因此當異步操做時，發送後進入等待狀態的Ajax會被瀏覽器開啓另外一個線程掛起，收到回覆後，會把這個Ajax結果放回JS主線程隊列的末端。這時不會影響到頁面的其餘行爲。如：在視頻緩存的同時，仍然能夠查看陳大臉先生播放列表裏都是哪些老師的做品。

xhr.open('GET','http://www.nichousha.com',true)

• 定義請求頭

實例.setRequestHeader(請求頭鍵，請求頭值) 基本不會用到的方法，但它的存在可以強化對Ajax本質的瞭解，即Ajax是一種具備較高完整度的，特殊的HTTP請求，你能夠只定義幾個關鍵內容就能正常地發送了。

3，發送請求
實例.send(請求體) 能夠發送此次請求，若是請求的方法是post，此處能夠寫入請求體。若是向服務器發送的請求不涉及過於複雜的內容。此處能夠send空值並使用get方法加問號傳參的方式發送。爲了保障兼容性，若是get方法發送空值，此處建議寫入null。如：實例.send(null)

xhr.send(null)

4，接收並處理響應
確認Ajax是否收到結果取決於兩個具體條件：Ajax狀態碼和http請求狀態碼。這個判斷由onreadystatechange觸發，每當Ajax進行到一個階段都會觸發這個狀態碼改變事件，併產生一次判斷，Ajax對應0-4共5個狀態碼：
（0）未初始化
（1）正在send發送
（2）完成send發送
（3）請求處理中
（4）請求完成或失敗，已收到確切響應
Ajax狀態碼（readyState）結果必定爲4，才能斷定爲成功。此時咱們還沒法證明它是否帶回了咱們想要的結果，由於它可能興致沖沖地迎上去，卻遭遇了404這種不友善錯誤的無情拒絕。因此這時還須要第二層判斷： http請求狀態碼（status）
若是請求被順利返回，此時的http狀態碼必定是200。
*假如缺乏對http請求狀態碼的二次判斷，onreadystatechange會分別在Ajax狀態碼1，2，3的改變事件觸發後進行完整的Ajax結果處理，至關於你在碗裏什麼東西都沒有的狀況下進食了約45分鐘。

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
    //處理結果
    }
}

Ajax的鉤子

ES標準中，還定義了一部分Ajax實例發送過程的階段型事件。經常使用的：如強制終止，最大時限，對不一樣結果的處理等...

絕對事件：

1.實例.onloadstart
當Ajax請求被髮起，就會觸發這個鉤子

2.實例.onprogress(event)
進度訪問，該鉤子能夠週期性地訪問兩個屬性：loaded和total（當前量傳輸和總量）通常用於顯示一個較大文件的上傳進度。

2.實例.onloadend
不管成功或是失敗，Ajax最終都會得到一個必然結果，並觸發這個鉤子。

3.實例.onload
成功地獲取了預期的請求結果。

4.實例.onerror
返回的實例並非一個正確的結果

意外事件：

1.實例.ontimeout
設置最大時限，配合 實例.timeout = 毫秒數，當Ajax超時，觸發這個鉤子

2.實例.onabort
請求終止，當實例.abort()終止請求時，觸發該鉤子

xhr.timeout = 1000;
xhr.ontimeout = function(){
    alert('已超時')
}

Ajax的結果處理

Ajax得到的結果能夠是XML或JSON，前者調用responseXML直接解析爲DOM對象。JSON則能夠被responseText轉換爲字符串格式