网络基本概念之AJAX

历史

浏览器本身就具备网络通信的能力，但在早期，浏览器并没有把这个能力开放给 JS。

最早是微软在 IE 浏览器中把这一能力向 JS 开放，让 JS 可以在代码中实现发送请求，这项技术在 2005 年被正式命名为 AJAX（Asynchronous Javascript And XML）

IE 使用了一套 API 来完成请求的发送，这套 API 主要依靠一个构造函数完成。该构造函数的名称为XMLHttpRequest，简称为XHR，所以这套 API 又称之为XHR API

由于XHR API有着诸多缺陷，在 HTML5 和 ES6 发布之后，产生了一套更完善的 API 来发送请求。这套 API 主要使用的是一个叫做fetch的函数，因此这套 API 又称之为Fetch API

无论是XHR还是Fetch，它们都是实现 ajax 的技术手段，只是 API 不同。

XHR API

用法：

var xhr = new XMLHttpRequest(); //创建发送请求的对象
xhr.onreadystatechange = function () {
  //当请求状态发生改变时运行的函数
  // xhr.readyState： 一个数字，用于判断请求到了哪个阶段
  // 0: 刚刚创建好了请求对象，但还未配置请求（未调用open方法）
  // 1: open方法已被调用
  // 2: send方法已被调用
  // 3: 正在接收服务器的响应消息体
  // 4: 服务器响应的所有内容均已接收完毕
  // xhr.status： 服务器响应的状态码
  // xhr.statusText： 服务器响应的状态码文本
  // xhr.responseText： 获取服务器响应的消息体文本
  // xhr.getResponseHeader("Content-Type") 获取响应头Content-Type
};
xhr.open('请求方法', 'url地址'); //配置请求
xhr.setRequestHeader('Content-Type', 'application/json'); //设置请求头
xhr.send('请求体内容'); //构建请求体，发送到服务器，如果没有请求体，传递null

示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const obj = JSON.parse(xhr.responseText);
    console.log(obj);
  }
};
xhr.open('GET', 'https://www.baidu.com');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(null);

Fetch API

用法：

const resp = await fetch('url地址', {
  // 请求配置对象，可省略，省略则所有配置为默认值
  method: '请求方法', // 默认为GET
  headers: {
    // 请求头配置
    'Content-Type': 'application/json',
  },
  body: '请求体内容', // 请求体
}); // fetch会返回一个Promise，该Promise会在接收完响应头后变为fulfilled

resp.headers; // 获取响应头对象
resp.status; // 获取响应状态码，例如200
resp.statusText; // 获取响应状态码文本，例如OK
resp.json(); // 用json的格式解析即将到来的响应体，返回Promise，解析完成后得到一个对象
resp.text(); // 用纯文本的格式解析即将到来的响应体，返回Promise，解析完成后得到一个字符串

示例：

fetch('https://www.baidu.com')
  .then((res) => {
    return res.json();
  })
  .then((res) => {
    console.log(res);
  });

或

const res = await fetch('https://www.baidu.com');
return await res.json();