本文细致引见了 XMLHttpRequest 相干学问，触及内容：

• AJAX、XMLHTTP、XMLHttpRequest详解、XMLHttpRequest Level 1、Level 2 详解

• XHR 上传、下载数据、XHR 流式传输、XHR 定时轮询和长轮询辨别与优瑕玷、XMLHttpRequest 库 (Mock.js、Zone.js、Oboe.js、fetch.js)

• XMLHttpRequest 经常运用代码片断：

  • ArrayBuffer 对象转字符串

  • 字符串转 ArrayBuffer 对象

  • 建立 XHR 对象

  • sendAsBinary() polyfill

  • 猎取 XMLHttpRequest 相应体

  • 猎取 responseURL

  • 考证请求是不是胜利

  • 剖析查询参数为Map对象

  • XHR 下载图片

  • XHR 上传图片

  • XHR 上传进度条

• 剖析 AJAX 请求状况为 0、GET请求体式格局为何不能经由历程send() 要领发送请求体、简朴要乞降预请求、XMLHttpRequest对象渣滓接纳机制、Get与Post请求辨别、如何防备反复发送请求、AJAX 站点 SEO 优化等题目。

AJAX

AJAX 定义

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML手艺），指的是一套综合了多项手艺的浏览器端网页开辟手艺。Ajax的看法由杰西·詹姆士·贾瑞特所提出。

传统的Web应用许可用户端填写表单（form），当提交表单时就向网页效劳器发送一个请求。效劳器吸收并处置惩罚传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部份HTML码每每是雷同的。因为每次应用的沟通都须要向效劳器发送请求，应用的回应时刻依靠于效劳器的回应时刻。这致使了用户界面的回应比本机应用慢许多。

与此差别，AJAX应用可以仅向效劳器发送并取回必需的数据，并在客户端采用JavaScript处置惩罚来自效劳器的回应。因为在效劳器和浏览器之间交流的数据大批削减（约莫只要本来的5%）[泉源请求],效劳器回应更快了。同时，许多的处置惩罚事情可以在发出请求的客户端机械上完成，因而Web效劳器的负荷也削减了。

相似于DHTML或LAMP，AJAX不是指一种单一的手艺，而是有机地利用了一系列相干的手艺。虽然其称号包括XML，但现实上数据花样可以由JSON替代，进一步削减数据量，构成所谓的AJAJ。而客户端与效劳器也并不须要异步。一些基于AJAX的“派生／合成”式（derivative/composite）的手艺也正在涌现，如AFLAX。 —— 维基百科

AJAX 应用

• 应用XHTML+CSS来表达信息；

• 应用JavaScript操纵DOM（Document Object Model）来运转动态结果；

• 应用XML和XSLT操纵数据

• 应用XMLHttpRequest或新的Fetch API与网页效劳器举行异步数据交流；

• 注重：AJAX与Flash、Silverlight和Java Applet等RIA手艺是有辨别的。

AJAX 兼容性

JavaScript 编程的最大题目来自差别的浏览器对种种手艺和范例的支撑。

XmlHttpRequest 对象在差别浏览器中差别的建立要领，以下是跨浏览器的通用要领：

// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
//   when XMLHttpRequest is predefined
var xmlHttp;
if (typeof XMLHttpRequest != "undefined") {
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    var aVersions = ["Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", 
        "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp"];
    for (var i = 0; i < aVersions.length; i++) {
        try {
            xmlHttp = new ActiveXObject(aVersions[i]);
            break;
        } catch (e) {}
    }
}

细致信息请参考 – Can I use XMLHttpRequest

AJAX/HTTP 库对照

1 Chrome & Firefox are listed separately because they support fetch(): caniuse.com/fetch
2 Native: Meaning you can just use it – no need to include a library.
3 Single Purpose: Meaning this library or technology is ONLY used for AJAX / HTTP communication, nothing else.

细致信息请参考 – AJAX/HTTP Library Comparison

XMLHTTP

XMLHTTP 定义

XMLHTTP 是一组API函数集，可被JavaScript、JScript、VBScript以及别的web浏览器内嵌的脚本语言挪用，经由历程HTTP在浏览器和web效劳器之间收发XML或别的数据。XMLHTTP最大的优点在于可以动态地更新网页，它无需从新从效劳器读取全部网页，也不须要装置分外的插件。该手艺被许多网站运用，以完成疾速相应的动态网页应用。比方：Google的Gmail效劳、Google Suggest动态查找界面以及Google Map地理信息效劳。

XMLHTTP是AJAX网页开辟手艺的重要组成部份。除XML之外，XMLHTTP还能用于猎取别的花样的数据，如JSON或许以至纯文本。—— 维基百科

XMLHTTP 背景学问

XMLHTTP最初是由微软公司发现的，在Internet Explorer 5.0中用作ActiveX对象，可经由历程JavaScript、VBScript或别的浏览器支撑的脚本语言接见。Mozilla的开辟人员厥后在Mozilla 1.0中完成了一个兼容的版本。今后苹果电脑公司在Safari 1.2中最先支撑XMLHTTP，而Opera从8.0版最先也宣告支撑XMLHTTP。

大多数运用了XMLHTTP的设想优越的网页，会运用简朴的JavaScript函数，将差别浏览器之间挪用XMLHTTP的差别性屏障，该函数会自动检测浏览器版本并隐蔽差别环境的差别。

在DOM 3（文档对象模子 Level 3）的读取和保留范例（Load and Save Specification）中也有相似的功用，它已成为W3C引荐的要领。住手2011年，大多数浏览器已支撑。—— 维基百科

XMLHTTP 完成

• ActiveXObject

• XMLHttpRequest

什么是 ActiveX 控件

