1.XMLHttpRequest
Ajax 想要实现浏览器与服务器之间的异步通信,需要依靠 XMLHttpRequest,它是一个构造函数
不论是 XMLHttpRequest,还是 Ajax,都没有和具体的某种数据格式绑定
2.Ajax 的使用步骤
2.1.创建 xhr 对象
const xhr = new XMLHttpRequest();
2.4.(先看2.2、2.3)监听事件,处理响应
当获取到响应后,会触发 xhr 对象的 readystatechange 事件,可以在该事件中对响应进行处理
readystatechange 事件监听 readyState 这个状态的变化
它的值从 0 ~ 4,一共 5 个状态
0:未初始化。尚未调用 open()
1:启动。已经调用 open(),但尚未调用 send()
2:发送。已经调用 send(),但尚未接收到响应
3:接收。已经接收到部分响应数据
4:完成。已经接收到全部响应数据,而且已经可以在浏览器中使用了
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return; //判断是否已经接收全部响应数据
// HTTP CODE
// 获取到响应后,响应的内容会自动填充 xhr 对象的属性
// xhr.status:HTTP状态码
// xhr.statusText:HTTP 状态说明(无实际意义)
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
// 正常使用响应数据
console.log(xhr.responseText);//responseText响应数据
}
};
readystatechange 事件也可以配合 addEventListener 使用,不过要注意,IE6~8 不支持 addEventListener
为了兼容性,readystatechange 中不使用 this,而是直接使用 xhr
由于兼容性的原因,2.4 事件监听最好放在 2.2 open 之前
2.2.准备发送请求
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);
第三个参数代表是否异步,一般只用true异步
调用 open 并不会真正发送请求,而只是做好发送请求前的准备工作
2.3.发送请求
调用 send() 正式发送请求,send() 的参数是通过请求体携带的数据
xhr.send(null); //使用get方法时参数为null或者不填
3.使用 Ajax 完成前后端通信
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); //此处获取到的响应数据是JSON格式的,需要对它进行解析(JSON.parse())等操作才可以在JS中使用
console.log(typeof xhr.responseText);
}
};
xhr.open('GET', url, true);
xhr.send(null);