Ajax的基本原理以及大概的执行过程
Ajax的基本原理其实就是通过 XMLHttpRequest 对象 向服务器发送异步请求,获取服务器返回的数据,然后利用 DOM操作去更新页面中的数据的.
大概的执行流程如下所示
1. AJAX 的完整代码 封装
const ajax = ({ method, path, body, successFn, failFn }) => {
// 1. 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 2. 使用 open 方法设置请求的 method 和 path 发送请求
xhr.open(method, path);
// 3. 监听是否响应成功
xhr.onreadystatechange = () => {
// 4 代表响应接受完成
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
successFn.call(undefined, xhr);
} else if (xhr.status >= 400) {
failFn.call(undefined, xhr);
}
}
};
// 5. 发送请求 body 是 post 请求的请求体 get 请求不需要 body 参数 传 undefined 即可 也可以不传
xhr.send(body);
};
AJAX 的优缺点
优点如下
1. 无刷新更新数据
Ajax 最大的优点其实就是不需要刷新网页的情况下就可以和服务器通信
2.异步通信
Ajax使用的是异步的方式和服务器沟通的, 这样就大大的减少了不必要的网络传输损耗
3. 前后端分离
缺点如下
