Ajax原理

1.Ajax

Ajax就是浏览器和服务器之间的一种异步通信方式。

异步处理：异步的向服务器发送请求，在等待响应过程中，不会阻塞当前页面，浏览器可以做自己的事情，

直到成功获取响应后，浏览器才开始处理响应数据，这样就可以在不重新加载整个页面的情况下，对页面的某部分进行更新。

2.使用场景：

输入框提示（注意防抖）

用户登录和注册 （注意防抖）

获取后端数据渲染前端页面 （try...catch(e)...）

3.Ajax想要实现浏览器和服务器之间的异步通信，需要依靠XMLHttpRequest构造函数

4.Ajax使用

4.1

创建xhr对象

const xhr=new XMLHttpRequest();

4.2

准备发送请求

xhr.open('Http方法','URL',true)

调用open不会真正发生请求，而是发送前的准备

4.3

发送请求

调用send（）正式发送请求

xhr.send()

send()的参数是通过请求体携带的数据

4.4

监听事件，处理响应

当获取到响应后，会触发xhr对象的readystatechange事件，可以在该事件中处理响应

xhr.addEventListener('readystatechange', () => {}, fasle);

xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;

HTTP CODE

获取到响应后，响应的内容会自动填充 xhr 对象的属性

if ((xhr.status >= 200) & (xhr.status < 300) || xhr.status===304) { console.log('正常使用响应数据');

}

};

4.5 readystatechange 事件监听 readyState 这个状态的变化 它的值从 0 ~ 4，一共 5 个状态

0：未初始化。尚未调用 open()

1：启动。已经调用 open()，但尚未调用 send()

2：发送。已经调用 send()，但尚未接收到响应

3：接收。已经接收到部分响应数据

4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了