Ajax的異步交互步驟

同步交互

就是指發送一個請求，須要等待返回，而後纔可以發送下一個請求，同步交互至關於排隊，輪到下一個的狀況會由於前一個而有所不一樣

• 優點

1.同步交互維持了瀏覽器原有的前進和後退機制
2.若是後面邏輯的執行依靠前面邏輯執行的結果的話，同步交互在這方面不會出現問題
3.同步交互對搜索引擎比較友好

• 劣勢

1.用戶操做必須等待上次的結果返回，才能操做下一次
2.同步交互每次與服務器進行數據交換的時候，都會全部數據所有更新
3.同步交互對帶寬形成的壓力相比異步更大

異步交互

就是指發送一個請求，不須要等待返回，隨時能夠再發送下一個請求，同步交互與異步交互的區別在於同步交互須要等待結果，而異步交互不須要等待

• 優點

1.用戶操做無需像同步交互必須等待結果
2.異步交互只需與服務器交換必要的數據內容，而不是將全部數據所有更新
3.異步交互對帶寬形成的壓力相比同步交互更小
4.經過Ajax實現異步交互互不須要任何第三方插件，只要瀏覽器支持JavaScript語言便可實現

• 劣勢

1.異步交互破壞了瀏覽器原有的前進和後退機制
2.若是後面邏輯的執行依靠前面邏輯執行的結果的話，異步交互可能會形成問題
3.Ajax實現異步交互對搜索引擎支持較弱
4.Ajax實現異步交互會引發一些Web安全問題，例如SQL注入攻擊、跨站點腳本攻擊等問題

Ajax

Ajax是Asynchronous JavaScript XML縮寫，Ajax自己並非一個新技術，而是一個新術語，用來描述一種使用現有技術集合的‘新’方法
當使用Ajax模型。HTML頁面可以快速的將數據逐步更新顯示在用戶界面上，不須要重載(刷新)整個頁面，使HTML頁面能更快速的對用戶操做進行反饋、
儘管Ajax中的‘X’表明XML，但因爲JSON的許多優點，目前JSON的使用比XML更加廣泛，JSON和XML都被用於在Ajax模型中封裝數據

• Ajax涉及的技術領域

HTML，CSS，JavaScript，DOM，XML，XMLHttpRequest對象

• Ajax的工做原理：

1.操做HTML頁面
2.調用Ajax，綁定相關的監聽事件
3.請求數據
4.響應結果
5.將響應回來的結果更新到頁面
6.經過頁面展現更新的數據給用戶

• Ajax的核心對象

實現Ajax異步交互的核心就是XMLHttpRequest對象，該對象爲客戶端提供了在客戶端和服務器之間傳輸數據的功能
XMLHttpRequest對象提供了一個經過URL來獲取數據的簡單方式，而且不會使整個頁面刷新，這讓網頁只更新一部分頁面而不會打擾到用戶
XMLHttpRequest對象最初由微軟設計，隨後被Mozilla、Apple和Google採納。現在，該對象已經被W3C組織標準化，經過該對象，能夠很容易獲得一個URL上的資源數據，儘管名字裏有XML，但XMLHttpRequest對象能夠獲得全部類型的數據資源，並不侷限與XML格式的數據

• 實現Ajax的執行步驟

1.建立Ajax的核心對象XMLHttpRequest對象
2.經過XMLHttpRequest對象的open()方法與服務器端創建鏈接
3.構建請求所需的數據內容，並經過XMLHttpRequest對象的send()方法發送給服務器端
4.經過XMLHttpRequest對象的onreadystatechange事件監聽服務器端的通訊狀態
5.接收並處理服務器端向客戶端響應的數據結果
6.將處理結果更新到HTML頁面中

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
    if(xhr.readyState===4){
        if(xhr.status===200){}
    }
    xhr.open('get',url路徑)；
    /*若是是get的話，那麼send裏面的參數爲null，把要發送到服務器的數據寫在url路徑後面
       若是是post的話，那麼send裏面的參數爲要發送到服務器的數據
    */
    xhr.send(null)；
}

• 關於onreadystatechange事件

在XMLHttpRequest對象的readyState屬性表示客戶端請求狀態
0：UNSENT(未打開)：open()方法還未被調用
1：OPENED(未發送):open()方法已經被調用
2:HEADERS_RECEIVED(已獲取響應頭)：send()方法已經被調用，響應頭和響應狀態已經返回
3：LOADING(正在下載響應體)：響應體下載中；responseText中已經獲取了部分數據
4:DONE(請求完成)：整個請求過程已經完畢
接收服務器端向客戶端響應的數據結果，須要在整個請求過程完畢以後進行，也就是說：readyState屬性的值爲4時，才能夠接收完整的服務器端響應數據

• 監聽服務器端通訊狀態

僅僅經過XMLHttpRequest對象的readyState獲取請求狀態不能保證正確的接收服務器端響應的數據結果，還須要經過XMLHttpRequest對象的status屬性驗證返回的狀態碼爲200，說明請求成功

xhr.onreadystatechange=function(){
    //判斷請求過程是否完畢
    if(httpRequest.readyState===4){
        //判斷請求是否成功
        if(httpRequest.status===200){
        //接收服務器端響應的數據結果
        }
    }
}

• 處理服務器端響應數據

處理服務器端響應數據是經過XMLHttpRequest對象提供如下屬性完成：
1.httpRequest.responseText屬性：將服務器端響應做爲文本字符串返回
2.httpRequest.responseXML屬性：將響應做爲一個XMLDocument對象返回，該對象可使用JavaScript DOM進行解析
目前做爲客戶端與服務器端之間交互的數據格式更多爲JSON格式，而不是XML格式。因此XMLHttpRequest對象的responseXML屬性使用率逐漸下降

• GET請求

Ajax異步交互中使用GET請求方式的話，須要注意一下幾個問題：
1.將構建的請求數據添加到open()方法中的url地址中

//name=zhangsan&paw=456表示請求數據
httpRequest.open('GET','http://baidu.com?name=zhangsan&paw=456',true);

2.將發送請求數據的send()方法中參數設置爲null值

httpRequest.send(null);

• POST請求

Ajax異步交互中使用POST請求方式的話，須要注意如下幾個問題
1.調用send()方法以前，須要經過XMLHttpRequest對象的setRequestHeader()方法設置請求頭部信息

//header:將要被賦值的請求頭名稱
//value:給指定的請求頭部賦值
httpRequest.setRequestHeader(header,value);
/*例如：httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');*/

2.經過XMLHttpRequest對象的send()發送請求數據