”XMLHttpRequest 的异步调用网上找的例子运行没问题，但稍微改了一点点就报错”InvalidStateError: XMLHttpRequest has an invalid context“。断断续续 搞了3天终于通了，可以接收二进制文件了。 “ 之后找到了下篇文章，发现我所使用的方法是下方中的老方法。准备再按下文所说新方法试试。

下文是2011写的了，想必所说内容到现在已是所有浏览器都支持的了吧。

以下转自： https://www.html5rocks.com/zh/tutorials/file/xhr2/。

XMLHttpRequest2 新技巧

HTML5 Rocks

目录

• 简介
• 抓取数据
• 发送数据
• 跨源资源共享 (CORS)
• 实际示例：
• 参考

By Eric Bidelman

已发布: 五月 27th, 2011 Comments: 0

简介

HTML5 世界中有这样一位无名英雄：XMLHttpRequest。严格地说，XHR2 并不属于 HTML5。不过，它是浏览器供应商对于核心平台不断做出的改进中的一部分。我之所以将 XHR2 加入我们新的百宝囊中，就是因为它在如今复杂的网络应用中扮演了不可或缺的角色。

结果呢，我们这位老朋友来了个大变身，很多人都不知道它的新功能了。2 级 XMLHttpRequest 引入了大量的新功能（例如跨源请求、上传进度事件以及对上传/下载二进制数据的支持等），一举封杀了我们网络应用中的疯狂黑客。这使得 AJAX 可以与很多尖端的 HTML5 API 结合使用，例如 File System API、Web Audio API 和 WebGL。

此教程重点介绍 XMLHttpRequest 中的新功能，尤其是可用于处理文件的功能。

抓取数据

以前通过 XHR 抓取二进制 blob 形式的文件是很痛苦的事情。从技术上来说，这甚至是不可能的实现。有一种广为流传的一种技巧，是将 MIME 类型替换为由用户定义的字符集，如下所示：

提取图片的旧方法：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
// Hack to pass bytes through unprocessed.
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.onreadystatechange = function(e) {
 if (this.readyState == 4 && this.status == 200) {
 var binStr = this.responseText;
 for (var i = 0, len = binStr.length; i < len; ++i) {
 var c = binStr.charCodeAt(i);
 //String.fromCharCode(c & 0xff);
 var byte = c & 0xff; // byte at offset i
 }
 }
};
xhr.send();

虽然这种方法可行，但是 responseText 中实际返回的并不是二进制 blob，而是代表图片文件的二进制字符串。我们要巧妙地让服务器在不作处理的情况下，将这些数据传递回去。虽然这个技巧有用，但是我不推荐大家走这种歪门邪道。只要是通过玩弄字符代码和字符串操控技巧，强行将数据转化成所需的格式，都会出现问题。

指定响应格式

在前一个示例中，我们通过替换服务器的 MIME 类型并将响应文本作为二进制字符串处理，下载了二进制“文件”形式的图片。现在，让我们利用 XMLHttpRequest 新增的 responseType 和 response 属性，告知浏览器我们希望返回什么格式的数据。

xhr.responseType

在发送请求前，根据您的数据需要，将 xhr.responseType 设置为“text”、“arraybuffer”、“blob”或“document”。请注意，设置（或忽略）xhr.responseType = '' 会默认将响应设为“text”。

xhr.response

成功发送请求后，xhr 的响应属性会包含 DOMString、ArrayBuffer、Blob 或 Document 形式（具体取决于 responseTyp 的设置）的请求数据。

凭借这个优秀的新属性，我们可以修改上一个示例：以 ArrayBuffer 而非字符串的形式抓取图片。将缓冲区移交给 BlobBuilder API 可创建 Blob：

BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
 if (this.status == 200) {
 var bb = new BlobBuilder();
 bb.append(this.response); // Note: not xhr.responseText
 var blob = bb.getBlob('image/png');
 ...
 }
};
xhr.send();

好多了！

ArrayBuffer 响应

ArrayBuffer 是二进制数据通用的固定长度容器。如果您需要原始数据的通用缓冲区，ArrayBuffer 就非常好用，但是它真正强大的功能是让您使用 JavaScript 类型数组创建底层数据的“视图”。实际上，可以通过单个 ArrayBuffer 来源创建多个视图。例如，您可以创建一个 8 位整数数组，与来自相同数据的现有 32 位整数数组共享同一个 ArrayBuffer。底层数据保持不变，我们只是创建其不同的表示方法。

