/

XMLHttpRequest (XHR)

XMLHttpRequest (XHR)

XMLHttpRequest（XHR）的引入是Web平台的重大胜利。让我们看看它是如何工作的。

介紹

在2000年代中期，網絡瀏覽器中引入XMLHttpRequest（XHR）是Web平台的重大突破。讓我們看看它是如何工作的。

許多現在看起來很正常的東西，在當時看起來就像來自未來。例如，我談論的GMail或Google Maps在很大程度上都依賴於XHR。

XHR是在九十年代由Microsoft發明的，由於所有瀏覽器在2002年至2006年期間都實現了它，它成為事實上的標准。W3C於2006年將XMLHttpRequest標准化。

就像在Web平台上有時會發生的情況一樣，最初有一些不一致之處，這使得在不同的瀏覽器中使用XHR變得非常不同。

像jQuery這樣的庫通過提供一個易於使用的抽象層，受到開發人員的歡迎，這反過來又幫助傳播了這項技術。

一個XHR請求的例子

以下代碼創建一個XMLHttpRequest（XHR）請求對象，並附加一個在onreadystatechange事件上響應的回調函數。

xhr連接的設置為向https://yoursite.com發送GET請求，並使用send()方法開始：

1
2
3
4
5
6
7
8
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    xhr.status === 200 ? console.log(xhr.responseText) : console.error('error')
  }
}
xhr.open('GET', 'https://yoursite.com')
xhr.send()

附加的open()參數

在上面的例子中，我們只傳遞了方法和URL給請求。

我們還可以指定其他HTTP方法-（get，post，head，put，delete，options）。

其他參數讓您可以指定一個標誌，如果將其設置為false，則可以使請求同步進行，並為HTTP驗證指定一組憑據：

1
open(method, url, asynchronous, username, password)

onreadystatechange

onreadystatechange在XHR請求期間多次被調用。我們明確忽略除readyState === 4以外的所有狀態，這意味著請求已完成。

狀態有：

  • 1（OPENED）：請求開始
  • 2（HEADERS_RECEIVED）：已接收到HTTP標頭
  • 3（LOADING）：響應開始下載
  • 4（DONE）：響應已下載

中止XHR請求

可以通過在xhr對象上調用abort()方法來中止XHR請求。

與jQuery的比較

在使用jQuery時，這些代碼可以轉寫為：

1
2
3
4
5
$.get('https://yoursite.com', data => {
  console.log(data)
}).fail(err => {
  console.error(err)
})

與Fetch的比較

使用Fetch API的等價代碼如下：

1
2
3
4
5
6
7
fetch('https://yoursite.com')
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.error(err)
  })

跨網域請求

請注意，XHR連接受特定的限制，這些限制是出於安全考慮而強制執行的。

其中一個最明顯的限制是同源策略的實施。

您無法訪問另一個服務器上的資源，除非服務器明確支持使用CORS（跨源資源共享）。

使用XHR上傳文件

請查看我的教程，了解如何使用XHR上傳文件。

tags: [“XMLHttpRequest”, “XHR”, “AJAX”, “HTTP”, “Cross-origin”, “Fetch API”]