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初学者手册


更多浏览器教程: