Ajax 是大多数 Web 应用程序背后的核心技术。它允许页面向 Web 服务发出进一步的请求,因此无需页面刷新往返服务器即可呈现数据。
Ajax一词不是一种技术。相反,它指的是可以从客户端脚本加载服务器数据的技术。多年来已经引入了几种选择。仍然有两种主要方法,大多数 JavaScript 框架将使用一种或两种方法。
XMLHttpRequest
XMLHttpRequest1999 年首次作为非标准 Internet Explorer 5.0 ActiveX 组件出现。微软开发它是为了支持他们基于浏览器的 Outlook 版本。XML 是当时最流行(或被炒作)的数据格式,但XMLHttpRequest支持文本和尚未发明的 JSON。
XMLHttpRequest受到所有主流浏览器的支持,并于 2006 年成为官方 Web 标准。
const xhr = new XMLHttpRequest(); |
在请求的整个生命周期中,onreadystatechange回调函数会运行数次。XMLHttpRequest对象的readyState属性返回当前状态。
- 0 (uninitialized) - 请求未被初始化
- 1 (加载中) - 服务器连接建立
- 2 (加载中) - 收到请求
- 3 (交互式) - 处理请求
- 4 (complete) - 请求完成,响应已准备好
在达到状态4之前,函数几乎无法做什么事情。
Fetch
Fetch是一个现代的基于Promise的Ajax请求API,首次出现在2015年,并被大多数浏览器所支持。它不是建立在XMLHttpRequest的基础上,并以更简洁的语法提供更好的一致性。下面的Promise链与上面的XMLHttpRequest例子功能相同。
fetch("/service", { method: "GET" }) |
或者使用 async / await::
try { |
第一轮:Fetch获胜
除了更干净、更简洁的语法外,FetchAPI 还提供了一些优于老化的XMLHttpRequest:
- 标头、请求和响应对象
- 缓存控制
- CORS 控制
- 凭证控制
- 重定向控制
- 数据流
- 服务器端支持
第 2 轮:XMLHttpRequest获胜
XMLHttpRequest但仍有一些技巧可以超越Fetch():
- 进度支持
- 超时支持
- 中止支持
- 更明显的故障检测
- 浏览器支持