Ajax_02之XHR发起异步请求
1、Ajax:
AJAX:Asynchronous Javascript And Xml,异步的JS和XML;
同步请求:地址栏输入URL、链接跳转、表单提交……
异步请求:使用Ajax发起,底层使用XMLHttpRequest对象;
2、XHR的创建:
var xhr=null;
if(window.XMLHttpRequest){xhr=new XMLHttpRequest();//新IE及其它}
else{xhr=new ActiveXObject('Microsoft.XMLHTTP');//老IE}
3、XMLHttpRequest对象的常用成员:
①成员属性:
readyState:int,初始值0;
0——UNSEND——请求消息未发送;1——OPENED——XHR已打开到服务器的链接;2——HEADERS_RECEIVED——XHR已经接收到响应消息起始行和头部;3——LOADING——XHR正在加载响应消息主体;4——DONE——XHR已经完成响应消息;
responseText:初始值"",readyState值为3时开始有响应消息主体文本;
responseXML:初始值null,readyState值为3时有响应消息主题内容——XML DOM树对象;
status:初始值0,保存响应状态码,readyState值为2时开始有值;
statusText:初始值"",保存响应消息原因短句,readyState值为2开始有值;
②成员事件:
onreadystatechange:每次readyState值发生改变就触发;
③成员方法:
open(method,url):打开到服务器的连接;
send():发送请求消息;
setRequestHeader(name,value):设置请求消息头部;
getAllResponseHeaders():获取所有的响应消息头部;
getResponseHeader(name):获取某个响应消息头部;
4、XHR对象发起异步请求步骤:
①创建XHR对象:
var xhr=new XMLHttpReponse();
②监听XHR就绪状态改变事件:
xhr.onreadystatechange=function(){}
③连接到服务器:
xhr.open(method,url,isAsync);
④发起请求消息:
xhr.send(data);
5、XHR发起异步的HTTP GET请求:
①创建XHR对象:
var xhr=new XMLHttpResponse();
②监听XHR就绪状态改变事件
xhr.onreadystatechange=function(){
if(xhr.readystate===4){
if(xhr.status===200){doResponse(xhr);}
else{alert("响应完成,但有问题");}
}
}
③连接到服务器
xhr.open('GET','x.php?k=v&k=v',true);
④发起请求消息
xhr.send(null);
6、XHR发起异步HTTP POST请求:
①创建XHR对象:
var xhr=new XMLHttpResponse();
②监听XHR就绪状态改变事件
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200){doResponse(xhr);}
else{alert("响应完成,但有问题");}
}
}
③连接到服务器
xhr.open('POST','x.php',true);
④修改请求消息头部
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
⑤发起请求消息
xhr.send('k=v&k=v');