深刻了解ajax

AJAX全稱「Asynchronous JavaScript and XML」（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術。
它有機地包含了如下幾種技術：
基於web標準（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）進行動態顯示及交互；
使用 XML 和 XSLT 進行數據交換及相關操做； 使用 XMLHttpRequest 進行異步數據查詢、檢索；
使用 JavaScript 將全部的東西綁定在一塊兒。

Ajax的實現流程是怎樣的？

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.
(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.
(3)設置響應HTTP請求狀態變化的函數.
(4)發送HTTP請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新.

基本步驟：

var xhr =null;//建立對象         
    if(window.XMLHttpRequest){    
        xhr = new XMLHttpRequest();    
        }else{    
            xhr = new ActiveXObject("Microsoft.XMLHTTP");    
        }    
         xhr.open(「方式」,」地址」,」標誌位」);//初始化請求     `請輸入代碼`
         xhr.setRequestHeader(「」,」」);//設置http頭信息     
         xhr.onreadystatechange =function(){}//指定回調函數     
         xhr.send();//發送請求

默認狀況下，在發送XHR請求的同時，還會發送下列頭部信息
Accept: 瀏覽器可以處理的內容類型
Accept-Charset: 瀏覽器可以顯示的字符集
Accept-Encoding: 瀏覽器可以處理的壓縮編碼
Accept-Language: 瀏覽器當前設置的語言
Connection: 瀏覽器與服務器之間鏈接的類型
Cookie: 當前頁面設置的任何Cookie
Host: 發出請求的頁面所在的域
User-Agent: 瀏覽器的用戶代理字符串
Referer: 發出請求的頁面的URI

一、open()方法的第一個參數用於指定發送請求的方式，這個字符串，不區分大小寫，但一般使用大寫字母。
"GET"和"POST"是獲得普遍支持的"GET"用於常規請求，它適用於當URL徹底指定請求資源，當請求對服務器沒有任何反作用以及當服務器的響應是可緩存的狀況下."POST"方法經常使用於HTML表單。它在請求主體中包含額外數據且這些數據常存儲到服務器上的數據庫中。相同URL的重複POST請求從服務器獲得的響應可能不一樣，同時不該該緩存使用這個方法的請求.除了"GET"和"POST"以外，參數還能夠是"HEAD"、"OPTIONS"、"PUT"。而因爲安全風險的緣由，"CONNECT"、"TRACE"、"TRACK"被禁止使用。

二、open()方法的第二個參數是URL，該URL相對於執行代碼的當前頁面，且只能向同一個域中使用相同端口和協議的URL發送請求。若是URL與啓動請求的頁面有任何差異，都會引起安全錯誤。
三、open()方法的第三個參數是表示是否異步發送請求的布爾值，若是不填寫，默認爲true，表示異步發送。
四、若是請求一個受密碼保護的URL，把用於認證的用戶名和密碼做爲第4和第5個參數傳遞給open()方法。
send()
　　send()方法接收一個參數，即要做爲請求主體發送的數據。調用send()方法後，請求被分派到服務器。
　　若是是GET方法，send()方法無參數，或參數爲null；若是是POST方法，send()方法的參數爲要發送的數據。

一.什麼是同步請求：(false)

同步請求便是當前發出請求後，瀏覽器什麼都不能作，必須得等到請求完成返回數據以後，纔會執行後續的代碼，至關因而排隊，前一我的辦理完本身的事務，下一我的才能接着辦。也就是說，當JS代碼加載到當前AJAX的時候會把頁面裏全部的代碼中止加載，頁面處於一個假死狀態，當這個AJAX執行完畢後纔會繼續運行其餘代碼頁面解除假死狀態(即當ajax返回數據後，才執行後面的function)。

二.什麼是異步請求：(true)

異步請求就當發出請求的同時，瀏覽器能夠繼續作任何事，Ajax發送請求並不會影響頁面的加載與用戶的操做，至關因而在兩條線上，各走各的，互不影響。

通常默認值爲true，異步。異步請求能夠徹底不影響用戶的體驗效果，不管請求的時間長或者短，用戶都在專心的操做頁面的其餘內容，並不會有等待的感受。

下面來區別一下同步和異步有什麼不一樣：

異步：在異步模式下，當咱們使用AJAX發送完請求後，可能還有代碼須要執行。這個時候可能因爲種種緣由致使服務器尚未響應咱們的請求，可是由於咱們採用了異步執行方式，全部包含AJAX請求代碼的函數中的剩餘代碼將繼續執行。若是咱們是將請求結果交由另一個JS函數去處理的，那麼，這個時候就比如兩條線程同時執行同樣。

同步：在同步模式下，當咱們使用AJAX發送完請求後，後續還有代碼須要執行，咱們一樣將服務器響應交由另外一個JS函數去處理，可是這時的代碼執行狀況是：在服務器沒有響應或者處理響應結果的JS函數尚未處理完成return時，包含請求代碼的函數的剩餘代碼是不可以執行的。就比如單線程同樣，請求發出後就進入阻塞狀態，直到解除阻塞，餘下的代碼纔會繼續執行。

ajax的優勢：

一、最大的一點是頁面無刷新，用戶的體驗很是好。
二、使用異步方式與服務器通訊，具備更加迅速的響應能力。
三、能夠把之前一些服務器負擔的工做轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。而且減輕服務器的負擔，ajax的原則是「按需取數據」，能夠最大程度的減小冗餘請求，和響應對服務器形成的負擔。
四、基於標準化的並被普遍支持的技術，不須要下載插件或者小程序。
五、ajax可以使因特網應用程序更小、更快，更友好。

ajax的缺點：

一、ajax不支持瀏覽器back按鈕。
二、安全問題 AJAX暴露了與服務器交互的細節。
三、對搜索引擎的支持比較弱。
四、破壞了程序的異常機制。

Ajax應用場景：

場景1 數據校驗
場景2 按照需求獲取數據
場景3 自動更新頁面內容

常見的狀態碼：

1XX：信息狀態碼
100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
2XX：成功狀態碼
200 OK 正常返回信息
201 Created 請求成功而且服務器建立了新的資源
202 Accepted 服務器已接受請求，但還沒有處理
3XX：重定向
301 Moved Permanently 請求的網頁已永久移動到新位置。
302 Found 臨時性重定向。
303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求後，請求的網頁未修改過。
4XX：客戶端錯誤
400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
401 Unauthorized 請求未受權。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。
5XX: 服務器錯誤
500 Internal Server Error 最多見的服務器端錯誤。
503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

響應頭:

Date：響應時間
Server：服務器信息
Last-Modified：資源最後修改時間 由服務器自動生成
ETag：資源修改後生成的惟一標識，由服務器自動生成
Content-Length：響應主體長度
Content-Type：響應資源的類型

jQuery中的Ajax操做

$.ajax({
    // 請求的地址
    url: "04-data.php",
    // 請求的方式
    type: "get",
    // 告訴jQuery，須要按照什麼格式對服務器返回的數據進行解析，默認json
    dataType: "json",
    // 數據
    data: {
        msg: "我是來請求數據的"
    },
    // 請求成功的回調函數
    success: function(data) {
        console.log(data);
    },
    // 請求失敗的回調函數
    error: function() {
        console.log("失敗了");
    },
    // 請求發送以前調用的函數
    beforeSend: function() {
        console.log("請求發送以前調用的函數");
        // 若是返回一個false，那麼就會阻止整個請求的發送
        // return false;
        // 用法：能夠用做表單驗證，當表單內容符合規範的時候發送ajax請求，當不符合的時候就不發送ajax請求
    },
    // 不論請求是成功仍是失敗的，只要請求完成就會調用
    complete: function() {
        console.log("請求完成了");
    },
    // 設置請求超時時間(單位:ms)，超過這個時間後，就不會請求了
    timeout:2000
});