例如，下面以 ArrayBuffer 的形式抓取我们相同的图片，但是现在，会通过该数据缓冲区创建无符号的 8 位整数数组。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
 var uInt8Array = new Uint8Array(this.response); // this.response == uInt8Array.buffer
 // var byte3 = uInt8Array[4]; // byte at offset 4
 ...
};
xhr.send();

Blob 响应

如果您要直接处理 Blob 且/或不需要操作任何文件的字节，可使用 xhr.responseType='blob'：

window.URL = window.URL || window.webkitURL; // Take care of vendor prefixes.
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
 if (this.status == 200) {
 var blob = this.response;
 var img = document.createElement('img');
 img.onload = function(e) {
 window.URL.revokeObjectURL(img.src); // Clean up after yourself.
 };
 img.src = window.URL.createObjectURL(blob);
 document.body.appendChild(img);
 ...
 }
};
xhr.send();

Blob 可用于很多场合，包括保存到 indexedDB、写入 HTML5 文件系统 或创建 Blob 网址（如本例中所示）。

发送数据

能够下载各种格式的数据固然是件好事，但是如果不能将这些丰富格式的数据送回本垒（服务器），那就毫无意义了。XMLHttpRequest 有时候会限制我们发送 DOMString 或 Document (XML) 数据。但是现在不会了。现已替换成经过修改的 send() 方法，可接受以下任何类型：DOMString、Document、FormData、Blob、File、ArrayBuffer。本部分的其余内容中的示例演示了如何使用各类型发送数据。

发送字符串数据：xhr.send(DOMString)

function sendText(txt) {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload = function(e) {
 if (this.status == 200) {
 console.log(this.responseText);
 }
 };
 xhr.send(txt);
}
sendText('test string');
function sendTextNew(txt) {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.responseType = 'text';
 xhr.onload = function(e) {
 if (this.status == 200) {
 console.log(this.response);
 }
 };
 xhr.send(txt);
}
sendText2('test string');

这没有新内容，只是正确的代码段略有不同。其中设置了 responseType='text' 作为对比。再次说明，省略此行会得到同样的结果。

提交表单：xhr.send(FormData)

很多人可能习惯于使用 jQuery 插件或其他库来处理 AJAX 表单提交。而我们可以改用 FormData，这是另一种针对 XHR2 设计的新数据类型。使用 FormData 能够很方便地实时以 JavaScript 创建 HTML <form>。然后可以使用 AJAX 提交该表单：

function sendForm() {
 var formData = new FormData();
 formData.append('username', 'johndoe');
 formData.append('id', 123456);
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload = function(e) { ... };
 xhr.send(formData);
}

实质上，我们只是动态创建了 <form>，并通过调用 append 方法为其附加了 <input> 值。

当然，您无需从一开始就创建 <form>。FormData 对象可通过页面上现有的 HTMLFormElement 进行初始化。例如：

<form id="myform" name="myform" action="/server">
 <input type="text" name="username" value="johndoe">
 <input type="number" name="id" value="123456">
 <input type="submit" onclick="return sendForm(this.form);">
</form>
function sendForm(form) {
 var formData = new FormData(form);
 formData.append('secret_token', '1234567890'); // Append extra data before send.
 var xhr = new XMLHttpRequest();
 xhr.open('POST', form.action, true);
 xhr.onload = function(e) { ... };
 xhr.send(formData);
 return false; // Prevent page from submitting.
}

HTML 表单可包含文件上传（例如 <input type="file">），而 FormData 也可以处理此操作。只需附加文件，浏览器就会在调用 send() 时构建 multipart/form-data 请求。

function uploadFiles(url, files) {
 var formData = new FormData();
 for (var i = 0, file; file = files[i]; ++i) {
 formData.append(file.name, file);
 }
 var xhr = new XMLHttpRequest();
 xhr.open('POST', url, true);
 xhr.onload = function(e) { ... };
 xhr.send(formData); // multipart/form-data
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
 uploadFiles('/server', this.files);
}, false);

上传文件或 blob：xhr.send(Blob)

我们也可以使用 XHR 发送 File 或 Blob。请注意，所有 File 都是 Blob，所以在此使用两者皆可。

该示例使用 BlobBuilder API 从头开始创建新的文本文件，并将该 Blob 上传到服务器。该代码还设置了一个处理程序，用于通知用户上传进度：

