Ajax --- 获取服务器端的响应

虽然这种方式已经过时了，但是依然还有很多人在用。因此，把它作为了解的知识点，当看到别人在用时，知道是什么意思就可以了。

1. 先了解 ajax 状态码

在创建ajax对象，配置ajax 对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值 就是 ajax 状态码。

状态码一共有5个：
0：请求未初始化（已经创建了ajax对象，还没有调用open（）去配置）
1：请求已经建立，但是还没有发送（已经调用了open（），但是还没有调用send（））
2：请求已经发送（已经调用了send（））
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成，可以获取并使用服务器的响应了

2. 获取 ajax 状态码

xhr.readyState  // 这个属性中存储了 ajax 状态码

如果我们在send（）方法的后面，直接输出这个属性的值，实际上是看不到效果的，所以ajax 对象为我们提供了一个事件 – onreadystatechange 事件

2.1 onreadystatechange 事件

当Ajax 状态码发生变化的时候，系统会自动触发该事件。

我们可以在 事件处理函数中，输出 xhr.readyState 的值，这样我们就可以看到这个属性值的变化了

注意： 这个事件应该写在send（）方法的前面，应该先添加这个事件，然后再发送请求。这个时候，事件已经添加成功了，就能够被触发了，也能监听当发送请求时，状态码的变化

// 当ajax 状态码发生变化时，就会触发该事件
        xhr.onreadystatechange = function() {
            // 2
            // 3
            // 4 都有可能出现
            console.log(xhr.readyState);
        }
        xhr.send()
            // ajax 请求已经发送出去了，此时ajax 状态码处于不断变化的状态

2.2 获取服务器端的响应 的 另一种方式：判断状态码后获取

获取服务器端响应的第一种方式是： 添加xhr的onload事件，给该事件添加事件处理函数

该方式示例如下，切记一定要把onreadystatechange事件写到send函数前面：

// 当ajax 状态码发生变化时，就会触发该事件
        xhr.onreadystatechange = function() {
            //  console.log(xhr.readyState);  // 该行代码仅作为调试，可以省略
            // 对ajax 状态码进行判断，如果状态码为4，就代表数据已经接收完成了
            if (xhr.readyState == 4) {
                console.log(xhr.responseText); // 获得服务器端相应的数据
            }
        }
        xhr.send()

3. 两种获取服务器端响应方式的区别

ps：推荐使用onload 事件 的方式，代码上更加简便，不需要对ajax状态码进行判断，且该事件只会被调用一次

这篇好文章是转载于：学新通技术网