XMLHttpRequest对象(简称XHR)是ajax技术的核心,ajax可以无刷新更新页面得益于xhr。
一、创建
var xhr = new XMLHttpRequest();
二、发送请求
open()
xhr.open("get","example.php", false);
1.第一个参数指定请求方式
2.第二个参数url
3.第三个参数表示是否同步,默认为true(异步)
4.如果请求一个受密码保护的URL,把用于认证的用户名和密码作为第4和第5个参数传递给open()方法
send()
如果是GET方法,send()方法无参数,或参数为null;如果是POST方法,send()方法的参数为要发送的数据
调用send()方法后,请求被分派到服务器
xhr.open("get", "example.txt", false);
xhr.send(null);
三、接收响应
responseText: 作为响应主体被返回的文本(文本形式)
responseXML: 如果响应的内容类型是'text/xml'或'application/xml',这个属性中将保存着响应数据的XML DOM文档(document形式)
status: HTTP状态码(数字形式)
statusText: HTTP状态说明(文本形式)
四、同步
如果接受的是同步响应,则需要将open()方法的第三个参数设置为false,那么send()方法将阻塞直到请求完成。一旦send()返回,仅需要检查XHR对象的status和responseText属性即可。
同步请求是吸引人的,但应该避免使用它们。客户端javascript是单线程的,当send()方法阻塞时,它通常会导致整个浏览器UI冻结。如果连接的服务器响应慢,那么用户的浏览器将冻结。
五、异步
如果需要接收的是异步响应,这就需要检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。
0(UNSENT):未初始化。尚未调用open()方法
1(OPENED):启动。已经调用open()方法,但尚未调用send()方法
2(HEADERS_RECEIVED):发送。己经调用send()方法,且接收到头信息
3(LOADING):接收。已经接收到部分响应主体信息
4(DONE):完成。已经接收到全部响应数据,而且已经可以在客户端使用了
理论上,只要readyState属性值由一个值变成另一个值,都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//异步接受响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//实际操作
result.innerHTML += xhr.responseText;
}
}
}
//发送请求
xhr.open('get','message.xml',true);
xhr.send();