js_XMLHttpRequest学习总结

XMLHttpRequest对象是AJAX的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和Http，他实际上可以使用多种协议（比如说file或ftp），发送任何格式的数据（包括字符串和二进制）。

XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。

var xhr =new XMLHttpRequest;

一旦新建实例，就可以使用open（）方法指定建立HTTP连接的一些细节。

xhr.open('GET','http://www.example.com/page.php',true);

上述代码指定使用GET方法，跟指定的服务器网址建立连接。第三个参数true，表示请求是异步的。

之后需要指定回调函数，监听通信状态（readyState属性）的变化。

xhr.onreadystatechange=handleStateChange;

function handleStateChange(){
    //  ....
}

上述代码中，一旦XMLHttpRequest实例的状态发生变化，就会调用监听函数handleStateChange

最后使用send（）方法，实际发出请求。

xhe.send(null);

上面代码中，send()的参数为

null

，表示发送请求的时候，不带有数据体。如果发送的是 POST 请求，这里就需要指定数据体。

一旦拿到服务器返回的数据，AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。

注意，AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错。

下面是XMLHttpRequest对象简单用法的完整例子。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
  // 通信成功时，状态值为4
  if (xhr.readyState === 4){
    if (xhr.status === 200){
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};

xhr.onerror = function (e) {
  console.error(xhr.statusText);
};

xhr.open('GET', '/endpoint', true);
xhr.send(null);

XMLHttpRequest的实例属性：

1.XMLHttpRequest.readyState

其返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回一下值：

• 0，XMLHttpRequest实例已经生成，但是实例的open（）方法还没有被调用。
• 1，表示open（）方法已经调用，但是实例的send（）方法还没有调用，仍然可以使用实例的setXMLHttpRequest()方法，设定HTTP请求的头信息。
• 2，表示实例的send（）方法已经调用，并且服务器返回的头信息和状态码已经收到。
• 3，表示正在接收服务器传来的数据体（body部分）。这时，如果实例的responseType属性等于text或者字符串，responseText属性就会包含已经收到的部分信息。
• 4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。

通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。

例子：

var xhr = new XMLHttpRequest();
xhr.open( 'GET', 'http://example.com' , true );
xhr.onreadystatechange = function () {
  if (xhr.readyState !== 4 || xhr.status !== 200) {
    return;
  }
  console.log(xhr.responseText);
};
xhr.send();

2.XMLHttpRequest.response

表示服务器返回的数据体（即 HTTP 回应的 body 部分）。它可能是任何数据类型，比如字符串、对象、二进制对象等等，具体的类型由XMLHttpRequest.responseType属性决定。该属性只读。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    handler(xhr.response);
  }
}

3.XMLHttpRequest.responseType

是一个字符串，表示服务器返回数据的类型。这个属性是可写的，可以在调用

open()

方法之后、调用send()方法之前，设置这个属性的值，告诉浏览器如何解读返回的数据。如果

responseType

设为空字符串，就等同于默认值

text

。

XMLHttpRequest.responseType属性可以等于以下值：

• ""（空字符串）：等同于text，表示服务器返回文本数据。
• "arraybuffer"：ArrayBuffer 对象，表示服务器返回二进制数组。
• "blob"：Blob 对象，表示服务器返回二进制对象。
• "document"：Document 对象，表示服务器返回一个文档对象。
• "json"：JSON 对象。
• "text"：字符串。

上面几种类型之中，

text

类型适合大多数情况，而且直接处理文本也比较方便。

document

类型适合返回 HTML / XML 文档的情况，这意味着，对于那些打开 CORS 的网站，可以直接用 Ajax 抓取网页，然后不用解析 HTML 字符串，直接对抓取回来的数据进行 DOM 操作。

blob

类型适合读取二进制数据，比如图片文件。

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 = new Blob([xhr.response], {type: 'image/png'});
    // 或者
    var blob = xhr.response;
  }
};

xhr.send();

如果将这个属性设为

ArrayBuffer

，就可以按照数组的方式处理二进制数据。

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);
  for (var i = 0, len = uInt8Array.length; i < len; ++i) {
    // var byte = uInt8Array[i];
  }
};

xhr.send();

4.XMLHttpRequest.responseText

返回从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据。

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

xhr.responseType = 'text';
xhr.onload = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send(null);

5.XMLHttpRequest.responseXML/JSON

返回从服务器接收到的 HTML 或 XML 文档对象，该属性为只读。如果本次请求没有成功，或者收到的数据不能被解析为 XML 或 HTML，该属性等于

null

。

该属性得到的数据，是直接解析后的文档 DOM 树。

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

xhr.responseType = 'document';
xhr.overrideMimeType('text/xml');

xhr.onload = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseXML);
  }
};

xhr.send(null);

6.XMLHttpRequest.responseURL

是字符串，表示发送数据的服务器的网址。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/test', true);
xhr.onload = function () {
  // 返回 http://example.com/test
  console.log(xhr.responseURL);
};
xhr.send(null);

**注意，这个属性的值与

open()

方法指定的请求网址不一定相同。如果服务器端发生跳转，这个属性返回最后实际返回数据的网址。另外，如果原始 URL 包括锚点（fragment），该属性会把锚点剥离。**

