XMLHttpRequest(XHR)

在2000年代中期,瀏覽器中引入XMLHttpRequest(XHR)是Web平台的巨大勝利。讓我們看看它是如何工作的。

介紹

在2000年代中期,瀏覽器中引入XMLHttpRequest(XHR)是Web平台的巨大勝利。讓我們看看它是如何工作的。

從現在開始,現在看起來很正常的事情看起來就像來自未來。例如,我說的是GMail或Google Maps,它們都很大程度上基於XHR。

XHR於90年代在Microsoft發明,並成為事實上的標準,因為所有瀏覽器均在2002-2006年間實施了XHR。 W3C在2006年對XMLHttpRequest進行了標準化。

由於它有時可能在Web平台中發生,因此最初存在一些不一致之處,使得使用XHR的跨瀏覽器大為不同。

像jQuery這樣的庫通過為開發人員提供易於使用的抽象而得到了廣泛的普及,這反過來又幫助推廣了該技術的使用。

XHR請求示例

以下代碼創建一個XMLHttpRequest(XHR)請求對象,並附加一個在onreadystatechange事件。

xhr連接被設置為執行GET請求以https://yoursite.com,並且從send()方法:

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方法-(getpostheadputdeleteoptions)。

其他參數可讓您指定一個標誌(如果設置為false則使請求同步),以及一組用於HTTP身份驗證的憑據:

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

onreadystatechange

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

這些州是

  • 1(已打開):請求開始
  • 2(HEADERS_RECEIVED):已收到HTTP標頭
  • 3(正在加載):響應開始下載
  • 4(完成):響應已下載

中止XHR請求

可以通過調用XHR請求來中止該請求abort()上的方法xhr目的。

與jQuery的比較

使用jQuery,這些行可以轉換為:

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

與提取的比較

隨著提取API這是等效的代碼:

fetch('https://yoursite.com')
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.error(err)
  })

跨域請求

請注意,出於安全原因,XMLHttpRequest連接受特定限制的約束。

最明顯的例子之一是執行相同來源策略。

您無法訪問其他服務器上的資源,除非服務器使用以下命令明確支持此操作CORS(跨源資源共享)

使用XHR上載文件

查看我的教程如何使用XHR上傳文件

免費下載我的JavaScript初學者手冊


更多瀏覽器教程: