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

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

XHR对象

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

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

属性和方法

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

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

请求模型

  请求的步骤,首先构造一个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);
}

参考

上一篇:逻辑回归 vs 决策树 vs 支持向量机(I)


下一篇:C++程序设计-面向对象