7.XMLHttpRequest.status，XMLHttpRequest.statusText

XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP 状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为

0

。该属性只读。

• 200, OK，访问正常
• 301, Moved Permanently，永久移动
• 302, Moved temporarily，暂时移动
• 304, Not Modified，未修改
• 307, Temporary Redirect，暂时重定向
• 401, Unauthorized，未授权
• 403, Forbidden，禁止访问
• 404, Not Found，未发现指定网址
• 500, Internal Server Error，服务器发生错误

基本上，只有2xx和304的状态码，表示服务器返回是正常状态。

XMLHttpRequest.statusText属性返回一个字符串，表示服务器发送的状态提示。不同于

status

属性，该属性包含整个状态信息，比如“OK”和“Not Found”。在请求发送之前（即调用

open()

方法之前），该属性的值是空字符串；如果服务器没有返回状态提示，该属性的值默认为“OK”。该属性为只读属性。

8.XMLHttpRequest.timeout,XMLHttpRequestEventTarget.ontimeout

XMLHttpRequest.timeout属性返回一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。如果该属性等于0，就表示没有时间限制。

XMLHttpRequestEventTarget.ontimeout属性用于设置一个监听函数，如果发生 timeout 事件，就会执行这个监听函数。

例子：

var xhr = new XMLHttpRequest();
var url = '/server';

xhr.ontimeout = function () {
  console.error('The request for ' + url + ' timed out.');
};

xhr.onload = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // 处理服务器返回的数据
    } else {
      console.error(xhr.statusText);
    }
  }
};

xhr.open('GET', url, true);
// 指定 10 秒钟超时
xhr.timeout = 10 * 1000;
xhr.send(null);

9.事件监听属性
XMLHttpRequest 对象可以对以下事件指定监听函数。

• XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数
• XMLHttpRequest.onprogress：progress事件（正在发送和加载数据）的监听函数
• XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了abort()方法）的监听函数
• XMLHttpRequest.onerror：error 事件（请求失败）的监听函数
• XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数
• XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数
• XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数

XMLHttpRequest的实例方法

1.XMLHttpRequest.open()

XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。

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

• method：表示 HTTP 动词方法，比如GET、POST、PUT、DELETE、HEAD等。
• url: 表示请求发送目标 URL。
• async: 布尔值，表示请求是否为异步，默认为true。如果设为false，则send()方法只有等到收到服务器返回了结果，才会进行下一步操作。该参数可选。由于同步 AJAX 请求会造成浏览器失去响应，许多浏览器已经禁止在主线程使用，只允许 Worker 里面使用。所以，这个参数轻易不应该设为false。
• user：表示用于认证的用户名，默认为空字符串。该参数可选。
• password：表示用于认证的密码，默认为空字符串。该参数可选。

注意，如果对使用过

open()

方法的 AJAX 请求，再次使用这个方法，等同于调用

abort()

，即终止请求。

2.XMLHttpRequest.send()

XMLHttpRequest.send()方法用于实际发出 HTTP 请求。它的参数是可选的，如果不带参数，就表示 HTTP 请求只有一个 URL，没有数据体，典型例子就是 GET 请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。

下面是 GET 请求的例子。

var xhr = new XMLHttpRequest();
xhr.open('GET',
  'http://www.example.com/?id=' + encodeURIComponent(id),
  true
);
xhr.send(null);

上面代码中，

GET

请求的参数，作为查询字符串附加在 URL 后面。

下面是发送 POST 请求的例子。

3.XMLHttpRequest.setRequestHeader()

用于设置浏览器发送的 HTTP 请求的头信息。该方法必须在

open()

之后、

send()

之前调用。如果该方法多次调用，设定同一个字段，则每一次调用的值会被合并成一个单一的值发送。

4.XMLHttpRequest.overrideMimeType()

用来指定 MIME 类型，覆盖服务器返回的真正的 MIME 类型，从而让浏览器进行不一样的处理。举例来说，服务器返回的数据类型是

text/xml

，由于种种原因浏览器解析不成功报错，这时就拿不到数据了。为了拿到原始数据，我们可以把 MIME 类型改成

text/plain

，这样浏览器就不会去自动解析，从而我们就可以拿到原始文本了。

xhr.overrideMimeType('text/plain')

**注意，该方法必须在

send()

方法之前调用。**

4.XMLHttpRequest.getResponseHeader()

返回 HTTP 头信息指定字段的值，如果还没有收到服务器回应或者指定字段不存在，返回

null

。该方法的参数不区分大小写。

5.XMLHttpRequest.getAllResponseHearders()

返回一个字符串，表示服务器发来的所有 HTTP 头信息。格式为字符串，每个头信息之间使用

CRLF

分隔（回车+换行），如果没有收到服务器回应，该属性为

null

。如果发生网络错误，该属性为空字符串。

6.XMLHttpRequest.abort()

用来终止已经发出的 HTTP 请求。调用这个方法以后，

readyState

属性变为

4

，

status

属性变为

0

。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/page.php', true);
setTimeout(function () {
  if (xhr) {
    xhr.abort();
    xhr = null;
  }
}, 5000);

上面代码在发出5秒之后，终止一个 AJAX 请求。