Microsoft ActiveX 控件是由软件供应商开辟的可重用的软件组件。运用 ActiveX 控件，可以很快地在网址、台式应用递次、以及开辟东西中到场特别的功用。比方，StockTicker 控件可以用来在网页上立时地到场运动信息，动画控件可用来向网页中到场动画特征。

ActiveXObject 对象

JavaScript 中 ActiveXObject 对象是启用并返回 Automation 对象的援用。

ActiveXObject 语法

newObj = new ActiveXObject(servername.typename[, location])

参数：

• newObj

  • 必选 – ActiveXObject 分配到的变量称号

• servername

  • 必选 – 供应对象的应用递次称号

• typename

  • 必选 – 要建立的对象的范例或类

• location

  • 可选 – 要再个中建立对象的网络效劳器的称号

ActiveXObject 运用

// 在IE5.x和IE6下建立xmlHttp对象
// servername - MSXML2
// typename - XMLHTTP.3.0
var xmlHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0');
xmlHttp.open("GET", "http://localhost/books.xml", false);  
xmlHttp.send();  

细致信息可以参考 – msdn – JavaScript 对象 – ActiveXObject 对象.aspx)

XMLHttpRequest

XMLHttpRequest 是一个API, 它为客户端供应了在客户端和效劳器之间传输数据的功用。它供应了一个经由历程 URL 来猎取数据的简朴体式格局，而且不会使全部页面革新。这使得网页只更新一部份页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大批运用。

XMLHttpRequest 是一个 JavaScript 对象，它最初由微软设想,随后被 Mozilla、Apple 和 Google采用. 如今,该对象已被 W3C组织范例化. 经由历程它,你可以很轻易的取回一个URL上的资本数据. 只管名字里有XML, 但 XMLHttpRequest 可以取回一切范例的数据资本，并不局限于XML。 而且除了HTTP ,它还支撑file 和 ftp 协定。

XMLHttpRequest 语法

var req = new XMLHttpRequest();

XMLHttpRequest 运用

var xhr = new XMLHttpRequest(); // 建立xhr对象
xhr.open( method, url );
xhr.onreadystatechange = function () { ... };
xhr.setRequestHeader( ..., ... );
xhr.send( optionalEncodedData );

XMLHttpRequest 详解

组织函数

用于初始化一个 XMLHttpRequest 对象，必需在一切别的要领被挪用前挪用组织函数。运用示比方下：

var req = new XMLHttpRequest();

属性

• onreadystatechange: Function – 当 readyState 属性转变时会挪用它。

• readyState: unsigned short – 用于示意请求的五种状况：

• response: varies – 相应体的范例由 responseType 来指定，可以是 ArrayBuffer、Blob、Document、JSON，或许是字符串。假如请求未完成或失利，则该值为 null。

• response: varies – 相应体的范例由 responseType 来指定，可以是 ArrayBuffer、Blob、Document、JSON，或许是字符串。假如请求未完成或失利，则该值为 null。

• responseText: DOMString – 此请求的相应为文本，或许当请求未胜利或照样未发送时未 null (只读)

• responseType: XMLHttpRequestResponseType – 设置该值可以转变相应范例，就是通知效劳器你希冀的相应花样：

• xhr.spec 范例中定义的 XMLHttpRequestResponseType 范例以下：

  enum XMLHttpRequestResponseType {
    "",
    "arraybuffer",
    "blob",
    "document",
    "json",
    "text"
  };

• responseXML: Document – 本次请求相应式一个 Document 对象，假如是以下状况则值为 null：

  • 请求未胜利

  • 请求未发送

  • 相应没法被剖析成 XML 或 HTML

• status: unsigned short – 请求的相应状况码，如 200 (示意一个胜利的请求)。 (只读)

• statusText: DOMString – 请求的相应状况信息，包括一个状况码和音讯文本，如 “200 OK”。 (只读)

• timeout: unsigned long – 示意一个请求在被自动住手前所斲丧的毫秒数。默许值为 0，意味着没有超常常候。超时并不能应用在同步请求中，不然会抛出一个 InvalidAccessError 异常。当发作超常常，timeout 事宜将会被触发。

• upload: XMLHttpRequestUpload – 可以在 upload 上增添一个事宜监听来跟踪上传历程

• withCredentials: boolean – 表明在举行跨站 (cross-site) 的接见掌握 (Access-Control) 请求时，是不是运用认证信息 (比方cookie或受权的header)。默认为 false。注重：这不会影响同站 same-site 请求

要领

• abort() – 假如请求已被发送，则立时中断请求。

• getAllResponseHeaders() – 返回一切相应头信息(相应头名和值)，假如相应头还没有吸收，则返回 null。注重：运用该要领猎取的 response headers 与在开辟者东西 Network 面板中看到的相应头不一致

• getResponseHeader() – 返回指定相应头的值，假如相应头还没有被吸收，或该相应头不存在，则返回 null。注重：运用该要领猎取某些相应头时，浏览器会抛出异常，详细缘由以下：

  • W3C的 xhr 范例中做了限定，划定客户端没法猎取 response 中的 Set-Cookie、Set-Cookie2 这2个字段，无论是同域照样跨域请求。

  • W3C 的 cors 范例关于跨域请求也做了限定，划定关于跨域请求，客户端许可猎取的response header字段只限于 simple response header (罕见的 simple response header 以下)

    • Cache-Control

    • Content-Language

    • Content-Type

    • Expires

    • Last-Modified

    • Pragma

  和 Access-Control-Expose-Headers。

• open() – 初始化一个请求：

  • 要领署名：

    void open(
       DOMString method,
       DOMString url,
       optional boolean async,
       optional DOMString user,
       optional DOMString password
    );

  • 参数：

    • method – 请求所运用的 HTTP 要领，如 GET、POST、PUT、DELETE

    • url – 请求的 URL 地点

    • async – 一个可选的布尔值参数，默许值为 true，示意实行异步操纵。假如值为 false，则 send() 要领不会返回任何东西，直到吸收到了效劳器的返回数据

    • user – 用户名，可选参数，用于受权。默许参数为空字符串

    • password – 暗码，可选参数，用于受权。默许参数为空字符串

  • 备注：

    • 假如 method 不是有用的 HTTP 要领或 url 地点不能被胜利剖析，将会抛出 SyntaxError 异常

    • 假如请求要领(不辨别大小写)为 CONNECT、TRACE 或 TRACK 将会抛出 SecurityError 异常

• overrideMimeType() – 重写由效劳器返回的 MIME 范例。比方，可以用于强迫把相应流当作 text/xml 来剖析，纵然效劳器没有指明数据是这个范例。注重：这个要领必需在 send() 之前被挪用。

• send() – 发送请求。假如该请求是异步形式(默许)，该要领会立时返回。相反，假如请求是同步形式，则直到请求的相应完全接收今后，该要领才会返回。注重：一切相干的事宜绑定必需在挪用 send() 要领之前举行。

  • 要领署名：

    void send();
    void send(ArrayBuffer data);
    void send(Blob data);
    void send(Document data);
    void send(DOMString? data);
    void send(FormData data);

• setRequestHeader() – 设置 HTTP 请求头信息。注重：在这之前，你必需确认已挪用了 open() 要领翻开了一个 url

  • 要领署名：

    void setRequestHeader(
       DOMString header,
       DOMString value
    );

  • 参数：

    • header – 请求头称号

    • value – 请求头的值

• sendAsBinary() – 发送二进制的 send() 要领的变种。

  • 要领署名：

    void sendAsBinary(
       in DOMString body
    );

  • 参数：

    • body – 音讯体

浏览器兼容性

• Desktop

事宜

• loadstart – 当递次最先加载时，loadstart 事宜将被触发。

• progress – 进度事宜会被触发用来指导一个操纵正在举行中。

• abort – 当一个资本的加载已中断时，将触发 abort 事宜。

• error – 当一个资本加载失利时会触发error事宜。

• load – 当一个资本及其依靠资本已完成加载时，将触发load事宜。

• timeout – 当进度因为预定时刻到期而住手时，会触发timeout 事宜。

• loadend – 当一个资本加载进度住手时 (比方，在已分配“毛病”，“中断”或“加载”今后)，触发loadend事宜。

• readystatechange – readystatechange 事宜会在 document.readyState属性发作变化时触发。

XMLHttpRequest Level 1

XMLHttpRequest Level 1 运用

起首，建立一个 XMLHttpRequest 对象：

var xhr = new XMLHttpRequest();

然后，向效劳器发出一个 HTTP 请求：

xhr.open('GET', 'example.php');
xhr.send();

接着，就守候长途主机做出回应。这时刻须要监控XMLHttpRequest对象的状况变化，指定回调函数。

xhr.onreadystatechange = function(){
　　if ( xhr.readyState == 4 && xhr.status == 200 ) {
　　　　　alert( xhr.responseText );
　　} else {
　　　　　alert( xhr.statusText );
　　}
};

上面的代码包括了老版本 XMLHttpRequest 对象的重要属性：

• xhr.readyState： XMLHttpRequest对象的状况，即是4示意数据已吸收终了。

• xhr.status：效劳器返回的状况码，即是200示意一切平常。

• xhr.responseText：效劳器返回的文本数据。

• xhr.statusText：效劳器返回的状况文本。

XMLHttpRequest Level 1 瑕玷

• 只支撑文本数据的传送，没法用来读取和上传二进制文件。

• 传送和吸收数据时，没有进度信息，只能提醒有无完成。

• 遭到“同域限定”（Same Origin Policy），只能向统一域名的效劳器请求数据。

XMLHttpRequest Level 2

XMLHttpRequest Level 2 针对 XMLHttpRequest Level 1 的瑕玷，做了大幅革新。详细以下：

• 可以设置HTTP请求的超常常候。

• 可以运用FormData对象治理表单数据。

• 可以上传文件。

• 可以请求差别域名下的数据（跨域请求）。

• 可以猎取效劳器端的二进制数据。

• 可以获得数据传输的进度信息。

设置超常常候

新版本 XMLHttpRequest 对象，增添了 timeout 属性，可以设置HTTP请求的时限。

　xhr.timeout = 3000;

上面的语句，将最长守候时刻设为3000毫秒。过了这个时限，就自动住手HTTP请求。与之配套的另有一个timeout事宜，用来指定回调函数。

xhr.ontimeout = function(event){
　　console.log('请求超时');
}

FormData 对象

AJAX 操纵每每用来通报表单数据。为了轻易表单处置惩罚，HTML 5新增了一个 FormData 对象，可以用于模仿表单。

FormData 简介

组织函数 FormData()

用于建立一个新的 FormData 对象。

语法

var formData = new FormData(form)

• 参数

  • form 可选 – 一个 HTML 上的 <form> 表单元素。当运用 form 参数，建立的 FormData 对象会自动将 form 中的表单值也包括进去，文件内容会被编码

FormData 运用

起首，新建一个 FormData 对象：

var formData = new FormData();

然后，为它增添表单项：

formData.append('username', 'semlinker');
formData.append('id', 2005821040);

末了，直接传送这个FormData对象。这与提交网页表单的结果，完全一样。

xhr.send(formData);

FormData 对象也可以用来猎取网页表单的值。

var form = document.getElementById('myform'); // 猎取页面上表单对象
var formData = new FormData(form);
formData.append('username', 'semlinker'); // 增添一个表单项
xhr.open('POST', form.action);
xhr.send(formData);

上传文件

新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。

1.为了上传文件, 我们得先选中一个文件. 一个 type 为 file 的 input 输入框

<input id="input" type="file">

2.然后用 FormData 对象包裹选中的文件

var input = document.getElementById("input"),
    formData = new FormData();