<progress min="0" max="100" value="0">0% complete</progress>
function upload(blobOrFile) {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload = function(e) { ... };
 // Listen to the upload progress.
 var progressBar = document.querySelector('progress');
 xhr.upload.onprogress = function(e) {
 if (e.lengthComputable) {
 progressBar.value = (e.loaded / e.total) * 100;
 progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
 }
 };
 xhr.send(blobOrFile);
}
// Take care of vendor prefixes.
BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
var bb = new BlobBuilder();
bb.append('hello world');
upload(bb.getBlob('text/plain'));

上传字节：xhr.send(ArrayBuffer)

最后也是相当重要的一点就是，我们能以 XHR 的有效负载形式发送 ArrayBuffer。

function sendArrayBuffer() {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload = function(e) { ... };
 var uInt8Array = new Uint8Array([1, 2, 3]);
 xhr.send(uInt8Array.buffer);
}

跨源资源共享 (CORS)

CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。启用此功能非常简单，只需由服务器发送一个响应标头即可。

启用 CORS 请求

假设您的应用已经在 example.com 上了，而您想要从 www.example2.com 提取数据。一般情况下，如果您尝试进行这种类型的 AJAX 调用，请求将会失败，而浏览器将会出现“源不匹配”的错误。利用 CORS，www.example2.com 只需添加一个标头，就可以允许来自 example.com 的请求：

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

可将 Access-Control-Allow-Origin 添加到某网站下或整个域中的单个资源。要允许任何域向您提交请求，请设置如下：

Access-Control-Allow-Origin: *

其实，该网站 (html5rocks.com) 已在其所有网页上均启用了 CORS。启用开发人员工具后，您就会在我们的响应中看到 Access-Control-Allow-Origin 了：

html5rocks.com 上的 Access-Control-Allow-Origin 标头

启用跨源请求是非常简单的，因此如果您的数据是公开的，请务必启用 CORS！

提交跨域请求

如果服务器端已启用了 CORS，那么提交跨域请求就和普通的 XMLHttpRequest 请求没什么区别。例如，现在 example.com 可以向 www.example2.com 提交请求了：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example2.com/hello.json');
xhr.onload = function(e) {
 var data = JSON.parse(this.response);
 ...
}
xhr.send();

实际示例：

下载文件并保存到 HTML5 文件系统

假设您有一个图片库，想要提取一些图片，然后使用 HTML5 文件系统本地保存这些图片。一种方法是以 ArrayBuffer 形式请求图片，通过数据构建 Blob，并使用 FileWriter 写入 blob：

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
function onError(e) {
 console.log('Error', e);
}
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
 window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs) {
 fs.root.getFile('image.png', {create: true}, function(fileEntry) {
 fileEntry.createWriter(function(writer) {
 writer.onwrite = function(e) { ... };
 writer.onerror = function(e) { ... };
 var bb = new BlobBuilder();
 bb.append(xhr.response);
 writer.write(bb.getBlob('image/png'));
 }, onError);
 }, onError);
 }, onError);
};
xhr.send();

请注意：要使用此代码，请参阅“探索 FileSystem API”教程中的浏览器支持和存储限制。

分割文件并上传各个部分

使用 File API，我们可以将操作简化为上传大文件。我们采用的技术是：将要上传的文件分割成多个部分，为每个部分生成一个 XHR，然后在服务器上将各部分组合成文件。这类似于 Gmail 快速上传大附件的方法。使用这种技术还可以规避 Google 应用引擎对 http 请求的 32 MB 限制。

window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder ||
 window.BlobBuilder;
function upload(blobOrFile) {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload = function(e) { ... };
 xhr.send(blobOrFile);
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
 var blob = this.files[0];
 const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
 const SIZE = blob.size;
 var start = 0;
 var end = BYTES_PER_CHUNK;
 while(start < SIZE) {
 // Note: blob.slice has changed semantics and been prefixed. See http://goo.gl/U9mE5.
 if ('mozSlice' in blob) {
 var chunk = blob.mozSlice(start, end);
 } else {
 var chunk = blob.webkitSlice(start, end);
 }
 upload(chunk);
 start = end;
 end = start + BYTES_PER_CHUNK;
 }
}, false);
})();

用于在服务器上重组文件的代码并未在此显示。

赶快试试吧！

于新手学习html5的同学来说，想要学好html5首先要有一点学习的方法和路线图，了解清楚之后再开始学习会更加清晰自己的学习效果。

随着互联网的高速发展，近年来HTMl5发展的越来越火热，而在HTML5高薪资、优待遇的诱惑之下，现在学习学习HTML5人也是日益渐增的，但是学习HTML5除了要抛下足够的汗水之外，我们还需要有一个正确的学习技巧通常合理的学习方法能够达到事半功倍的效果，相反不合理的学习方法则只能够事倍功半。

