XMLHttpRequest(XHR)是一个API对象，用来在浏览器和服务器端传输数据。这个对象是浏览器的js环境提供的。从XHR获取数据的目的是为了持续修改一个加载过的页面，XHR是Ajax设计的底层概念。XHR使用的协议不同于HTTP，不仅可以使用XML格式的数据，也支持JSON，HTML或者纯文本。
方法：
readyState状态：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
image.png
open方法：
XMLHttpRequest对象的HTTP和HTTPS请求必须通过open方法初始化。这个方法必须在实际发送请求之前调用，以用来验证请求方法，URL以及用户信息。这个方法不能确保URL存在或者用户信息必须正确。初始化请求可以接受5个参数，
open( Method, URL, Asynchronous, UserName, Password )
- 第一个参数是一个字符串值标识HTTP的请求方法。
-GET (IE7+,Mozilla 1+)
-POST (IE7+,Mozilla 1+)
-HEAD (IE7+)
-PUT
-DELETE
-OPTIONS (IE7+)
W3C草案声明浏览器可以自行决定支持的请求方法。
-
第二个参数也是一个字符串值，标示请求的URL。W3C推荐当有跨域请求时，浏览器应该报个错误。
-
第三个参数是一个布尔值类型，标示请求是否是异步的，默认为true。异步请求("true")不会等待服务器响应在继续执行其他脚本之前，可以调用XMLHttpRequest对象的onreadystatechange事件监听器来获取请求的不同状态。一个同步的请求("false")会阻塞js执行直到请求完成，这时就没必要调用onreadystatechange事件监听器。
-
第四个和第五个参数分别是用户名和密码。这些参数是服务端为了验证请求使用的。
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", filepath , false);
xmlhttp.send(null);
}else if(window.ActiveXObject){
return;
}
setRequestHeader方法
在成功初始化请求之后，XMLHttpRequest对象的setRequestHeader方法可以用来设置请求头。
setRequestHeader( Name, Value )
第一个参数是header的字符串名称，第二个参数是字符串值。如果请求需要多个header，这个方法就要被调用多次。这个方法附加的请求头，在下次open方法调用时会被清空。
send方法
XMLHttpRequest对象的send方法用来发送请求，这个方法接收一个参数，这个参数就是要发送的内容。
send(Data)
如果不需要发送内容，这个参数可以省略。W3C草案声明这个参数可以是任意类型的值只要能被js转成字符串，除了DOM对象。如果用户代理无法序列化这个参数，这个参数会被忽略。Firefox3.0.x以及之前版本在send方法没传参数时会抛出异常。
如果用户代理被配置成使用代理服务器，XMLHttpRequest对象应该适当修改请求连接代理而不是源服务器，发送Proxy-Authorization头配置。
onreadystatechange事件监听器
如果XMLHttpRequest对象的send方法第三个参数是true,也就是发送了异步请求，onreadystatechange事件监听器将自动在XMLHttpRequest对象的readyState属性改变时被触发。
状态改变过程如下：
当open方法被成功调用，readyState属性被置为1(OPEND)
当send方法被调用，成功接收到HTTP响应头，readyState属性被置为2(HEADERS_RECEIVED)
一旦HTTP响应内容开始加载，readyState属性被置为3(LOADING)
一旦HTTP响应内容结束加载，readyState属性被置为4(DONE)
当监听器被定义之后，每次状态改变时都会触发。为了检测状态1和状态2，监听器必须在open方法调用前调用。open方法必须在send方法调用前调用。
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
var DONE = this.DONE || 4;
if (this.readyState === DONE){
alert(this.readyState);
}
};
request.open('GET', 'somepage.xml', true);
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
request.send(null);
abort方法
如果XMLHttpRequest对象的readyState属性还没有变成4，这个方法可以终止请求。这个方法可以确保异步请求中的回调不被执行。
abort()
一些AJAX库使用abort方法来取消潜在重复请求以及无序请求。
HTTP响应
当成功调用XMLHttpRequest对象的send方法之后，如果服务端响应式格式正确的XML，并且已经把Content-Type头设置成用户代理支持的XML类型，XMLHttpRequest对象的responseXML属性将会包含一个DOM文档对象。另外一个属性responseText将会包含服务端返回的文本类型，而不管它是否被理解为XML。
网友评论