formData.append("file",input.files[0]); // file称号与背景吸收的称号一致

3.设置上传地点和请求要领

var url = "http://localhost:3000/upload",
    method = "POST";

4.发送 FormData 对象

xhr.send(formData);

跨域资本共享 (CORS)

新版本的 XMLHttpRequest 对象，可以向差别域名的效劳器发出 HTTP 请求。这叫做 “跨域资本共享”（Cross-origin resource sharing，简称 CORS）。

运用”跨域资本共享”的前提，是浏览器必需支撑这个功用，而且效劳器端必需赞同这类”跨域”。假如可以满足上面的前提，则代码的写法与不跨域的请求完全一样。

xhr.open('GET', 'http://other.server/and/path/to/script');

吸收二进制数据

XMLHttpRequest Level 1 XMLHttpRequest 对象只能处置惩罚文本数据，新版则可以处置惩罚二进制数据。从效劳器取回二进制数据，较新的要领是运用新增的 responseType 属性。假如效劳器返回文本数据，这个属性的值是 “TEXT”，这是默许值。较新的浏览器还支撑其他值，也就是说，可以吸收其他花样的数据。

你可以把 responseType 设为 blob，示意效劳器传回的是二进制对象。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png');
xhr.responseType = 'blob';
xhr.send();

吸收数据的时刻，用浏览器自带的 Blob 对象即可。

一个  Blob 对象示意一个不可变的, 原始数据的相似文件对象。Blob 示意的数据不肯定是一个 JavaScript 原生花样。 File 接口基于Blob，继续 blob功用并将其扩大为支撑用户系统上的文件。

var blob = new Blob([xhr.response], {type: 'image/png'});

更多示例请参考 发送和吸收二进制数据 。

进度信息

新版本的 XMLHttpRequest 对象，传送数据的时刻，有一个 progress 事宜，用来返回进度信息。

它分红上传和下载两种状况。下载的 progress 事宜属于 XMLHttpRequest 对象，上传的 progress 事宜属于XMLHttpRequest.upload 对象。

我们先定义progress事宜的回调函数：

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;

然后，在回调函数内里，运用这个事宜的一些属性。

function updateProgress(event) {
　　if (event.lengthComputable) {
　　　　var percentComplete = event.loaded / event.total;
　　}
}

上面的代码中，event.total 是须要传输的总字节，event.loaded 是已传输的字节。假如event.lengthComputable 不为真，则 event.total 即是0。

各个浏览器 XMLHttpRequest Level 2 的兼容性 – Can I use/xhr2

XHR 下载数据

XHR 可以传输基于文本和二进制数据。现实上，浏览器可认为种种当地数据范例供应自动编码和解码，如许可以让应用递次将这些范例直接通报给XHR，以便准确编码，反之亦然，这些范例可以由浏览器自动解码：

• ArrayBuffer – 牢固长度二进制数据缓冲区

• Blob – 二进制不可变数据

• Document – HTML或XML文档

• JSON – JavaScript Object Notation

• Text – 平常文本

XHR 下载图片示例：

var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://avatars2.githubusercontent.com/u/4220799?v=3');
    xhr.responseType = 'blob'; // 1

    xhr.onload = function() {
        if (this.status == 200) {
            var img = document.createElement('img');
            img.src = window.URL.createObjectURL(this.response); // 2
            img.onload = function() {
                window.URL.revokeObjectURL(this.src); //3
            };
            document.body.appendChild(img);
        }
    };
    xhr.send();

(1) 设置相应的数据范例为 blob

(2) 基于Blob建立一个唯一的对象URL，并作为图片的源地点 (URL.createObjectURL())

(3) 图片加载胜利后开释对象的URL(URL.revokeObjectURL())

XHR 上传数据

经由历程 XHR 上传数据关于一切数据范例来讲都是简朴而有用的。现实上，唯一的辨别是当我们在XHR请求中挪用 send() 时，我们需通报差别的数据对象。其他的由浏览器处置惩罚：

var xhr = new XMLHttpRequest();
xhr.open('POST','/upload');
xhr.onload = function() { ... };
xhr.send("text string"); // 1

var formData = new FormData(); // 2
formData.append('id', 123456);
formData.append('topic', 'performance');

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function() { ... };
xhr.send(formData); // 3

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function() { ... };
var uInt8Array = new Uint8Array([1, 2, 3]); // 4
xhr.send(uInt8Array.buffer); // 5

(1) 发送平常的文本到效劳器

(2) 经由历程 FormData API 建立动态表单

(3) 发送 FormData 数据到效劳器

(4) 建立 Unit8Array 数组 (Uint8Array 数组范例示意一个8位无标记整型数组，建立时内容被初始化为0)

(5) 发送二进制数据到效劳器

XHR send() 要领署名：

void send();
void send(ArrayBuffer data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);

除此之外，XHR 还支撑大文件分块传输：

var blob = ...; // 1

const BYTES_PER_CHUNK = 1024 * 1024; // 2
const SIZE = blob.size;

var start = 0;
var end = BYTES_PER_CHUNK;

while(start < SIZE) { // 3
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.onload = function() { ... };

  xhr.setRequestHeader('Content-Range', start+'-'+end+'/'+SIZE); // 4
  xhr.send(blob.slice(start, end)); // 5

  start = end;
  end = start + BYTES_PER_CHUNK;
}

(1) 一个恣意的数据块 (二进制或文本)

(2) 将数据库大小设置为 1MB

(3) 迭代供应的数据，增量为1MB

(4) 设置上传的数据局限 (Content-Range请求头)

(5) 经由历程 XHR 上传 1MB 数据块

监听上传和下载进度

XHR 对象供应了一系列 API，用于监听进度事宜，示意请求的当前状况：

每一个 XHR 传输都以 loadstart 事宜最先，并以 loadend 事宜完毕，并在这两个事宜时期触发一个或多个附加事宜来指导传输的状况。因而，为了监控进度，应用递次可以在 XHR 对象上注册一组 JavaScript 事宜侦听器：

var xhr = new XMLHttpRequest();
xhr.open('GET','/resource');
xhr.timeout = 5000; // 1

xhr.addEventListener('load', function() { ... }); // 2
xhr.addEventListener('error', function() { ... }); // 3

var onProgressHandler = function(event) {
  if(event.lengthComputable) {
    var progress = (event.loaded / event.total) * 100; // 4
    ...
  }
}

xhr.upload.addEventListener('progress', onProgressHandler); // 5
xhr.addEventListener('progress', onProgressHandler); // 6
xhr.send();

(1) 设置请求超常常候为 5,000 ms (默许无超常常候)

(2) 注册胜利回调

(3) 注册异常回调

(4) 盘算已完成的进度

(5) 注册上传进度事宜回调

(6) 注册下载进度事宜回调

运用XHR流式传输数据

在某些状况下，应用递次能够须要或愿望逐渐处置惩罚数据流：将数据上传到效劳器，使其在客户机上可用，或许在从效劳器下载数据时，举行流式处置惩罚。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/stream');
xhr.seenBytes = 0;

xhr.onreadystatechange = function() {  // 1
  if(xhr.readyState > 2) {
    var newData = xhr.responseText.substr(xhr.seenBytes); // 2
    // process newData
    xhr.seenBytes = xhr.responseText.length; // 3
  }
};

xhr.send();

(1) 监听 onreadystatechange 事宜

(2) 从部份相应中提取新数据

(3) 更新处置惩罚的字节偏移

这个例子可以在大多数当代浏览器中运用。然则,机能并不好，而且另有大批的注重事项和题目：

• 请注重，我们正在手动跟踪所看到字节的偏移量，然后手动支解数据：responseText 正在缓冲完全的相应！关于小的传输，这能够不是一个题目，但关于更大的下载，特别是在内存受限的装备，如手机，这是一个题目。开释缓冲相应的唯一要领是完成请求并翻开一个新的请求。

• 部份相应只能从 responseText 属性中读取，这将限定为仅限文本传输。没有办法读取二进制传输的部份相应。

• 一旦读取了部份数据，我们必需辨认音讯边境：应用递次逻辑必需定义本身的数据花样，然后缓冲并剖析流以提取单个音讯。

• 浏览器在处置惩罚缓冲数据方面有所差别：一些浏览器能够会立时开释数据，而其他浏览器能够会缓冲小的相应并比及积聚到肯定大小的数据块才开释它们。

• 浏览器对差别 Content-Type 资本范例的处置惩罚体式格局差别，关于某些资本范例许可逐渐读取 – 比方，text / html 范例，而其他 Content-Type 范例只能运用 application / x-javascript。

XHR 定时轮询

从效劳器检索更新的最简朴的战略之一是让客户端举行按期搜检：客户端可以以周期性距离（轮询效劳器）启动背景XHR请求，以搜检更新。假如新数据在效劳器上可用，则在相应中返回，不然相应为空。

定时轮询的体式格局很简朴，但假如定时刻隔很短的话，也是很低效。因而设置适宜的时刻距离显得至关重要：轮询距离时刻太长，会致使更新不实时，但是距离时刻太短的话，则会致使客户端与效劳器不必要的流程和高开支。接下来我们来看一个简朴的示例：

function checkUpdates(url) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function() { ... }; // 1
  xhr.send();
}

setInterval(function() { checkUpdates('/updates') }, 60000); // 2

(1) 处置惩罚效劳端吸收的数据

(2) 设置定时轮询时刻为 60s

定时轮询会发生以下的题目：

• 每一个 XHR 请求都是一个自力的 HTTP 请求，均匀来讲，HTTP 的请求头能够会引发约莫 800 字节的开支 (不带HTTP cookie)。

每一个浏览器提议 HTTP 请求时都将照顾分外的 500 – 800 字节的元数据 (请求头)，如 user-agent、accept、Cache-Control 缓存掌握优等。更蹩脚的是，500 – 800 字节是抱负的状况，假如照顾 Cookies 信息，那末这个数值将会更大。总而言之，这些未紧缩的 HTTP 元数据会引发很大开支。

• 假如数据可以在距离时期递次抵达，那末定时轮询可以平常事情。但我们并没有任何机制保证数据的平常吸收。别的周期性轮询也将会引发效劳器上可用的音讯及其传送到客户端之间引入分外的耽误。简朴的明白是假如有轮询时期有新的可用音讯，客户端是不会立时收到此新音讯，而是要比及下一次轮询的时刻，才猎取最新数据。

• 除非细致斟酌，不然轮询一般会成为无线网络上高贵的机能反形式。频仍地轮询会大批的斲丧挪动装备的电量。

轮询开支

均匀每一个 HTTP 1.x 请求会增添约莫 800字节的要乞降相应开支 (细致信息可以检察 – Measuring and Controlling Protocol Overhead) 。别的在客户端登录后，我们还将发生一个分外的身份考证 cookie 和 音讯ID; 假定这又增添了50个字节。因而，不返回新音讯的请求将发生 850字节开支！如今假定我们有10,000个客户端，一切的轮询距离时刻都是60秒：
$$
(850 bytes 8 bits 10,000) / 60 seconds ≈ 1.13 Mbps
$$
每一个客户端在每一个请求上发送 850 字节的数据，这转换为每秒 167 个请求，效劳器上的吞吐量约莫为 1.13 Mbps！这不是一个牢固的值，另外该盘算值照样在假定效劳器没有向任何客户端通报任何新的音讯的抱负状况下盘算而得的。

XHR 长轮询

