XMLHttpRequest剖析

Posted lyralee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了XMLHttpRequest剖析相关的知识,希望对你有一定的参考价值。

1.什么是XMLHttpRequest?

首先XMLHttpRequest是一个构造函数,是位于Window对象上的一个构造函数。

所以要使用需要通过new命令创建一个实例。

const xhr = new XMLHttpRequest();

由于位于Window对象,所以实例化的xhr对象其实就是一个浏览器内置的对象。

它提供了对http协议的完全的访问,用于JS进行http请求和http响应。

2.兼容性

几乎所有的主流浏览器都支持,IE需要通过下面的办法兼容

 new ActiveXObject("Microsoft.XMLHTTP") 

3.发展历史

XMLHttpRequest有两个阶段,一个是Level1,一个是Leve2

level1的缺点:

  • 受同源策略(Same Origin Policy)影响, 不能发送跨域请求
  • 不能发送二进制(音频,视频,图片等)文件,只能发送文本
  • 发送和接收数据时,没有实时进度信息,只能判断是否完成

level2解决了以上缺点,并添加了新功能:

  • 只要服务器允许,可以进行跨域访问
  • 可以发送和获取二进制数据(音频,视频,图片等都是二进制文件)
  • 可以获取请求发送数据的实时进度信息
  • 新增FormData数据,可以发送表单数据(multipart/formdata)
  • 可以设置过时时间timeout

4.只读属性

1.readyState --HTTP 请求的状态.

从对象实例化为0开始到结束为4,依次递增。

状态 名称 描述
0 UNSENT 初始化。new了实例或者已经被abort()方法重置
1 OPENED 调用了open方法,但是还未调用send方法。请求还未发送。
2 HEADERS_RECEIVED web服务器接收到请求头,send发送成功。未收到响应。
3 LOADING 响应头已经接收。响应体开始接收,未完成。
4 DONE 响应接收完成。

 

 

 

 

 

 

 每次状态改变都会触发onreadystatechange事件。

 LOADING状态可能会触发多次,因为每接收一个数据包就会触发一次。

2.status--http请求响应中~的状态码

进入响应前和响应失败都是0;响应中如果未特殊指定,都为200。

var xhr = new XMLHttpRequest();
console.log(‘UNSENT‘, xhr.status);

xhr.open(‘GET‘, ‘/server‘, true);
console.log(‘OPENED‘, xhr.status);

xhr.onprogress = function () {
  console.log(‘LOADING‘, xhr.status);
};

xhr.onload = function () {
  console.log(‘DONE‘, xhr.status);
};

xhr.send(null);

/**
 * 输出如下:
 *
 * UNSENT(未发送) 0
 * OPENED(已打开) 0
 * LOADING(载入中) 200
 * DONE(完成) 200
 */

3. statusText -- http响应中~的状态名称

例如:xhr.statusText --- OK 

4. response--返回响应(XHR2)

可以和responseType一起取代原来的responseText, responseXML等;

5.可写属性

1.responseType --- 指定响应返回的数据格式(XHR2)

  • "": 默认。 返回字符串
  • "text": 返回字符串。
  • "arraybuffer": 返回ArrayBuffer类型的数据(二进制)。
  • "blob": 返回Blob数据。
  • "document": 返回XML文档。
  • "json": 返回JSON数据。
xhr.responseType = ‘json‘;

2.timeout--设置请求超时时间

默认0,表示不设置请求超时。

只能用于异步请求,同步请求不允许。

3.withCredentials--携带验证信息

默认false;

同域请求时,浏览器会自动将cookie添加到请求头中,但是跨域请求不会。

因为CORS规定,跨域时,不允许携带任何认证信息,除非withCredentials=true;

首先,为了能够跨域,服务器端需要设置

Access-Control-Allow-Origin: *// 或者具体的域名

如果请求需要认证信息,浏览器端需要设置:

xhr.withCredentials = true

服务器端需要设置

Access-Control-Allow-Origin: //具体的origin,一定不能设置成*
Access-Control-Allow-Credentials: true

