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);
}
参考
