ajax.request onerror 后台 response,【浏览器模型】AJAX

AJAX是一种浏览器跟服务器通信的技术，采用XMLHttpRequest原生接口对服务器发出指令。

在原先的浏览器中，如果想要发出对服务器请求的指令那么只能通过form表单或者url栏，随着AJAX接口的出现，我们可以在用户浏览网页时通过某种指令就发出请求而不刷新网页，提高网页操作流畅度。

现在AJAX已经成为js脚本发送请求的代名词。要注意的是，由于历史原因，AJAX中的X原来是代表XML，现在服务器统一会发送JSON格式。

简单概括：就是AJAX通过XMLHttpRequest对象发出http请求，得到服务器的数据后再进行处理的一种技术。

具体来说，AJAX分为以下步骤：

创建实例

发送请求

监听状态

后续处理

1、可以通过XMLHttpRequest构造函数来创建实例

let request = new XMLHttpRequest

2、创建实例后，可以用open方法来构建更细节的请求

request.open(method,url,bool)

上面的代码，可以通过调整bool来控制异步同步，默认true为异步。

3、监听状态

request.onreadystatechange=()=>{}

上面代码中，我们使用onreadystatechange来监听实例的状态,当readystate发生变化时，就会执行里面的代码

4、request.send()将请求发送出去。如果是POST请求，那么就要在括号内写请求体

一旦服务器返回数据，ajax会更新对应的页面内容而无需刷新页面

但ajax只能向同源地址发出http请求，如果要访问其他非同源的地址，那么就需要跨域。否则会报错

let request = new XMLHttpRequest()

request.open('get','http://qiuyanxi.com')

request.onreadystatechange=(){

if(request.readystate ===4 && request.status===200){

console.log('成功')

}else{

console.log('失败')}

}

request.send()

复制代码

上面是一个ajax简单的例子

实例属性

XMLHttpRequest.readyState

XMLHttpRequest.readyState返回整数，表示实例对象当前状态，属性分为：

0 表示实例生成 也就是new之后

1 表示实例已经open

2 表示实例已经send

3 表示已经开始接收服务器返回数据

4 表示接收完成或已经失败

当每次状态发生改变时，就会触发onreadystatechange事件

XMLHttpRequest.onreadystatechange

这个属性指向一个函数，这个函数就是事件监听函数。

当readystate 发生变化时，就会调用这个事件监听函数

XMLHttpRequest.response

这个属性返回的是服务器的返回数据，可以是字符串，也可以是对象等，具体由resoponseType决定。

在readystate为3之前，其实这个属性里面已经有了一部分数据

XMLHttpRequest.responseType

表示服务器返回数据的类型，这个类型是可写的，在调用send()方法前，可以设置这个属性，来告诉服务器需要返回指定类型的数据

这个数据默认为text，可以设成以下属性：

""(空字符串)：等同于text，表示服务器返回文本数据。

"arraybuffer"：ArrayBuffer 对象，表示服务器返回二进制数组。

"blob"：Blob 对象，表示服务器返回二进制对象。

"document"：Document 对象，表示服务器返回一个文档对象。

"json"：JSON 对象。

"text"：字符串。

如果将这个属性设为json，浏览器就会自动对返回数据调用JSON.parse()方法

XMLHttpRequest.responseURL

XMLHttpRequest.responseURL属性是字符串，表示发送数据的服务器的网址。

这个属性跟open方法中设置的url不一定是同一个地址，这个属性返回的是实际的地址。

xhr.open('GET', 'http://example.com/test', true);

xhr.onload = function () {

// 返回 http://example.com/test

console.log(xhr.responseURL);

};

复制代码

XMLHttpRequest.status

表示服务器响应的http状态码，一般为200，请求发出之前，该属性为0

XMLHttpRequest.timeout

属性返回一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止

XMLHttpRequestEventTarget.ontimeout

这个属性是设置监听函数的接口，当发生timeout超时事件时，则执行ontimeout事件

示例：

var xhr = new XMLHttpRequest();

xhr.open('GET', '/server', true);

xhr.timeout = 2000; // 设置超时时间，单位是毫秒

xhr.onload = function () {

// 请求完成。在此进行处理。

};

xhr.ontimeout = function (e) {

// XMLHttpRequest 超时。在此做某事。

};

xhr.send(null);

复制代码

事件监听属性

XMLHttpRequest 对象可以对以下事件指定监听函数。

XMLHttpRequest.onloadstart：loadstart 事件(HTTP 请求发出)的监听函数

XMLHttpRequest.onprogress：progress事件(正在发送和加载数据)的监听函数

XMLHttpRequest.onabort：abort 事件(请求中止，比如用户调用了abort()方法)的监听函数

XMLHttpRequest.onerror：error 事件(请求失败)的监听函数

XMLHttpRequest.onload：load 事件(请求成功完成)的监听函数

XMLHttpRequest.ontimeout：timeout 事件(用户指定的时限超过了，请求还未完成)的监听函数

XMLHttpRequest.onloadend：loadend 事件(请求完成，不管成功或失败)的监听函数

例子：

let request =new XMLHttpRequest()

request.οnlοad=()=>{console.log(request.state)}

request.οnerrοr=()=>{console.log(request.responseURL)}

request.timeout = 1000

request.ontimeout=()=>{console,log('请求超时')}

复制代码

实例方法

XMLHttpRequest.open()

XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，一共可以设置五个参数

1、method HTTP请求动词，例如post、get等

2、url 发送目标的url

3、async 设置布尔值，可以控制请求是同步还是异步

4、user 用户名

5、password 密码

XMLHttpRequest.send()

用于发送请求

如果是get请求，那就代表只从url中获取，但是不带数据

如果是post请求，那就代表需要带数据，并且还要设置请求头

//get请求

let request =new XMLHttpRequest()

request.open('GET',"https://baidu.com")

request.send()

//POST请求

let request =new XMLHttpRequest()

request.open('POST',"https://baidu.com")

let data='这是一个字符串'

request.setRequestHeader('Content-Type', 'text/html')

request.send(data)

复制代码

XMLHttpRequest.setRequestHeader()

这个方法用于设置浏览器发送的http请求的头信息。

这个方法必须在send之前open之后使用，如果多次调用，则会被合并成一次

xhr.setRequestHeader('Content-Type', 'application/json');

复制代码

上面代码表示发送content-type，发送格式为json

XMLHttpRequest.getResponseHeader()

这个方法返回服务器response的头部信息

XMLHttpRequest.abort()

这个方法可以用来终止已经发送的http请求。调用后，readystate直接变成4，status变成0