周期性轮询的应战在于有能够举行许多不必要的和空的搜检。斟酌到这一点，假如我们对轮询事情流程举行了纤细的修正，而不是在没有更新可用的状况下返回一个空的相应，我们可以坚持衔接余暇，直到更新可用吗？

（图片泉源 – https://hpbn.co/xmlhttprequest/）

经由历程坚持长衔接，直到更新可用，数据可以立时发送到客户端，一旦它在效劳器上可用。因而，长时刻轮询为音讯耽误供应了最好的状况，而且还消除了空搜检，这削减了 XHR 请求的数目和轮询的整体开支。一旦更新被通报，长的轮询请求完成，而且客户端可以发出另一个长轮询请求并守候下一个可用的音讯：

function checkUpdates(url) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function() { // 1
    ...
    checkUpdates('/updates'); // 2
  };
  xhr.send();
}

checkUpdates('/updates'); // 3

(1) 处置惩罚吸收到的数据并启动下一轮检测更新

(2) 启动下一轮检测更新

(3) 提议初次更新请求

那末长时刻轮询老是比按期轮询更好的挑选？除非音讯抵达率已知且稳定，不然长轮询将一直供应更短的音讯耽误。

另一方面，开支议论须要更纤细的看法。起首，请注重，每一个通报的音讯依然引发雷同的 HTTP 开支;每一个新音讯都是自力的 HTTP 请求。然则，假如音讯抵达率高，那末长时刻轮询会比按期轮询发出更多的XHR请求！

长轮询经由历程最小化音讯耽误来动态地顺应音讯抵达速率，这是您能够想要的或能够不须要的行动。假如对音讯耽误请求不高的话，则定时轮询多是更有用的传输体式格局 – 比方，假如音讯更新速率较高，则定时轮询供应简朴的 “音讯聚合” 机制 (即兼并肯定时刻内的音讯)，这可以削减请求数目并进步挪动装备的电池寿命。

XMLHttpRequest 库

Mock.js

Mock.js 是一款模仿数据天生器，旨在协助前端攻城师自力于后端举行开辟，协助编写单元测试。供应了以下模仿功用：

• 依据数据模板天生模仿数据

• 模仿 Ajax 请求，天生并返回模仿数据

• 基于 HTML 模板天生模仿数据

细致信息，请检察 – Mock.js 文档

Zone.js

Zone 是下一个 ECMAScript 范例的发起之一。Angular 团队完成了 JavaScript 版本的 zone.js ，它是用于阻拦和跟踪异步事情的机制。

Zone 是一个全局的对象，用来设置有关如何阻拦和跟踪异步回调的划定规矩。Zone 有以下才能：

• 阻拦异步使命调理，如 setTimeout、setInterval、XMLHttpRequest 等

• 供应了将数据附加到 zones 的要领

• 为异常处置惩罚函数供应准确的上下文

• 阻拦壅塞的要领，如 alert、confirm 要领

zone.js 内部运用 Monkey Patch 体式格局，阻拦 XMLHttpRequest.prototype 对象中的 open、send、abort 等要领。

// zone.js 源码片断
var openNative = patchMethod(window.XMLHttpRequest.prototype, 'open', function () { 
    return function (self, args) {
        self[XHR_SYNC] = args[2] == false;
        return openNative.apply(self, args);
    }; 
});

Oboe.js

Oboe.js 经由历程将 HTTP 请求-应对模子封装在一个渐进流式接口中，协助网页应用疾速应对。它将 streaming 和downloading 间的转换与SAX和DOM间JSON的剖析整合在一起。它是个异常小的库，不依靠于其他递次库。它可以在 ajax 请求完毕前就最先剖析 json 变得非常轻易，从而进步应用的应对速率。别的，它支撑 Node.js 框架，还可以读入除了 http 外的其他流。

有兴致的读者，引荐看一下官网的可交互的演示示例 – Why Oboe.js

(备注：该库就是文中 – 运用XHR流式传输数据章节的现实应用，不信往下看)

// oboe-browser.js 源码片断
function handleProgress() {            
    var textSoFar = xhr.responseText,
        newText = textSoFar.substr(numberOfCharsAlreadyGivenToCallback);
    if( newText ) {
        emitStreamData( newText );
    } 
    numberOfCharsAlreadyGivenToCallback = len(textSoFar);
}

fetch.js

fetch 函数是一个基于 Promise 的机制，用于在浏览器中以编程体式格局发送 Web 请求。该项目是完成范例 Fetch 范例的一个子集的 polyfill ，足以作为传统 Web 应用递次中 XMLHttpRequest 的替代品。

细致信息，请参考 – Github – fetch

Fetch API 兼容性，请参考 – Can I use Fetch

XMLHttpRequest 代码片断

ArrayBuffer 对象转为字符串

function ab2str(buf) {
  return String.fromCharCode.apply(null, new Uint16Array(buf));
}

代码片断泉源 – ArrayBuffer与字符串的相互转换

字符串转 ArrayBuffer对象

function str2ab(str) {
  var buf = new ArrayBuffer(str.length * 2); // 每一个字符占用2个字节
  var bufView = new Uint16Array(buf);
  for (var i = 0, strLen = str.length; i < strLen; i++) {
    bufView[i] = str.charCodeAt(i);
  }
  return buf;
}

代码片断泉源 – ArrayBuffer与字符串的相互转换

建立 XHR 对象

兼容一切浏览器

// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
//   when XMLHttpRequest is predefined
var xmlHttp;
if (typeof XMLHttpRequest != "undefined") {
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    var aVersions = ["Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", 
        "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp"];
    for (var i = 0; i < aVersions.length; i++) {
        try {
            xmlHttp = new ActiveXObject(aVersions[i]);
            break;
        } catch (e) {}
    }
}

精简版

var xmlHttp;
if (typeof XMLHttpRequest != "undefined") {
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {} 
}

sendAsBinary() polyfill

