Ajax是什么？
Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的简写。
Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据
XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式
XML 现在已经不怎么用了，现在比较常用的是 JSON
Ajax 其实就是浏览器与服务器之间的一种异步通信方式
使用 Ajax 可以在不重新加载整个页面的情况下，对页面的某部分进行更新
搭建 Ajax 开发环境
Ajax 需要服务器环境，非服务器环境下，很多浏览器无法正常使用 Ajax
可以用以下环境运行
- Live Server
- windows phpStudy
- Mac MAMP
Ajax 的基本用法
1.XMLHttpRequest
Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，它是一个构造函数不论是 XMLHttpRequest，还是 Ajax，都没有和具体的某种数据格式绑定
2.Ajax 的使用步骤
2.1.创建 xhr 对象
const xhr = new XMLHttpRequest();
2.2.监听事件，处理响应
当获取到响应后，会触发 xhr 对象的 readystatechange 事件，可以在该事件中对响应进行处理
// xhr.addEventListener('readystatechange', () => {}, fasle);
// xhr.onreadystatechange = () => {
// if (xhr.readyState !== 4) return;
// // HTTP CODE
// // 获取到响应后，响应的内容会自动填充 xhr 对象的属性
// // xhr.status：HTTP 200 404
// // xhr.statusText：HTTP 状态说明 OK Not Found
// if ((xhr.status >= 200) & (xhr.status < 300) || xhr.status === 304) {
// // console.log('正常使用响应数据');
// console.log(xhr.responseText);
// }
// };
// readystatechange 事件也可以配合 addEventListener 使用，不过要注意，IE6~8 不支持 addEventListener
// 为了兼容性，readystatechange 中不使用 this，而是直接使用 xhr
// 由于兼容性的原因，最好放在 open 之前
// readystatechange 事件监听 readyState 这个状态的变化
// 它的值从 0 ~ 4，一共 5 个状态
// 0：未初始化。尚未调用 open()
// 1：启动。已经调用 open()，但尚未调用 send()
// 2：发送。已经调用 send()，但尚未接收到响应
// 3：接收。已经接收到部分响应数据
// 4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了2.3.准备发送请求
// xhr.open( // 'HTTP 方法 GET、POST、PUT、DELETE', // '地址 URL https://www.imooc.com/api/http/search/suggest?words=js ./index.html ./index.xml ./index.txt', // true // );
调用 open 并不会真正发送请求，而只是做好发送请求前的准备工作
2.4.发送请求
调用 send() 正式发送请求
send() 的参数是通过请求体携带的数据
xhr.send(null);
3.使用 Ajax 完成前后端通信
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Ajax 的基本用法</title>
</head>
<body>
<script>
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.responseText);
console.log(typeof xhr.responseText);
}
};
xhr.open('GET', url, true);
xhr.send(null);
</script>
</body>
</html>
