前端基础：AJAX

AJAX 全称 Asynchronous JavaScript and XML，即 异步的 JavaScript 与 XML，指的是一套综合了多项技术的浏览器端网页开发技术。

AJAX 的诞生

1998 年左右，微软的 Outlook Web Access 小组写了第一个允许客户端脚本发送 HTTP 请求（XMLHTTP）的组件。该组件原属于微软 Exchange Server，后来迅速地成为了 Internet Explorer 4.0 的一部分。

2005 年初，Google 开始在它旗下一些主要服务中使用了异步通讯，如 Google、Google Map、Gmail 等，AJAX 因此被大众所接触。一个典型应用是当您在 Google 的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

AJAX 这个词被正式提出是由 Jesse James Garrett 的 《Ajax: A New Approach to Web Applications》一文。

The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.

—— Jesse James Garrett

AJAX 的意义

AJAX 连接了用户和服务器，使用户操作与服务器响应异步化。

使用 AJAX，网页可以实现异步更新。这意味着页面可以不用刷新进行局部更新。

而在 AJAX 诞生之前，网页如果需要更新内容，必需重载整个网页。

AJAX 的原理

AJAX 不是指一种单一的技术，而是有机地利用了一系列相关的技术。

AJAX 通过 XMLHttpRequest 对象或 Fetch API 来向服务器发送异步请求，从服务器获得数据，然后用 JavaScript 来操作 DOM 而更新页面。

使用 AJAX（通过 XMLHttpRequest）

1. 创建 XMLHttpRequest 实例

   通过 new 操作符创建一个 XMLHttpRequest 实例，如下所示：

   const XHR = new XMLHttpRequest() // IE7+, Firefox, Chrome, Opera, Safari
   // const XHR = new ActiveXObject("Microsoft.XMLHTTP") // IE5, IE6
   

2. 发送请求

   使用 open() 和 send() 方法向服务器发送请求。

   XHR.open("GET", "test.txt", true)
   XHR.send()
   

   其中 open() 有三个参数：

   参数	说明	示例
   method	请求的类型	GET、POST 等
   url	文件在服务器上的位置	test.txt
   async	是否异步	true（异步）或 false（同步）

3. 接收响应

   当请求被发送到服务器时，需要准备接收来自服务器的响应，readyState 和 status 属性存有 XMLHttpRequest 的状态信息，当 readyState 改变时，就会触发 onreadystatechange 事件：

   XHR.onreadystatechange = () => {
     if (XHR.readyState == 4 && XHR.status == 200) {
       // 当 readyState 等于 4 且状态为 200 时，表示响应已就绪
     }
   }
   

   其中 readyState 代表 XMLHttpRequest 的状态：

   状态值	状态说明
   0	请求未初始化
   1	服务器连接已建立
   2	请求已接收
   3	请求处理中
   4	请求已完成，且响应已就绪

   接收来自服务器的响应，需要使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性：

   let res = XHR.responseText
   

此时，一个基础的 AJAX 请求就已完成。

Fetch API

Fetch API 提供了一个可替代 XMLHttpRequest 的 fetch() 方法，用于异步获取资源。该方法返回 Promise 对象，可以使用 then() 方法来指定回调函数。

fetch("test.txt")
  .then(res => res.json())
  .then(data => console.log(data))

同源策略和跨域

伴随 AJAX 诞生的还有 同源策略和跨域（绕过同源策略） 的概念。

有关同源策略和跨域的详细信息，请参考 前端基础：如何解决跨域问题。

---

参考资料：

• XMLHttpRequest - Web API 接口参考 | MDN