ajax請(qǐng)求相關(guān)

h9911 發(fā)布于2019-08-30 14:00 / 477人閱讀

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

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

什么是ajax

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

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

ajax交互流程

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

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

數(shù)據(jù)傳送：發(fā)起請(qǐng)求之后就要傳遞數(shù)據(jù)，不同的請(qǐng)求方式傳遞數(shù)據(jù)的方式細(xì)節(jié)不同，但都是瀏覽器向服務(wù)器方向的，因?yàn)榻换ナ请p方的，數(shù)據(jù)傳遞自然很重要。

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

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

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

代碼演示

先來看代碼

var xhr = new XMLHttpRequest();          
xhr.open("GET", url, true); // url 是一個(gè)URL
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304){        
        // 獲得 xhr.responseText 為相應(yīng)數(shù)據(jù)
    }
};
xhr.send();

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

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

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

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

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

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

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

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

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

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

fetch

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

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

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

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