[转]XHR简介

在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: 协议的情况下是无效的。

转载自：http://www.cnblogs.com/syfwhu/p/6116323.html

时间： 2024-10-07 14:52:43

[转]XHR简介的相关文章

CORS（跨域资源共享）简介

前言:像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及,在百度或者Google上搜索CORS,搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍,让我等前端同学情何以堪(对比起来,用Google搜到的国外文章,基本都是跨域资源共享的介绍,说明了前端技术在国内外环境和发展的巨大差距). 我之前<用HTML5实现人脸识别>这篇文章中提到了"Face.com实现了CORS(跨域资源共享).CORS系统基本上可以让服务器暴露给其它域上文件的Ajax调用.这是一个伟

Content Security Policy（CSP）简介（转）

Content Security Policy(CSP)简介 传统的web安全应该主要是同源策略(same origin policy).A网站的代码不能访问B网站的数据,每个域都和其他的域相互隔离,给开发者营造了一个安全沙箱.理论上这是非常聪明的做法,但是实际执行过程中,攻击者使用了各种高招可以推翻这套保护. XSS攻击者把恶意代码注入在网站常规数据里,这样就可以绕过浏览器的同源策略.浏览器相信来自安全域的所有代码. XSS Cheat Sheet 是一个古老但是却很有代表性的攻击方式.一旦攻

react学习与简介

简介: React是Facebook开发的一款JS库 React解决了什么问题? 1).首先是以往mvc模式的缺陷,当代码库庞大时,mvc非常的复杂,每添加新的功能,项目的复杂度就几何倍的增长,导致代码的维护性很差,所以mvc不合适太大型的前端应用. 2)模型和视图间可能存在的双向数据流动 React的特点是什么? 1)简单 2)声明式 另外在react官网上面(http://facebook.github.io/react/blog/2013/06/05/why-react.html),还可以

&lt;Web&gt; XmlHttpRequest简介

前言 web开发经常用到的一个技术就是无刷新提交表单,这个一般是利用ajax实现的,而ajax是利用XmlHttpRequest实现的. XMLHttpRequest简介 什么叫无刷新:对用户来说,就是向服务器提交数据的时候,页面不会duang的闪一下(form提交的时候就是这样).对程序员来说,就是客户端不需要向服务端发送整个页面的数据,而只需要发送少量的数据,返回的数据也一样,只需要少量的动态数据就够了,而不需要重载整个页面. XmlHttpRequest是ajax的核心,所以说掌握了Xml

Promise API 简介

Promise API 简介 译者注: 到处是回调函数,代码非常臃肿难看, Promise 主要用来解决这种编程方式, 将某些代码封装于内部. Promise 直译为"承诺",但一般直接称为 Promise; 代码的可读性非常重要,因为开发人员支出一般比计算机硬件的支出要大很多倍. 虽然同步代码更容易跟踪和调试, 但异步方式却具有更好的性能与灵活性. 怎样在同一时刻发起多个请求, 然后分别处理响应结果? Promise 现已成为 JavaScript 中非常重要的一个组成部分, 很多新

Android网络通讯简介

网络通信应该包含三部分的内容:发送方.接收方.协议栈.发送方和接收方是参与通信的主体,协议栈是发送方和接收方进行通信的契约.按照服务类型,网络通信可分为面向连接和无连接的方式.面向连接是在通信前建立通信链路,而通信结束后释放该链路.无连接的方式则不需要在通信前建立通信连接,这种方式不保证传输的质量. Android提供了多种网络通信的方式,如Java中提供的网络编程,在Android中都提供了支持.Android中常用的网络编程方式如下: 针对TCP/IP协议的Socket和ServerSock

微信红包的架构设计简介

@来源于QCon某高可用架构群整理,整理朱玉华. 背景:有某个朋友在朋友圈咨询微信红包的架构,于是乎有了下面的文字(有误请提出,谢谢) 概况:2014年微信红包使用数据库硬抗整个流量,2015年使用cache抗流量. 微信的金额什么时候算? 答:微信金额是拆的时候实时算出来,不是预先分配的,采用的是纯内存计算,不需要预算空间存储.. 采取实时计算金额的考虑:预算需要占存储,实时效率很高,预算才效率低. 实时性:为什么明明抢到红包,点开后发现没有? 答:2014年的红包一点开就知道金额,分两次操作

JSON 简介

ylbtech-JSON: JSON 简介 JSON:JavaScript Object Notation(JavaScript 对象表示法) JSON是存储和交换文本信息的语法,类似 XML. JSON 比 XML 更小.更快.更易解析. JSON 实例 { "employee":[ {"firstName":"John","lastName":"Doe"}, {"firstName"

Docker简介

Docker简介 什么是Docker: 正所谓Docker的英文本意为"搬运工",所以在我们的世界里,可以理解为Docker搬运的是装满任意类型的APP的集装箱,开发者可以通过Docker将APP变成一种标准化的.可移动植的.自动管理的组件.它用一种新的方式实现了轻量级的虚拟机,专业术语成为应用容器(Application Container) Docker的优势: 1.利用率高 ·Docker对系统资源的利用率很高,一台主机可以同时运行数千个Docker容器 2.可以快速的交付应用程