關於ajax同步異步~

問題：以一個例子講述ajax異步實現與做用

ajax不是一種新的編程語言，而是一種異步請求數據的web開發技術，對於改善用戶的體驗和頁面性能頗有幫助；具備同步、異步兩種請求方式。一般狀況下異步請求使用更多，在不須要從新刷新頁面的狀況下，Ajax 經過異步請求加載後臺數據，並在網頁上呈現出來。

同步：事情一件一件來，只有一條線。

異步：多件事情一塊兒作，有多條線。

一 生活化例子

• 異步過程示意圖

   

• 同步過程示意圖

•  

   

二 代碼執行例子

• 異步過程示意圖

 

 

• 同步過程示意圖

   

   

 

三 ajax實現方式

1. 建立異步對象XMLHttpRequest

2. 操做XMLHttpRequest 對象

（1）設置請求參數（請求方式，請求頁面的相對路徑，是否異步）

（2）使用 onreadystatechange 設置回調函數

（3）發送請求，經過readyState 屬性監聽ajax請求狀態

（4）判斷響應報文的狀態，若爲200說明服務器正常運行並返回響應數據

var ajax_request= function () {
                var xhr = null;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();// 標準瀏覽器
                }else{
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');//非標準瀏覽器IE6/7/8
                }
                var type = 'post';
                var myurl = 'http://yapi.demo.qunar.com/mock/34006/ajaxjson';
                var async = true;//true表示異步，false表示同步
                xhr.onreadystatechange=function(){//監聽請求結果
                    if(xhr.readyState == 4)//瀏覽器經過readyState參數監聽和服務器的交互狀況
                    {
                        console.log('...')
                        if(xhr.status==200)//status參數表示http請求的狀態碼,用來判斷請求是否成功
                        {
                            console.log(xhr)//請求完成後的回調函數
                        }else{
                                    alert(oAjax.status+" NotFound");
                        }
                    }
                }
                xhr.open(type,myurl,async);//設置請求參數
                var param = JSON.stringify({
                        "user":$("#registerCity").val()
                })
                xhr.send(param);//發送請求
​
    };

四 ajax應用場景及做用

ajax 是一項用於異步拉取數據的技術，這對須要延遲加載數據和觸發式加載數據的頁面有很大益處

應用場景：搜索聯想詞提示、視頻網站中文字與海報的異步加載、地圖應用等等。

（代碼演示）

五 ajax優缺點

優勢：

1. 無刷新更新數據。 ajax最大優勢就是能在不刷新整個頁面的前提下與服務器通訊維護數據。這使得web應用更爲迅捷地響應用戶交互，並避免了在網絡上發送冗餘信息，減小用戶等待時間，優化用戶體驗。

2. 異步與服務器通訊。 ajax使用異步方式與服務器通訊，不須要打斷用戶的操做，具備更加迅速的響應能力。優化了客戶端和服務器之間的溝通，減小沒必要要的數據傳輸、時間及下降網絡上數據流量。

3. 基於標準被普遍支持。 ajax基於標準化的並被普遍支持的技術，不須要下載瀏覽器插件或者小程序，但須要客戶容許JavaScript在瀏覽器上執行。

4. 界面與應用分離。 ajax使web中的界面與應用分離（也能夠說是數據與呈現分離），有利於分工合做、減小非技術人員對頁面的修改形成的web應用程序錯誤、提升效率、也更加適用於如今的發佈系統。

缺點：

1. ajax破壞瀏覽器back機制。 在動態更新頁面的狀況下，用戶沒法回到前一個頁面狀態，由於瀏覽器僅能記憶歷史記錄中的靜態頁面。但用戶一般會但願單擊後退按鈕可以取消他們的前一次操做，可是在ajax應用中沒法實現。

2. ajax增大網絡數據的流量。 ajax會增大網絡數據的流量，從而下降整個系統的性能。

3. ajax不能很好支持移動設備。 一些手持設備（如手機、PDA等）如今還不能很好的支持ajax，好比在手機的瀏覽器上打開採用ajax技術的網站時是不支持的。