Asynchronous JavaScript And XML
通过 AJAX 可以在 浏览器中向 服务器 发送异步请求
一种 使用现有标准的 新方法，而非新语言
XML
可扩展标记语言
被设计用来传输和存储数据
和 HTML 类似，不同的是
HTML 都是预定义标签
XML 全部是自定义标签，用来表示一些数据
AJAX 工作原理
相当于在 用户 和 服务器 之间加了一个中间层（AJAX 引擎）
使得 用户操作 和 服务器响应 异步化
1. 原生 AJAX（不要通过 webstorm 启动页面，否则会发生 跨域 错误）
// 1. 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 2. 设置事件监听
xhr.onreadystatechange = function(){ // 会监听 readyState 值的变化
if (xhr.readyState === 2) {
console.log(xhr.status);
console.log(xhr.getResponseHeader(\'Content-Type\'));
}
if (xhr.readyState === 3) {
console.log(xhr.responseText);
}
if(xhr.readyState === 4 && xhr.status === 200){ // 响应成功
console.log(xhr.responseText); // 响应数据
};
};
/****
前端面试题：
readyState
0 xhr 对象创建成功，但是 xhr.open() 还未调用
1 open() 已经调用了，但是还未调用 send() （意味着还没有发送请求，还可以设置请求头信息）
2 send() 已经调用了，接收到部分响应数据（响应首行、响应头，没接到响应体）
3 接收到了响应体数据（如果响应体较小，或者纯文体，在此阶段就全部接收完了）
4 接收完全部的响应体数据（数据较大，或者音视频资源）
****/
// 3. 设置请求信息 设置请求方式、地址、参数
xhr.open("GET", "http://localhost:3000/ajax?username=jack&age=18");
// 还能设置请求头 xhr.setRequestHeader();
xhr.setRequestHeader(\'content-type\', \'application/x-www-form-urlencoded\');
/****
必须要设置 请求头 标准规范（有三种常见规范），否则不会解析请求参数
chrome 和 FireFox 第二次及以后默认走协商缓存，状态码 304，且还会向服务器发送请求
ie 第二次及以后 get 请求 默认走强制缓存，状态码 200，且不会向服务器发送请求
需求： 股票 需要实时更新信息，此时就不能从缓存里找
解决 ie 的缓存问题：
让每一次的请求不一样
只要请求不一样，就不会走缓存
xhr.open("GET", "http://localhost:3000/ajax?username=jack&age=18&date="+Date.now());
****/
// 4. 发送请求
xhr.send();
// post 发送数据 必须以 urlencode 格式，即查询字符串去掉？，即 key=value的方式，多个键值对之间以 & 连接
源码实例
node.js 服务器
index.js