if (!XMLHttpRequest.prototype.sendAsBinary) {
  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
    }
    this.send(ui8Data);
  };
}

猎取 XMLHttpRequest 相应体

function readBody(xhr) {
    var data;
    if (!xhr.responseType || xhr.responseType === "text") {
        data = xhr.responseText;
    } else if (xhr.responseType === "document") {
        data = xhr.responseXML;
    } else {
        data = xhr.response;
    }
    return data;
}

应用示例：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        console.log(readBody(xhr));
    }
}
xhr.open('GET', 'https://www.baidu.com', true);
xhr.send(null);

猎取 responseURL

export function getResponseURL(xhr: any): string {
  if ('responseURL' in xhr) {
    return xhr.responseURL;
  }
  if (/^X-Request-URL:/m.test(xhr.getAllResponseHeaders())) {
    return xhr.getResponseHeader('X-Request-URL');
  }
  return;
}

代码片断泉源 – Github – @angular/http – http_utils.ts

考证请求是不是胜利

export const isSuccess = (status: number): boolean => (status >= 200 && status < 300);

代码片断泉源 – Github – @angular/http – http_utils.ts

剖析查询参数为Map对象

function paramParser(rawParams: string = ''): Map<string, string[]> {
  const map = new Map<string, string[]>();
  if (rawParams.length > 0) {
    const params: string[] = rawParams.split('&');
    params.forEach((param: string) => {
      const eqIdx = param.indexOf('=');
      const [key, val]: string[] =
          eqIdx == -1 ? [param, ''] : [param.slice(0, eqIdx), param.slice(eqIdx + 1)];
      const list = map.get(key) || [];
      list.push(val);
      map.set(key, list);
    });
  }
  return map;
}

代码片断泉源 – Github – @angular/http – url_search_params.ts

ts 转换为 js 的代码以下：

   function paramParser(rawParams) {
        if (rawParams === void 0) { rawParams = ''; }
        var map = new Map();
        if (rawParams.length > 0) {
            var params = rawParams.split('&');
            params.forEach(function (param) {
                var eqIdx = param.indexOf('=');
                var _a = eqIdx == -1 ? [param, ''] : 
                    [param.slice(0, eqIdx), param.slice(eqIdx + 1)], key = _a[0], 
                        val = _a[1];
                var list = map.get(key) || [];
                list.push(val);
                map.set(key, list);
            });
        }
        return map;
    }

XHR 下载图片

var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://avatars2.githubusercontent.com/u/4220799?v=3');
    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();

XHR 上传数据

发送平常文本

var xhr = new XMLHttpRequest();
xhr.open('POST','/upload');
xhr.onload = function() { ... };
xhr.send("text string"); 

发送FormData

var formData = new FormData(); 
formData.append('id', 123456);
formData.append('topic', 'performance');

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function() { ... };
xhr.send(formData); 

发送 Buffer

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

XHR 上传进度条

progress 元素

<progress id="uploadprogress" min="0" max="100" value="0">0</progress>

定义 progress 事宜的回调函数

xhr.upload.onprogress = function (event) {
　　if (event.lengthComputable) {
　　　　　　var complete = (event.loaded / event.total * 100 | 0);
　　　　　　var progress = document.getElementById('uploadprogress');
　　　　　　progress.value = progress.innerHTML = complete;
　　}
};

注重，progress事宜不是定义在xhr，而是定义在xhr.upload，因为这里须要辨别下载和上传，下载也有一个progress事宜。

我有话说

1.什么状况下 XMLHttpRequest status 会为 0？

XMLHttpRequest 返回 status 时，会实行以下步骤：

• 假如状况是 UNSENT 或 OPENED，则返回 0

• 假如毛病标志被设置，则返回 0

• 不然返回 HTTP 状况码

别的当接见当地文件资本或在 Android 4.1 stock browser 中从应用缓存中猎取文件时，XMLHttpRequest 的 status 值也会为0。

示例一：

var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","http://www.w3schools.com/XML/cd_catalog.xml", true);
xmlhttp.onreadystatechange=function() {
  if(xmlhttp.readyState == 4) console.log("status " + xmlhttp.status);
};
xmlhttp.addEventListener('error', function (error) {
   console.dir(error);
});
xmlhttp.send();

以上代码运转后，将会在掌握台输出：

status 0
ProgressEvent # error 对象

2.为何 GET 或 HEAD 请求，不能经由历程 send() 要领发送请求体？

client . send([body = null])

Initiates the request. The optional argument provides the request body. The argument is ignored if request method is GET or HEAD. —— xhr.spec

经由历程 XMLHttpRequest 范例，我们晓得当请求要领是 GET 或 HEAD 时，send() 要领的 body 参数值将会被疏忽。那末关于我们经常运用的 GET 请求，我们要如何通报参数呢？处理参数通报可以运用以下两种体式格局：

• URL 传参 – 经常运用体式格局，有大小限定约莫为 2KB

• 请求头传参 – 平常用于通报 token 等认证信息

URL 传参

var url = "bla.php";
var params = "somevariable=somevalue&anothervariable=anothervalue";
var http = new XMLHttpRequest();

http.open("GET", url+"?"+params, true);
http.onreadystatechange = function()
{
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(null); // 请求要领是GET或HEAD时，设置请求体为空

在一样平常开辟中，我们最经常运用的体式格局是通报参数对象，因而我们可以封装一个 formatParams() 来完成参数花样，详细示比方下：

formatParams() 函数：

function formatParams( params ){
  return "?" + Object
        .keys(params)
        .map(function(key){
          return key+"="+params[key]
        })
        .join("&")
}

应用示例：

var endpoint = "https://api.example.com/endpoint";
var params = {
  a: 1, 
  b: 2,
  c: 3
};
var url = endpoint + formatParams(params); // 现实应用中须要推断endpoint是不是已包括查询参数
// => "https://api.example.com/endpoint?a=1&b=2&c=3";

一些经常运用的 AJAX 库，如 jQuery、zepto 等，内部已封装了参数序列化的要领 (如：jquery.param)，我们直接挪用顶层的 API 要领即可。

(备注：以上示例泉源 – stackoverflow – How do I pass along variables with XMLHttpRequest)

请求头传参 – (身份认证)

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

xhr.setRequestHeader("x-access-token", "87a476494db6ec53d0a206589611aa3f");
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
       // handle data 
    }
};
xhr.send("foo=bar&lorem=ipsum"); 