6.方法

1.open(method, url [, async, username, password])方法

初始化请求参数

method: 请求方式主要有GET,POST,也可以是HEAD(请求资源的头部信息,和GET返回的头部一样)---CORS安全

url: 请求路由

async: 默认true,异步请求。为false时,同步, 已被废弃deprecated

基本都用异步请求。同步请求几乎不用,一是因为会出现阻塞,网页挂起的情况;二是不能使用timeout,不能进行跨域,也没有进度信息。

const xhr = new XMLHttpRequest();
xhr.open("POST", url, true); // 异步
xhr.send();
// readyState === 1 异步请求send立即返回

const xhr = new XMLHttpRequest();
xhr.open("POST", url, false); // 同步
xhr.send();
// readyState === 4 同步等所有的进程结束再返回

username,password: 认证权限

2. setRequestHeader(name, value)

只能在open和send之间调用。既可以设置系统默认的一些头部信息(如ContentType),也可以设置自定义的头部信息(‘X-USER’)。

一旦设置,就无法撤销。设置同样的name,也是append,而不会覆盖。

var client = new XMLHttpRequest();
client.open(‘GET‘, ‘demo.cgi‘);
client.setRequestHeader(‘X-Test‘, ‘one‘); // 自定义请求头
client.setRequestHeader(‘X-Test‘, ‘two‘);  // 自定义请求头
client.send();
// X-TEST: one, two

name: 请求头的名称。忽略大小写。

有些请求头只能由浏览器控制,用户不能操作。否则  Refused to set unsafe header "..."

`Accept-Charset`
`Accept-Encoding`
`Access-Control-Request-Headers`
`Access-Control-Request-Method`
`Connection`
`Content-Length`
`Cookie`
`Cookie2`
`Date`
`DNT`
`Expect`
`Host`
`Keep-Alive`
`Origin`
`Referer`
`TE`
`Trailer`
`Transfer-Encoding`
`Upgrade`
`Via`

用户可以操作的请求头有:

Content-Type: 设置发送的数据类型,即send(body)中请求体的类型。以下全部为POST请求

  • "multipart/formdata; boundry=something": 当传递FormData类型时,默认是该类型。

      // 示例: multipart/form-data; boundary=----WebKitFormBoundary2OgAPgMEOp8S1XFR

...
data = new FormData();
data.append(‘name‘, ‘lyra‘);
data.append(‘age‘,18);
xhr.send(data);
// 还可以从网页中获取表单的值
<form id="form">
<input type=‘text‘ name="age" value="" /><!--必须有name-->
</form>
data = new FormData(formData);
data.append(‘name‘,‘lyra‘);
xhr.send(data);
// 还可以上传文件等二进制文件
<body>
    <button onclick="loadJSONDoc()">Get JSON</button>
    <form id="form">
        <label for="image">上传图片</label>
        <input id="file" type=‘file‘ name="image" accept="image/png,image/jpeg" multiple />
    </form>
    <script>
        var xhr;
        function loadJSONDoc() {
            xhr = null;
            if (window.XMLHttpRequest) {// code for Firefox, Chrome, etc.
                xhr = new XMLHttpRequest();
                console.log(xhr.readyState); // 0
            } else if (window.ActiveXObject) {// code for IE
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.onreadystatechange = function() {
                // 0,1,2,3,4
                console.log(xhr.readyState)
            }
            if (xhr != null) {
                let data = null;
                const fileDOM = document.querySelector(‘input‘);
                const formData = new FormData();
                const files = fileDOM.files; // 元素的files属性获取文件列表
                for(let file of files) {
                    formData.append("file", file);
                }
                data = formData;
                xhr.open("POST", ‘/postdata‘, true); // 1
                xhr.send(data);               
            }
        }
    </script>
</body>
  • "application/x-www-form-urlencoded;charset=UTF-8": 当传递URLSearchParams类型时,默认是该类型。
// 直接通过URLSearchParams对象
...
data = new URLSearchParams(‘name=5‘);
xhr.send(data);
// 还可以通过URL对象的searchParams属性
...
data = (new URL(‘http://www.dd.com?name=5‘)).searchParams;
xhr.send(data);

//PS: 当form表单设置method="POST"时,系统默认的请求头Content-Type的值是:
application/x-www-form-urlencoded
// 当method不设置,或者设为“GET”时,为url传参,传参形式是:
?name=value&name1=value1...
//没有Content-Type请求头
  • "text/html;charset=UTF-8":  当传递的数据为document类型时,默认是该类型。
data = document;
xhr.send(data);
  • "text/plain; charset=UTF-8": 当传递的数据是对象,数字,字符串,布尔值时,默认都是该类型。

    ??//单独的传"name=lyra"属于字符串,不是URLSearchParams对象。

data = {a: 1};
//data = "22";
//data = 22;
//data = true
xhr.send(data);
  • "application/json; charset=UTF-8": 浏览器不会默认该类型,需要手动添加。传参数据需要JSON.stringify()处理。
data = JSON.stringify({a: 0});
xhr.setRequestHeader(‘Content-Type‘,‘application/json;charset=UTF-8‘);
xhr.send(data);

3.send([body])

发送http请求。

如果是GET方法,没有请求体body或者传null。

POST方法需要传请求体body。

4.getAllResponseHeaders()

获取除了Set-Cookie和Set-Cookie2之外的所有响应头信息。

并且每个头信息单独占一行。例如:

Cache-Control: max-age=31536000
Content-Length: 4260
Content-Type: image/png
Date: Sat, 08 Sep 2012 16:53:16 GMT

如上所示,返回的响应头信息,每一行都是以(‘ ‘)分割,并且该规则所有操作系统都一样。

name和value之间以冒号+空格隔开": " ,是一个固定的规范。

所以想要获取一个name,value是对象的形式,可以如下操作:

xhr.onreadystatechange = function() { // 只有在readyState >=3 的时候,才能获取正确的结果。
    if (xhr.readyState ===3 || xhr.readyState === 4) {
        const allHeaders = xhr.getAllResponseHeaders();
        // 注意需要清空两头的"
",否则会多出"":undefined
        const resultObj = allHeaders.trim().split("
").reduce((memo, next) => {
            let [name, value] = next.split(": ");
            if (memo[name]) { // 如果请求头重复
                memo[name] = `${memo[name]}; ${value}`;
            } else {
                memo[name] = value;
            }   
            return memo         
        }, {}) 
        console.log(resultObj);
    }
}

5.getResponseHeader(name)

获取特定名称的响应头信息,除了Set-Cookie和Set-Cookie2

xhr.getResponseHeader(‘Content-Type‘);

6.abort() 

终止请求。xhr.abort();

7. XHR相关事件

1.onreadystatechange:  

当readyState状态改变时触发;但重置时,即变为0,不触发。

2. onloadstart: 

当掉用send()方法时,触发该事件;

3. onprogress:

分为文件上传进度: xhr.upload.onprogress send()之后,readyState=2之前触发

下载进度 xhr.onprogress readyState=3触发

4.onload:

readyState = 4触发

5. onloadend:

请求结束(成功或者失败)触发

6.onabort:

调用xhr.abort()触发

7.onerror:

请求失败触发;网络问题或者请求路由有误。

8.ontimeout:

从onloadstart开始,超过设置的timeout时间触发;timeout不为0。

8.xhr的上传对象

xhr上有个upload属性,可以用来描述文件上传的状态。

它有除了onreadystatechange之外,xhr有的其他7个事件。

 

 

以上是关于XMLHttpRequest剖析的主要内容,如果未能解决你的问题,请参考以下文章

HTML5引擎Construct2技术剖析

停止代码执行,直到 XMLHttpRequest 循环完成

XMLHttpRequest 发送 JS 对象

创建 XMLHttpRequest 对象编写一个标准的函数

XMLHttpRequest 无法加载 [url] 预检响应具有无效的 HTTP 状态代码 405

XMLHttpRequest 无法加载。预检响应具有无效的 HTTP 状态代码 405