ajax請求相關(guān)

Alliot 發(fā)布于2019-08-01 18:36 / 1630人閱讀

摘要：因為請求是異步的，我們無法獲知請求的進度和響應狀態(tài)，給我們提供了一個事件，我們可以通過監(jiān)聽這個時間來關(guān)注這種變化，所以下一步是注冊事件。請求還沒有被發(fā)送。方法已調(diào)用，請求已發(fā)送到服務器。到此，請求準備完全完成。

上一篇多帶帶寫的是ajax跨域，這一篇就來詳細說一說ajax，ajax是現(xiàn)代web開發(fā)中必不可少的一部分內(nèi)容，非常基礎也非常重要，這篇總結(jié)一下到目前為止我對ajax的理解。

什么是ajax

ajax是web開發(fā)中的一種交互技術(shù)，全稱為Asynchronous JavaScript And XMLHttpRequest，使用ajax可以實現(xiàn)頁面局部更新，每次變化不再需要請求整個頁面，之前在我web開發(fā)歷史的文章中也提到過，從前的web頁面每次需要更新時都必須要刷新整個頁面，整體體驗非常不好。ajax的出現(xiàn)并大量使用在web開發(fā)中絕對是顛覆性的變化，它使得開發(fā)出優(yōu)秀的web應用成為現(xiàn)實，從此各種各樣的前端技術(shù)才得以興起。時至今日，ajax已經(jīng)成為web開發(fā)中難以或缺的一部分。

ajax的核心自然就是XMLHttpRequest對象了，它存在于所有現(xiàn)代瀏覽器中（IE5 和 IE6 使用 ActiveXObject），它使得瀏覽器可以發(fā)出HTTP請求與接收HTTP響應。有了這一基礎，剩下的就是js交互了，整個過程瀏覽器就可以處理，而交換數(shù)據(jù)的文檔也不限于xml（現(xiàn)在常用json）。

ajax交互流程

一次ajax交互是瀏覽器向服務器請求一次數(shù)據(jù)的過程，整個過程可分為4步：

請求發(fā)起：在此階段，由XMLHttpRequest發(fā)起一個http請求，GET、POST、PUT、DELETE、UPDATE等等都可以。

數(shù)據(jù)傳送：發(fā)起請求之后就要傳遞數(shù)據(jù)，不同的請求方式傳遞數(shù)據(jù)的方式細節(jié)不同，但都是瀏覽器向服務器方向的，因為交互是雙方的，數(shù)據(jù)傳遞自然很重要。

監(jiān)聽狀態(tài)：整個請求過程結(jié)束后瀏覽器的任務就是等，等待服務器的響應，這個過程不會阻塞用戶，只是在后臺監(jiān)聽連接狀態(tài)，這里就體現(xiàn)出異步的優(yōu)勢了。

接收響應：服務器處理完數(shù)據(jù)之后，后返回結(jié)果給瀏覽器，瀏覽器就可以接收整個請求返回的響應信息，然后本次請求結(jié)束。

以上就是一次完整的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 為相應數(shù)據(jù)
    }
};
xhr.send();

我們來一點點看其中涉及到的方法和相關(guān)概念，首先創(chuàng)建了一個XMLHttpRequest對象，然后接下來是一個open方法，第一個參數(shù)是請求方法，第二個參數(shù)是一個URL，默認情況要求同源（關(guān)于同源策略和跨域可以看我上一篇文章），第三個參數(shù)指的是是否為異步請求，默認是true可以省略。open方法結(jié)束會初始化HTTP請求參數(shù)，但是并不發(fā)送請求。

做好請求發(fā)送準備了，不過現(xiàn)在還不能發(fā)送請求。因為請求是異步的，我們無法獲知請求的進度和響應狀態(tài)，XMLHttpRequest給我們提供了一個事件onreadystatechange，我們可以通過監(jiān)聽這個時間來關(guān)注這種變化，所以下一步是注冊onreadystatechange事件。

先了解一下readyState，當一個XMLHttpRequest初次創(chuàng)建時，這個readyState的值從0開始，直到接收到完整的HTTP響應，這個值增加到4，具體情況如下：

狀態(tài)	名稱	描述
0	Uninitialized	初始化狀態(tài)。XMLHttpRequest 對象已創(chuàng)建或已被 abort() 方法重置。
1	Open	open()方法已調(diào)用，但是 send() 方法未調(diào)用。請求還沒有被發(fā)送。
2	Sent	Send()方法已調(diào)用，HTTP 請求已發(fā)送到 Web 服務器。未接收到響應。
3	Receiving	所有響應頭部都已經(jīng)接收到。響應體開始接收但未完成。
4	Loaded	HTTP 響應已經(jīng)完全接收。

在這里我們只要判斷這個值是不是4就可以知道響應是否接收完成了。

另一個要關(guān)注的就是status，它指的就是HTTP狀態(tài)碼，這個大家都很熟悉了，只要是200（OK）或304（Not Modified）就是成功的請求（這里也可以關(guān)注statusText，它指的是狀態(tài)碼對應的名稱，不常用）。此時就可以獲取到響應數(shù)據(jù)了，responseText即為響應體內(nèi)容（還有一個responseXML，它對請求的響應解析為XML并作為Document對象返回，不常用）。到此，請求準備完全完成。

接下來調(diào)用send方法，發(fā)送請求，其中如果是POST或PUT請求可以把請求體作為參數(shù)傳入。整個請求到此就發(fā)送完成了。

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

對于ie5、6，創(chuàng)建xhr對象要使用new ActiveXObject("Microsoft.XMLHTTP")，不過以后應該沒用了。

以上就是原生js實現(xiàn)的ajax，在實際開發(fā)中我們幾乎永遠都不會去寫ajax，封裝好的ajax庫有很多，比較熟悉的jquery中的$.ajax，$get，$post等等。到此，傳統(tǒng)的基于XMLHttpRequest 實現(xiàn)的ajax的內(nèi)容就結(jié)束了，不過現(xiàn)在還有一個東西需要認識一下。

fetch

XMLHttpRequest的api上面已經(jīng)看到了，可以說的上很復雜了，它復雜到我們平時幾乎都用不上原生api，于是，一種新的更優(yōu)雅的解決方案--fetch誕生了。

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

可以看出其實不是很樂觀，不過不要緊，我們可以使用polyfill來實現(xiàn)，所以可以直接來看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的（關(guān)于promise相關(guān)內(nèi)容在這篇文章中提到過）,所以可以鏈式調(diào)用，整個過程不難理解，請求結(jié)果如果是json還支持直接處理，fetch的api非常實用，適合現(xiàn)代前端開發(fā)使用，使用React開發(fā)時候通常我們都選fetch作為數(shù)據(jù)請求工具。

至此，這篇文章內(nèi)容就結(jié)束了，最后還是版權(quán)信息：尊重原創(chuàng)，轉(zhuǎn)載分享前請先知悉作者，也歡迎指出錯誤不足共同交流，更多內(nèi)容歡迎關(guān)注作者博客點擊這里