AJAX

1.创建一个实例化对象

new XMLHttpRequest()

let xhr = new XMLHttpRequest()

2.设置请求信息

xhr.open(method, url);

*.设置请求头

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

3.发送请求

xhr.send(body)

get 请求不传 body 参数，只有 post 请求使用

4.接收响应

xhr.responseXML 接收 xml 格式的响应数据

xhr.responseText 接收文本格式的响应数据

xhr.onreadystatechange = function (){ if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text); }
}

IE缓存问题

在IE中，ajax的同一请求只会请求一次，重复请求会加载缓存的数据

解决方法

浏览器缓存根据url记录，动态更新url即可避免

可在请求url后面加随机数、时间戳等

xhr.open("get","/testAJAX?t="+Date.now());

属性

当 readyState 属性发生变化时

xhr.onreadystatechange

也可使用addEventListener()来监听

请求的状态码

xhr.readyState

• 0: 表示 XMLHttpRequest 实例已经生成，但是open()方法还没有被调用
• 1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息
• 2: 表示 send()方法已经执行，并且头信息和状态码已经收到
• 3: 表示正在接收服务器传来的 body 部分的数据
• 4: 表示服务器数据已经完全接收，或者本次接收已经失败了（请求完成，不一定成功）

响应体

xhr.response xhr.responseText

定义响应类型

xhr.responseType

值text、json等

响应状态

xhr.status

返回状态码 例： 200

最大请求时间（毫秒）

xhr.timeout

若超出该时间，请求会自动终止。

请求超时调用

xhr.ontimeout

也可使用addEventListener()来监听

---

方法

中止请求

xhr.abort()

获得响应头

xhr.getResponseHeader()

初始化一个请求

xhr.open()

设置 HTTP 请求头的值

必须在 open() 之后、send() 之前调用

xhr.setRequestHeader()

发送请求

xhr.send()

---

事件

当请求被停止时触发

abort

当请求遭遇错误时触发

error

请求成功完成时触发

load

在预设时间内没有接收到响应时触发

timeout