Ajax —— 多並發連接及前端設計模式

　  Ajax簡介

　  Ajax是Asynchronous Javascript and XML的縮寫，這個術語由Jesse James Carrett創造，最早出現在他於2005年2月發表的文章“Ajax: A New Approach to Web Applications”。其主要的特點就是使用腳本操縱HTTP和Web服務器進行數據交換，不會導致頁面重載。

　　Ajax並非一門新的開發語言，而是一組技術的專用術語，包括DHTML和XMLHTTPRequest對象，而DHTML通常是指HTML、CSS和javascript組合使用。Ajax的本質也就是從服務器動態請求數據后使用這些數據更改頁面。

　　實現Ajax的方式有許多中，例如：利用img標簽的src屬性或者script標簽的src屬性，這種傳輸協議式的實現相對於XMLHttpRequest對象方式復雜，並且存在着各式各樣的問題，因而最常見的方式。Ajax的基礎知識點就討論到這里，今天的重點是Ajax的並發和使用技巧。

　　

 

 

 

 

 

 

 

 

　　Ajax並發

　　Ajax是以異步的方式向服務器提交需求，這就會存在多個ajax請求同時提交，或者迭代提交的情況，這將導致資源競爭（racing），設計較好的情況下，可以通過disable提交按鈕的緩解此類問題，但一旦出現迭代提交request的情況，就可能出現XMLHttpRequest對象的引用被覆蓋，但具體會發生什么樣的情況，取決於Ajax的編碼。

 　　Ajax在異步的情況下，並發數並非沒有限制，Wininet 會限制每個服務器的連接數，限制它對單個 HTTP 服務器的同時連接的數量。如果超過此限制時，請求將阻止，直到完成當前的連接之一。這是設計使然，是與 HTTP 規范和行業標准。例如IE8並發數就限制在2，Firefox 21限制在6。當然IE的限制可以在注冊表中修改，HKEY_LOCAL_MACHINE\SOFTWARE\   Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_MAXCONNECTIONSPERSERVER。

 

 

ersion	HTTP 1.0 server (broadband connection)	HTTP 1.1 server (broadband connection)	HTTP 1.0 server (dial-up connection)	HTTP 1.1 server (dial-up connection)
Internet Explorer 7 and earlier	4	2	4	2
Internet Explorer 8	6	6	4	2

　　超出上述限制，超出的請求將會被瀏覽器阻塞，直到先前的請求已經完成才會啟動。在這里建立使用隊列來解決這些問題。基本思路，生成XHR對象之后，檢測當前並發數量是否大於最大請求的上限，若大於上限，則將XHR對象壓入隊列之中，否則就可以直接發送，並且可以繼續增加並發請求數量。請求完成的時候，進行響應處理，並在結束之時進行並發數量減一操作，接着就可以檢測隊列中是否有等待請求，若有等待請求，就發送給隊首的XHR對象進行請求。

 　　Ajax前端設計模式

　　更換部分HTML

　　最常見的Ajax任務也就是向服務器請求更新部分HTML內容，例如：更新股票的標價，對查詢請求進行部分更新。

function resHandler(){
    if(req.readystate === 4 && req.status === 200){
        ele.innerHTML = req.responseText;
    }      
}

　　讀取XML數據

　　若希望javascript代碼在頁面中使用數據執行一些智能化的任務，可以使用結構化的方式將數據發送到瀏覽器客戶端，最適合的格式有：XML、JSON等。

function resHandler(){
    if(req.readystate === 4 && req.status === 200 && req.responseXML){
        var root = req.responseXML.getElementById('root');
        //讀取XML數據...
    }
}

　　與上一種模式最大的區別是使用了req.responseXML，responseXML是一個XML文檔對象模型（DOM），這種模型只有在 服務器的響應是正確編碼的XML時才是可用的。responseXML對象可以直接讀取使用，但是當數據結構比較復雜之時，解析和檢索XML文檔需要花不 少時間，這時候可以考慮使用JSON格式。

　　讀取JSON數據

　　返回JSON格式的優點是能夠使瀏覽器高效地解析，並創建使用起來更加簡單的JSON數據。JSON格式更加容易讀取和管理，因而Ajax開發時，json格式更加受到歡迎。

function resHandler(){
    if(req.readystate === 4 && req.status === 200){
        var json = JSON.parse(req.responseText);
        //...
    }
}

　　避免瀏覽器緩存

　　若對同一個URL請求兩次，瀏覽器將使用緩存中的頁面。因此，最常見的解決辦法就是URL拼接一個隨機數或者拼接一個時間戳，這樣瀏覽器就不會 反悔一個緩存的結果。個人最喜歡的是想URL添加當前時間的數字值。url +=(new Date()).getTime()。

function addTimeStamp(url) {
            var getTimestamp = new Date().getTime();
            if(url.indexOf("timestamp=") > -1) return url;
            if (url.indexOf("?") > -1) 
                url = url + "&timestamp=" + getTimestamp;
            else 
                url = url + "?timestamp=" + getTimestamp;                
            return url;
        }

　　

　　THML模板　　

　　當然為了開發的便捷，你可以對HTML的修改進行模板化，通過從服務器響應讀取對應的數據對HTML模板進行填充，這種方案只是更換部分HTML的升級模式。