JavaScript:学习笔记(10)——XMLHttpRequest对象

JavaScript:学习笔记(10)——XMLHttpRequest对象

XHR对象

　　使用XMLHttpRequest (XHR)对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这使得Web页面可以只更新页面的局部，而不影响用户的操作。XMLHttpRequest在 Ajax 编程中被大量使用。

　　XMLHttpRequest 支持同步和异步通信。但是，一般来说，出于性能原因，异步请求应优先于同步请求。同步请求阻止代码的执行，这会导致屏幕上出现“冻结”和无响应的用户体验。

属性和方法

　　在使用XHR之前，我们先大体了解一下XHR的属性和方法。

　　

请求模型

　　请求的步骤，首先构造一个XHR对象，然后，初始化一个请求，这里我们需要填写三个重要的参数：

• 请求方法（method）：GET/POST/OPTIONS....
• 请求路径（url）:服务器的处理路径
• 是否异步（async）：为false表示同步请求，默认为异步。

　　最后使用send方法发送请求。

1、请求数据

　　send方法发送请求数据，可以是以下几种：

xhr.send(null);
// xhr.send('string');
// xhr.send(new Blob());
// xhr.send(new Int8Array());
// xhr.send(document);

2、处理响应结果

　　xhr.readyState表示请求的状态码，为4表示请求完成，当请求完成后，xhr.status表示响应状态，为200表示响应成功。最后就可以使用xhr.response，来查看相应信息。

3、异步请求

　　对于异步请求，发送请求并不会影响后续代码运行。当请求结束后会调用对应的事件处理函数来处理响应结果，诸如onload、onabort、onerror..查看更多

var xhr = new XMLHttpRequest();
xhr.open("GET", "/bar/foo.txt", true);
xhr.onload = function (e) {
  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.send(null);

4、同步请求

　　同步请求的话，发送请求后在得到响应信息前会中断代码运行。

var request = new XMLHttpRequest();
request.open('GET', 'http://www.mozilla.org/', false);
request.send(null);
if (request.status === 200) {
  console.log(request.responseText);
}

参考

• https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest