XHR简介[通俗易懂]

XHR简介[通俗易懂]在XHR诞生前,网页要获取客户端和服务器的任何状态更新,都需要刷新一次,在XHR诞生后就可以完全通过JS代码异步实现这一过程。XHR的诞生也使最初的网页制作转换为开发交互应用,拉开了WEB2.0的序幕。XHR是一种浏览器API,极大简化了异步通信的过程,开发者并不需要关注底层的实现,因为浏览器会为我们完成这些工作,如连接管理、协议协商、HTTP请求格式化等等。最初版本的XHR能力非常有限,只支持文本传输,处理上传能力也不足,对于跨域请求也不支持。为解决这些问题,W3C于2008年发布了“XMLHttp.

在XHR诞生前,网页要获取客户端和服务器的任何状态更新,都需要刷新一次,在XHR诞生后就可以完全通过JS代码异步实现这一过程。XHR的诞生也使最初的网页制作转换为开发交互应用,拉开了WEB2.0的序幕。 

XHR是一种浏览器API,极大简化了异步通信的过程,开发者并不需要关注底层的实现,因为浏览器会为我们完成这些工作,如连接管理、协议协商、HTTP请求格式化等等。最初版本的XHR能力非常有限,只支持文本传输,处理上传能力也不足,对于跨域请求也不支持。为解决这些问题,W3C于2008年发布了“XMLHttpRequest Level2”草案,新增了如下功能:

  • 支持请求超时;
  • 支持传输二进制和文本数据;
  • 支持重写媒体类型和编码响应;
  • 支持监控每个请求的进度事件;
  • 支持有效的文件上传;
  • 支持安全的跨来源请求。

2011年,W3C将“XMLHttpRequest Level2”规范与最初的“XMLHttpRequest”规范合并,所有XHR2新增的功能也都并入了原来的XHR API中,接口不变,功能增强。

1.XHR简介

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容。XHR接口强制要求每个请求都具备严格的HTTP语义–应用提供数据和URL,浏览器格式化请求并管理每个连接的完整生命周期,所以XHR仅仅允许应用自定义一些HTTP首部,但更多的首部是不能自己设定的,如:

  • Accept-Charset, Accept-Encoding, Access-Control-*
  • Host, Upgrade, Connection, Referer, Origin
  • Cookie, Sec-, Proxy-, 及其他首部

浏览器会拒绝绝对不安全的首部重写,以保证应用不能假扮用户代理、用户或请求来源,如Origin由浏览器自动设置,Access-Control-Allow-Origin由服务器设置,如果接受该请求,不包含该字段即可,浏览器发出的请求将作废。

  • CORS请求会省略cookie和HTTP认证等用户凭据;
  • 客户端被限制只能发送“简单的跨域请求”,包括只能使用GET POSD HEAD三种方式,只能访问通过XHR发送并读取的HTTP首部。

如果想要启用cookie和HTTP认证,客户端必须在发送请求时通过XHR对象发送额外的属性(withCredentials),而服务器也需要以Access-Control-Allow-Credentials响应,表示允许应用发送隐私数据。同样,如果客户需要写入或读取自定义HTTP标头或想要使用“非简单的方法”的请求,那么它必须首先通过发出一个预备请求,以获取第三方服务器的许可,如下所示:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// Preflight request

OPTIONS /resource.js HTTP/1.1

Host: thirdparty.com

Origin: http://example.com

Access-Control-Request-Method: POST

Access-Control-Request-Headers: My-Custom-Header

...

 

// Preflight response

HTTP/1.1 200 OK

Access-Control-Allow-Origin: http://example.com

Access-Control-Allow-Methods: GET, POST, PUT

Access-Control-Allow-Headers: My-Custom-Header

...

 

(actual HTTP request)

W3C CORS规范定义的什么时候必须使用预备请求,“简单”的请求可以跳过它,但也有各种各样场景需要使用预备请求,这就添加一次往返网络延迟。可喜的是,一旦预备请求完成,它可以由客户端缓存,以避免在后续请求进行相同的验证。 
在XHR中,可以通过responseType-设置改变响应类型,如下所示:

  • “” 字符串(默认值)
  • “arraybuffer” ArrayBuffer
  • “blob” Blob
  • “document” Document
  • “json” JavaScript 对象,解析自服务器传递回来的JSON 字符串。
  • “text” 字符串

2.数据传输

2.1.数据请求:

下面是通过XHR获取一张图片,并显示到网页上的示例:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

var xhr = new XMLHttpRequest();

 

xhr.addEventListener("progress", updateProgress, false);

xhr.addEventListener("load", transferComplete, false);

xhr.addEventListener("error", transferFailed, false);

xhr.addEventListener("abort", transferCanceled, false);

 

xhr.open('GET''/images/photo.webp');

xhr.responseType = 'blob';

xhr.onload = function() {

  if (this.status == 200) {

    var img = document.createElement('img');

    img.src = window.URL.createObjectURL(this.response);

    img.onload = function() {

        window.URL.revokeObjectURL(this.src);

    }

    document.body.appendChild(img);

  }

};

 

xhr.send();

2.2.数据上传

上传相关事件在 XMLHttpRequest.upload 对象上被触发,像下面这样,向服务器发送一个formdata格式数据:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

var formData = new FormData();

formData.append('id', 123456);

formData.append('topic''performance');

 

var xhr = new XMLHttpRequest();

 

xhr.upload.addEventListener("progress", updateProgress);

xhr.upload.addEventListener("load", transferComplete);

xhr.upload.addEventListener("error", transferFailed);

xhr.upload.addEventListener("abort", transferCanceled);

 

xhr.open('POST''/upload');

xhr.onload = function() { ... };

xhr.send(formData);

2.3.数据分片上传:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

var blob = ...;

 

const BYTES_PER_CHUNK = 1024 * 1024;

const SIZE = blob.size;

 

var start = 0;

var end = BYTES_PER_CHUNK;

 

while(start < SIZE) {

  var xhr = new XMLHttpRequest();

  xhr.open('POST''/upload');

  xhr.onload = function() { ... };

 

  xhr.setRequestHeader('Content-Range', start+'-'+end+'/'+SIZE);

  xhr.send(blob.slice(start, end));

 

  start = end;

  end = start + BYTES_PER_CHUNK;

}

注意:progress 事件在使用 file: 协议的情况下是无效的。

数据冰冷的,但我们要让数据温暖起来,改变我们的生活!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10858.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注