细致的身份认证信息，请参考 – JSON Web Tokens

3.XMLHttpRequest 请求体支撑哪些花样？

send() 要领署名：

void send();

void send(ArrayBuffer data);

void send(Blob data);

void send(Document data);

void send(DOMString? data);

void send(FormData data);

POST请求示例

发送 POST 请求一般须要以下步骤：

• 运用 open() 要领翻开衔接时，设定 POST 请求要领和请求 URL地点

• 设置准确的 Content-Type 请求头

• 设置相干的事宜监听

• 设置请求体，并运用 send() 要领，发送请求

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        // handle data
    }
}
xhr.send("foo=bar&lorem=ipsum"); 
// xhr.send('string'); 
// xhr.send(new Blob()); 
// xhr.send(new Int8Array()); 
// xhr.send({ form: 'data' }); 
// xhr.send(document);

4.什么是简朴要乞降预请求 (preflight request) ？

简朴请求

一些不会触发 CORS preflight 的请求被称为 “简朴请求”，虽然 Fetch (定义 CORS的) 不运用这个术语。满足下述前提的就是 “简朴请求”：

• 只许可以下要领：

  • GET

  • HEAD

  • POST

• 除了用户代办自动设置的头部外（比方 Connection， User-Agent ，或许其他恣意的 Fetch 范例定义的 制止的头部名 ），唯一许可人工设置的头部是 Fetch 范例定义的 CORS-safelisted request-header，以下：

  • Accept

  • Accept-Language

  • Content-Language

  • Content-Type

• 许可的 Content-Type 值有：

  • application/x-www-form-urlencoded

  • multipart/form-data

  • text/plain

预请求

差别于上面议论的简朴请求，”预请求” 请求必需先发送一个 OPTIONS 要领请求给目标站点，来查明这个跨站请求关于目标站点是不是是平安的可接收的。如许做，是因为跨站请求能够会对目标站点的数据发生影响。 当请求具有以下前提，就会被当做预请求处置惩罚：

• 运用下述要领之外的请求：

  • GET

  • HEAD

  • POST

• 除了用户代办自动设置的头部外（比方 Connection， User-Agent ，或许其他恣意的 Fetch 范例定义的 “制止的头部名” ），预请求不包括 Fetch 范例定义的 “CORS-safelisted request-header“：

  • Accept

  • Accept-Language

  • Content-Language

  • Content-Type

• Content-Type 头部的值除了以下之外的:

  • application/x-www-form-urlencoded

  • multipart/form-data

  • text/plain

细致的信息，请参考 – MDN – HTTP 接见掌握 (CORS)

5.XMLHttpRequest 对象渣滓接纳机制是什么？

在以下状况下，XMLHttpRequest 对象不会被渣滓接纳：

• 假如 XMLHttpRequest 对象的状况是 OPENED 且已设置 send() 的标识符

• XMLHttpRequest 对象的状况是 HEADERS_RECEIVED (已猎取相应头)

• XMLHttpRequest 对象的状况是 LOADING (正在下载相应体)，而且监听了以下一个或多个事宜：readystatechange、progress、abort、error、load、timeout、loadend

假如 XMLHttpRequest 对象在衔接尚存翻开时被渣滓接纳机制接纳了，用户代办必需住手请求。

6.GET 和 POST 请求的辨别？

• 关于 GET 请求，浏览器会把 HTTP headers 和 data 一并发送出去，效劳器相应 200。

• 而关于 POST 请求，浏览器会先发送 HTTP headers，效劳器相应 100 continue ，浏览器再发送 data，效劳器相应 200。

细致的信息，请参考 – 99%的人都明白错了HTTP中GET与POST的辨别

7.如何防备反复发送 AJAX 请求？

• setTimeout + clearTimeout – 一连的点击会把上一次点击清撤除，也就是ajax请求会在末了一次点击后发出去

• disable 按钮

• 缓存已胜利的请求，若请求参数一致，则直接返回，不发送请求

细致的信息，请参考 – 知乎 – 如何防备反复发送 Ajax 请求

8、AJAX 站点如何做 SEO 优化

尽人皆知，大部份的搜索引擎爬虫都不会实行 JS，也就是说，假如页面内容由 Ajax 返回的话，搜索引擎是爬取不到部份内容的，也就无从做 SEO (搜索引擎优化)了。外洋的 prerender.io 网站供应了一套比较成熟的计划，然则须要付费的。接下来我们来看一下，如何 PhantomJS 为我们的站点做 SEO。

细致的信息，请参考 – 用PhantomJS来给AJAX站点做SEO优化

佳构文章

• XMLHttpRequest 2新技能

• 阮一峰 – XMLHttpRequest Level 2 运用指南

• segmentfault – 你真的会运用XMLHttpRequest吗?

• Github – Ajax 学问系统大梳理

参考资本

• XMLHttpRequest 范例

• High Performance Browser Networking – XMLHttpRequest

• msdn – ActiveXObject 对象.aspx)

• mdn – XMLHttpRequest

• XMLHttpRequest 2新技能

• 阮一峰 – XMLHttpRequest Level 2 运用指南

• segmentfault – 你真的会运用XMLHttpRequest吗?

• Github – Ajax 学问系统大梳理

• JavaScript 范例参考教程 (alpha) – 二进制数组​