Ajax

什么是 Ajax

Ajax 是客户端和服务器端传输数据的一种技术

优点：
在 Ajax 出现之前，浏览器向服务器端请求资源，交互模式为：
客户端发出请求 -> 服务端接受请求并返回相应 HTML 文档 -> 页面刷新

当客户端需要频繁的和服务器端进行交互的时候，这种方法显然会产生不好的使用体验

而 Ajax 技术的问世，恰好解决了这个问题

使用 Ajax 可以在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中展示的数据

使用 Ajax 的条件

使用 Ajax，需要几个条件

• JavaScript：获取数据后，操作 DOM 更新数据
• 客户端：提供可以和服务器进行异步通信的 XMLHttpRequest 对象
• 服务器端：允许浏览器发起 Ajax 请求的相关设置

如何使用 Ajax

（一）准备 Ajax 请求

我们调用.open()方法准备 Ajax 请求，我们需要三个已知条件，对应.open()的三个参数

• 我们需要获取数据还是存储数据？即：GET 或者 POST
• 我们向哪里发送请求？即对应的 API 地址
• 以哪种方式等待响应？ 即 同步 还是 异步

举个例子

//创建一个 XMLHttpRequest 实例
const xhr = new XMLHttpRequest();
//准备发送请求
xhr.open("get", "example.php", false);

上述代码表示：会启动一个针对 “example.php” 的 GET 同步请求

关于 GET 请求

GET 用于获取数据，有的时候获取数据需要参数定位，这时候我们需要把查询参数放到 URL 末尾

查询参数由?开始，由&分割包含键值对的字符串

举个例子

const query = "example.php?name=cindy&age=24"

关于 POST 请求

POST 用于向服务器发送应该被保存的数据，所以使用 POST 请求是需要有一个位置存放需要被保存的数据

我们在send()方法中保存数据

注意：

• send()方法不可为空，所以当不需要发送任何数据时，需要向.send()方法传入null值

（二）设置请求头

我们用.setRequestHeader()重写默认请求头信息
举个例子：

//自定义请求头
xhr.setRequestHeader("myHeader", "MyValue");

（三）发送请求

我们用.send()方法发送请求

GET

const xhr = new XMLHttpRequest();
xhr.open("get", "example.php", false);
xhr.setRequestHeader("myHeader", "goodHeader");
xhr.send(null);

POST

const xhr = new XMLHttpRequest();
xhr.open("post", "example.php", false);
xhr.setRequestHeader("myHeader", "bestHeader");
xhr.send(some_data);

（四）处理响应

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
    if (xhr.readystate == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.php", false);
xhr.setRequestHeader("myHeader", "goodHeader");
xhr.send(null);

我们使用onreadystatechange来监听xhr.staus的状态，关于xhr.status的值有如下几个：

• 0: 未初始化，尚未调用open()方法
• 1: 启动，已经调用open()方法，但未接收到响应
• 2: 发送，已经调用send()方法，但未接收到响应
• 3: 接收, 已经接收到部分响应数据
• 4: 完成, 已经接收到全部响应数据，而且已经可以在客户端使用了

参考：
https://juejin.im/post/6844903517442801677
https://juejin.im/post/6844903518055186445