html5可以将web打造成创建真正应用程序的一流环境，html5提供了对浏览器API的一系列关键扩展，以此加强了Java现有的工具集，随着全球html5设备的使用量不断提升，html5开发人才需求量也与日剧增，可以看出html5开发的发展前景十分广阔，接下来就简单了解一些html5学习方法指南中的三要素和技能清单的相关内容吧。

html5学习方法之三要素：

Web 前端开收技术包括三个要素：HTML、CSS和Java，但随着RIA的流行和普及，Flash/Flex、Silverlight、XML 和服务器端语言也是前端开收工程师应该掌握的。Web前端开收工程师既要与上游的交互设计师、视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，需要掌握的技能非常多。这就从常识的广度上对Web前端开收工程师提出了要供。如果要精通前端开发，起码要精通十行，但现实生活中这样的全才是很少的，所以对于一些不太重要的常识，只需通便可。

Html5开发可以说前端开发的入门门槛是比较低的，与服务器端语言先缓后快的学习曲线相比，前端开收的学习曲线是先快后缓。所以，对于从事IT工作的人来说，前端是个不错的切入点。为了满足“高可保护性”的需要，需要更深入、更系统地去掌握前端常识，这样才可能创建一个好的前端架构，保证代码的质量。

html5学习方法之技能清单：

必须掌握基本的Web前端开收技术，其中包括：CSS、HTML、DOM、java、Ajax，jquery，Vue，jquery- mobile，zepto等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。这是前端工程师的核心技能，是专做页面效果的技术。如果想更深条理的做好前端开收，那就需要学习和了解更多的东西，比如一些热门的框架backbone，angularjs 等;nodejs近几年也越来越火了，同样需要学习。

对于初学者来说，想进入html5开发行业，掌握必须要学习的内容，才能够更好的去入行这一职业，才能在就业中迎刃有余，那么学习html5自身应该注重哪几点呢？

方法一：注重实践，由实践出真知

现在学多的学员在学习HTNL5的过程中有很多不喜欢自己动手实践操作，而是喜欢讲师或者自己背诵，其实这种学习方法是不对的，因为学习代码是需要我们自己动手实践的只有实践的多了我们才会更加的熟悉，他是一个需要循循渐进的过程。所以掌握代码不仅仅只有记忆还有尝试。尝试自己去写代码，然后发现问题，最后进行归纳总结，同时形成理论并记忆。

方法二：由整体到局部，由骨架到血肉

我们在学习HTML和css的时候，会经常涉及到网页的搭建等相关知识，而我们在学习这方面知识的时候我们采取的方法是，“由外及内”、“由整体到部分”、“由全局到细节”的学习方法。所以我们在学习新的知识的时候一定要主干到枝叶，不要拘泥于某一个细节而沉溺于其中。主干如同我们学习的一个大纲，这种先找主干后添枝叶的学习方法能够让知识遗漏变成最少，也会比较容易建立起知识与知识间的关系。

方法三：记忆很重要

在方法一种我们讲到注重实践，但是这并不是代表就让我们忽略了记忆，记忆也是非常重要的，我们在学习中经常会遇到个汇总各样的问题这时就是需要记忆的知识点。如有哪些数据类型、有哪些标签元素等等。遇到这类知识点时我们一定要通过记忆将其熟练掌握，因为许多人在学习的过程中觉得还是理解是最重要的，这种想法是错误的。因为如果连记都记不住还谈什么理解呢?

方法四：类比

在学习CSS引入方式这种知识点时，我们采用了另一种学习方法。类比，或者也可以叫做辨析。而这种学习的方法主要是针对于我们区分相似的两种或多种事物。如strong与em，块元素与行元素，同步与异步等等此类知识具有相似性的知识，所以我们在学习的时候应多多思考，抓取几种事物的不同点，结合去记忆。

方法五：循序渐进的学习

学习是一个日积月累的过程，谁也不能一下子就能学习很多的东西，正如我们在学习的过程中通常会遇到一些大型的知识，这种知识是比较难啃的。当然我们遇到此类型的知识的时候，千万不要着急，要脚踏实地一步一步的来，例如动画框架的学习就是一个典型的例子。

学习并不是一蹴而就的，在学习过程中有一个良好的学习方法这是至关重要的。掌握一套自己的学习方法，日后必定受益终生的。