ajax之XMLHttpRequest常用方法属性

Posted 2021-04-15 前端之旅

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax之XMLHttpRequest常用方法属性相关的知识，希望对你有一定的参考价值。

前端工作经常和ajax打交道，说到ajax 就不可避免的说到XMLHttpRequest。ajax和XMLHttpRequest是什么关系呢，ajax的全称是Asynchronous javascript and XML 是一种利用js和xml实现异步数据发送的技术方案。

XMLHttpRequest是浏览器的一个内置对像，使用这个对象可以发送和接收http请求。所以简单的说 ajax 利用XMLHttpRequest实现了异步请求（主要是异步请求，也能发送同步请求）。

先看一下利用XMLHttpRequest发送数据的基本步骤：

function sendAjax( ) {  //构造表单数据
  var data = {};  //创建xhr对象 
  var xhr = new XMLHttpRequest();  //设置xhr请求的超时时间
  xhr.timeout = 3000;  //设置响应返回的数据格式
  xhr.responseType = "text";  //创建一个 post 请求，采用异步
  xhr.open('POST', '/server', true);  //注册相关事件回调处理函数
  xhr.onload = function(e) { 
    if(this.status == 200||this.status == 304){
        alert(this.responseText);
    }
  };
  xhr.ontimeout = function(e) { ... };
  xhr.onerror = function(e) { ... };
  xhr.upload.onprogress = function(e) { ... };  
  //发送数据
  xhr.send(data);
}

上面是使用XMLHttpRequest发送请求的基本步骤。接下来介绍一下XMLHttpRequest对象的常用属性和方法。

1.setRequestHeader

发送请求之前可以设置一些头信息，签名void setRequestHeader(DOMString header, DOMString value)。

使用setRequestHeader有一些注意点：

方法的第一个参数 header 大小写不敏感，即可以写成content-type，也可以写成Content-Type，甚至写成content-Type;

Content-Type的默认值与具体发送的数据类型有关。

setRequestHeader必须在open()方法之后，send()方法之前调用，否则会抛错。

setRequestHeader可以调用多次，最终的值不会采用覆盖override的方式，而是采用追加append的方式。

2.getAllResponseHeaders和getResponseHeader

用于获取响应头部的方法。签名分别为DOMString getAllResponseHeaders(); DOMString getResponseHeader(DOMString header);

其中前者是获取 response 中的所有header 字段，后者只是获取某个指定 header 字段的值。另外，getResponseHeader(header)的header参数不区分大小写。

3.response

请求成功后我们希望返回的数据类型就是我们希望的类型，比如说放回的是一个json字符串，而我们希望是一个json对象，这时我们就需要将xhr.respons设置成json。

response的类型对照表如下：

值	`xhr.response` 数据类型
`""`	`String`字符串
`"text"`	`String`字符串
`"document"`	`Document`对象
`"json"`	`javascript` 对象
`"blob"`	`Blob`对象
`"arrayBuffer"`	`ArrayBuffer`对象

4.response数据

xhr提供了3个属性来获取返回的数据，分别是：xhr.response、xhr.responseText、xhr.responseXML

三个对象在不同的responseType类型下有不同的行为对比如下：

xhr.response

默认值：空字符串""

当请求完成时，此属性才有正确的值

请求未完成时，此属性的值可能是""或者 null，具体与 xhr.responseType有关：当responseType为""或"text"时，值为""；responseType为其他值时，值为 null

xhr.responseText

默认值为空字符串""

只有当 responseType 为"text"、""时，xhr对象上才有此属性，此时才能调用xhr.responseText，否则抛错

只有当请求成功时，才能拿到正确值。以下2种情况下值都为空字符串""：请求未完成、请求失败

xhr.responseXML

默认值为 null

只有当 responseType 为"text"、""、"document"时，xhr对象上才有此属性，此时才能调用xhr.responseXML，否则抛错

只有当请求成功且返回数据被正确解析时，才能拿到正确值。以下3种情况下值都为null：请求未完成、请求失败、请求成功但返回数据无法被正确解析时

5.readyState和onreadystatechange

readyState表示当前请求的状态，主要有5种状态，当状态变更是引起onreadystatechange事件，可以在onreadystatechange事件中根据readyState状态不同处理不同逻辑。

readyState的取值分别为

值	状态	描述
`0`	`UNSENT` (初始状态，未打开)	此时`xhr`对象被成功构造，`open()`方法还未被调用
`1`	`OPENED` (已打开，未发送)	`open()`方法已被成功调用，`send()`方法还未被调用。注意：只有`xhr`处于`OPENED`状态，才能调用`xhr.setRequestHeader()` 和`xhr.send()`,否则会报错
`2`	`HEADERS_RECEIVED`(已获取响应头)	`send()`方法已经被调用, 响应头和响应状态已经返回
`3`	`LOADING` (正在下载响应体)	响应体(`response entity body`)正在下载中，此状态下通过`xhr.response`可能已经有了响应数据
`4`	`DONE` (整个数据传输过程结束)	整个数据传输过程结束，不管本次请求是成功还是失败

6.timeout

设置超时时间，默认为0 即不设置超时。

7.相关事件

事件	触发条件
`onreadystatechange`	每当`xhr.readyState`改变时触发；但`xhr.readyState`由非`0`值变为`0`时不触发。
`onloadstart`	调用`xhr.send()`方法后立即触发，若`xhr.send()`未被调用则不会触发此事件。
`onprogress`	`xhr.upload.onprogress`在上传阶段即`xhr.send()`之后，xhr对象用upload对象表示数据的上传，`xhr.readystate=2`之前触发，每50ms触发一次；`xhr.onprogress`在下载阶段（即`xhr.readystate=3`时）触发，每50ms触发一次。
`onload`	当请求成功完成时触发，此时`xhr.readystate=4`
`onloadend`	当请求结束（包括请求成功和请求失败）时触发
`onabort`	当调用`xhr.abort()`后触发
`ontimeout`	`xhr.timeout`不等于0，由请求开始即`onloadstart`开始算起，当到达`xhr.timeout`所设置时间请求还未结束即`onloadend`，则触发此事件。
`onerror`	在请求过程中，若发生`Network error`则会触发此事件（若发生`Network error`时，上传还没有结束，则会先触发`xhr.upload.onerror`，再触发`xhr.onerror`；若发生`Network error`时，上传已经结束，则只会触发`xhr.onerror`）。注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的`xhr.statusCode`是`4xx`时，并不属于`Network error`，所以不会触发`onerror`事件，而是会触发`onload`事件。