ajax請求相關

上一篇單獨寫的是ajax跨域，這一篇就來詳細說一說ajax，ajax是現代web開發中必不可少的一部份內容，很是基礎也很是重要，這篇總結一下到目前爲止我對ajax的理解。

什麼是ajax

ajax是web開發中的一種交互技術，全稱爲Asynchronous JavaScript And XMLHttpRequest，使用ajax能夠實現頁面局部更新，每次變化再也不須要請求整個頁面，以前在我web開發歷史的文章中也提到過，從前的web頁面每次須要更新時都必需要刷新整個頁面，總體體驗很是很差。ajax的出現並大量使用在web開發中絕對是顛覆性的變化，它使得開發出優秀的web應用成爲現實，今後各類各樣的前端技術才得以興起。時至今日，ajax已經成爲web開發中難以或缺的一部分。

ajax的核心天然就是XMLHttpRequest對象了，它存在於全部現代瀏覽器中（IE5 和 IE6 使用 ActiveXObject），它使得瀏覽器能夠發出HTTP請求與接收HTTP響應。有了這一基礎，剩下的就是js交互了，整個過程瀏覽器就能夠處理，而交換數據的文檔也不限於xml（如今經常使用json）。

ajax交互流程

一次ajax交互是瀏覽器向服務器請求一次數據的過程，整個過程可分爲4步：

1. 請求發起：在此階段，由XMLHttpRequest發起一個http請求，GET、POST、PUT、DELETE、UPDATE等等均可以。
2. 數據傳送：發起請求以後就要傳遞數據，不一樣的請求方式傳遞數據的方式細節不一樣，但都是瀏覽器向服務器方向的，由於交互是雙方的，數據傳遞天然很重要。
3. 監聽狀態：整個請求過程結束後瀏覽器的任務就是等，等待服務器的響應，這個過程不會阻塞用戶，只是在後臺監聽鏈接狀態，這裏就體現出異步的優點了。
4. 接收響應：服務器處理完數據以後，後返回結果給瀏覽器，瀏覽器就能夠接收整個請求返回的響應信息，而後本次請求結束。

以上就是一次完整的ajax交互，下面來經過代碼展現一下簡單的ajax流程。

代碼演示

先來看代碼

var xhr = new XMLHttpRequest();          
xhr.open('GET', url, true); // url 是一個URL
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304){        
        // 得到 xhr.responseText 爲相應數據
    }
};
xhr.send();

咱們來一點點看其中涉及到的方法和相關概念，首先建立了一個XMLHttpRequest對象，而後接下來是一個open方法，第一個參數是請求方法，第二個參數是一個URL，默認狀況要求同源（關於同源策略和跨域能夠看我上一篇文章），第三個參數指的是是否爲異步請求，默認是true能夠省略。open方法結束會初始化HTTP請求參數，可是並不發送請求。

作好請求發送準備了，不過如今還不能發送請求。由於請求是異步的，咱們沒法獲知請求的進度和響應狀態，XMLHttpRequest給咱們提供了一個事件onreadystatechange，咱們能夠經過監聽這個時間來關注這種變化，因此下一步是註冊onreadystatechange事件。

先了解一下readyState，當一個XMLHttpRequest初次建立時，這個readyState的值從0開始，直到接收到完整的HTTP響應，這個值增長到4，具體狀況以下：

狀態	名稱	描述
0	Uninitialized	初始化狀態。XMLHttpRequest 對象已建立或已被 abort() 方法重置。
1	Open	open()方法已調用，可是 send() 方法未調用。請求尚未被髮送。
2	Sent	Send()方法已調用，HTTP 請求已發送到 Web 服務器。未接收到響應。
3	Receiving	全部響應頭部都已經接收到。響應體開始接收但未完成。
4	Loaded	HTTP 響應已經徹底接收。

在這裏咱們只要判斷這個值是否是4就能夠知道響應是否接收完成了。

另外一個要關注的就是status，它指的就是HTTP狀態碼，這個你們都很熟悉了，只要是200（OK）或304（Not Modified）就是成功的請求（這裏也能夠關注statusText，它指的是狀態碼對應的名稱，不經常使用）。此時就能夠獲取到響應數據了，responseText即爲響應體內容（還有一個responseXML，它對請求的響應解析爲XML並做爲Document對象返回，不經常使用）。到此，請求準備徹底完成。

接下來調用send方法，發送請求，其中若是是POST或PUT請求能夠把請求體做爲參數傳入。整個請求到此就發送完成了。

XMLHttpRequest還有幾個這裏沒涉及到的方法abort，getAllResponseHeaders，getResponseHeader，setRequestHeader，暫時用不到這裏不過多介紹了。

對於ie五、6，建立xhr對象要使用new ActiveXObject("Microsoft.XMLHTTP")，不過之後應該沒用了。

以上就是原生js實現的ajax，在實際開發中咱們幾乎永遠都不會去寫ajax，封裝好的ajax庫有不少，比較熟悉的jquery中的$.ajax，$get，$post等等。到此，傳統的基於XMLHttpRequest 實現的ajax的內容就結束了，不過如今還有一個東西須要認識一下。

fetch

XMLHttpRequest的api上面已經看到了，能夠說的上很複雜了，它複雜到咱們平時幾乎都用不上原生api，因而，一種新的更優雅的解決方案--fetch誕生了。

首先fetch是新東西，先來看瀏覽器支持率：

能夠看出其實不是很樂觀，不過沒關係，咱們可使用polyfill來實現，因此能夠直接來看fetch的例子：

fetch(url, { 
    method: 'GET',
    headers: new Headers({
      'Accept': 'application/json'
    })
  }).then(res=>{
    return res.json() 
  }).then(res=>{
    console.log(res) 
  }).catch(err=>{
    // 處理異常
  })

能夠看出fetch是基於promise的（關於promise相關內容在這篇文章中提到過）,因此能夠鏈式調用，整個過程不難理解，請求結果若是是json還支持直接處理，fetch的api很是實用，適合現代前端開發使用，使用React開發時候一般咱們都選fetch做爲數據請求工具。

---

至此，這篇文章內容就結束了，最後仍是版權信息：尊重原創，轉載分享前請先知悉做者，也歡迎指出錯誤不足共同交流，更多內容歡迎關注做者博客點擊這裏