ajax請求相關

Alliot 發布于2019-08-01 18:36 / 1625人閱讀

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

上一篇多帶帶寫的是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步：

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

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

監聽狀態：整個請求過程結束后瀏覽器的任務就是等，等待服務器的響應，這個過程不會阻塞用戶，只是在后臺監聽連接狀態，這里就體現出異步的優勢了。

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

以上就是一次完整的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，暫時用不到這里不過多介紹了。

對于ie5、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作為數據請求工具。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51857.html

ajax請求相關

摘要：因為請求是異步的，我們無法獲知請求的進度和響應狀態，給我們提供了一個事件，我們可以通過監聽這個時間來關注這種變化，所以下一步是注冊事件。請求還沒有被發送。方法已調用，請求已發送到服務器。到此，請求準備完全完成。上一篇單獨寫的是ajax跨域，這一篇就來詳細說一說ajax，ajax是現代web開發中必不可少的一部分內容，非常基礎也非常重要，這篇總結一下到目前為止我對ajax的理解。什么...

h9911 2019-08-30 14:00 評論0 收藏0
ajax請求相關

摘要：因為請求是異步的，我們無法獲知請求的進度和響應狀態，給我們提供了一個事件，我們可以通過監聽這個時間來關注這種變化，所以下一步是注冊事件。請求還沒有被發送。方法已調用，請求已發送到服務器。到此，請求準備完全完成。上一篇單獨寫的是ajax跨域，這一篇就來詳細說一說ajax，ajax是現代web開發中必不可少的一部分內容，非常基礎也非常重要，這篇總結一下到目前為止我對ajax的理解。什么...

SolomonXie 2019-08-26 11:48 評論0 收藏0
再也不學AJAX了！（一）AJAX概述

摘要：需要注意的是，并不是的替代品，兩者各自有其適應的場景。但為了方便交流，我們通常將獲取資源的一方稱為客戶端主要的工具是瀏覽器，而將派發資源的一方稱為服務端又稱為服務器。它可以幫助我們為之后概念細節的學習打下良好基礎。再也不學AJAX了是一個與AJAX主題相關的文章系列，包含以下三個部分的內容： AJAX概述：主要回答AJAX是什么這個問題；使用AJAX：介紹如何通過JavaSc...

neu 2019-08-21 17:49 評論0 收藏0
jQuery 源碼系列（十九）ajax 的相關操作

摘要：歡迎來我的專欄查看系列文章。主要來看函數函數返回值有兩個，其中就是發送函數了，一步一步，發送下來，無需多說明。參考源碼分析系列整體結構源碼分析系列總結觸碰異步詳解本文在上的源碼地址，歡迎來。歡迎來我的專欄查看系列文章。關于 ajax，東西太多了，我本來想避開 ajax，避而不提，但覺得 ajax 這么多內容，不說又少點什么，就簡單點來介紹吧，加上最近準備內推面試的時候，看了不少 a...

Dean 2019-08-21 11:32 評論0 收藏0
在單頁應用中，如何優雅的上報前端性能數據

摘要：本文的介紹的是如何設計一個通用的可以以較小的侵入性，自動上報前端的性能數據。具體的做法可以看我的上一篇文章在單頁應用中，如何優雅的監聽的變化。三如何上報性能數據那么如何上報性能數據呢，我們第一反應就是通過請求的形式來上報前端性能數據。 ??最近在做一個較為通用的前端性能監控平臺，區別于前端異常監控，前端的性能監控主要需要上報和展示的是前端的性能數據，包括首頁渲染時間、每個頁面的白屏時...

KitorinZero 2019-08-30 15:55 評論0 收藏0