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

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. 两种获取服务器端响应方式的区别

区别描述	onload事件	onreadystatechange事件
是否需要兼容 IE 低版本	不兼容	兼容
是否需要判断Ajax 状态码	不需要	需要
被调用次数	一次	多次

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

Ajax --- 获取服务器端的响应相关推荐

Ajax获取服务器端的响应
一.Ajax 状态值在创建ajax对象,配置ajax对象,发送请求,以及接收完服务器端响应数据,这个过程中的每一个步骤都会对应一个数值,这个数值就是ajax状态值. ajax状态值说明 0 请求未 ...
前端学习（1422）：ajax获取服务器端的响应
// 引用expess框架 const express = require('express'); // 处理路径 const path = require('path');const bodyPar ...
Ajax获取服务器端响应数据的两种方式
方式一:onload xhr.onload = function (){console.log(xhr.responseText);} 方式二: Ajax状态码: 在创建ajax对象,配置ajax对象 ...
ajax获取服务器端数据参数详解
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
AJAX学习笔记（基本使用，请求参数传递，获取服务端响应，错误处理，低版本IE浏览器缓存问题及解决）
1. Ajax实现步骤创建ajax对象 let xhr = new XMLHttpRequest(); 告诉ajax请求地址及请求方式 xhr.open('get','http://www.exam ...
使用ajax从服务器端获取数据
使用ajax从服务器端获取数据的步骤: 代码表示: <!DOCTYPE html> <html><head><meta charset="UTF-8 ...
Ajax获取gzip,如何在javascript中解压缩gzip xhr响应
我有一个来自Web请求的gzipped响应,我需要在JavaScript中解压缩(实际上,在AJAX调用的成功函数中 - 我的代码在无头浏览器中运行,并且没有内置的gzip完整浏览器提供的处理支持). ...
js获取应用服务器时间,JavaScript获取服务器端时间的方法
用js做时间校正,获取本机时间,是存在bug的. 使用js也可获取到服务器时间,原理是使用 ajax请求,返回的头部信息就含有服务器端的时间信息,获取到就可以了.以下: 1.依赖jQuery 代码: ...
ajax对日期处理,AJAX获取服务器当前时间及时间格式输出处理
AJAX获取服务器当前时间 ------------------------------ WebService1.asmx---------------------------------- // 若 ...

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

1. 先了解 ajax 状态码

2. 获取 ajax 状态码

2.1 onreadystatechange 事件

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

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

Ajax --- 获取服务器端的响应相关推荐

最新文章

热门文章

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

1. 先了解 ajax 状态码

2. 获取 ajax 状态码

2.1 onreadystatechange 事件

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

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

Ajax --- 获取服务器端的响应相关推荐

最新文章

热门文章

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