同步互動

就是指傳送一個請求，需要等待返回，然後才能夠傳送下一個請求，同步互動相當於排隊，輪到下一個的情況會因為前一個而有所不同

• 優勢

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()傳送請求資料