21. javacript高级程序设计-Ajax与Comet
1. Ajax与Comet
1.1 XMLHttpRequest对象
IE5是第一款引入XHR对象的浏览器,IE5中是通过MSXML库中的一个ActiveX对象实现的。因此在IE中可能存在MSXML2.XMLHttp, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp.6.0,要支持旧浏览器,可以使用如下函数:
function createXHR(){
if(typeof XMLHttpRequest != ‘undefined‘){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != ‘undefined‘){
if(typeof arguments.callee.activeXString !="string"){
var versions = [‘MSXML2.XMLHttp.6.0‘,‘MSXML2.XMLHttp.3.0‘,‘MSXML2.XMLHttp‘],i,len;
for(i =0 ,len=versions.length;i<len;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}cath(ex){
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error(‘NO XHR object.‘);
}
}
1.2 XHR用法
使用XHR对象,第一个方法是open(),第一个参数表示方法,第二个参数表示请求地址,第三个参数表示是否异步传递数据。
第二步调用send()方法,
第三部根据 返回状态判断执行对应方法
(1). 等到服务器响应后,响应数据会自动填充XHR对象的属性。
l responseText:作为响应主体返回的数据
l responseXML:响应内容是XML DOM文档数据,内容类型是“text/xml”或者“application/xml”
l status:响应的状态
l statusText:响应的状态说明
(2). 针对异步请求,可以检测XHR对象的readyState属性,
l 0:未初始化
l 1:启动
l 2:发送
l 3:接收
l 4:完成
var xhr = createXHR();
xhr.onreadystatechange = function(){ //必须在open方法前指定
if(xhr.readystate == 4){
if((xhr.status >=200 && xhr.status < 300)|| xhr.status == 304){
alert(xhr.responseText);
}else{
alert(‘error’);
}
}
}
xhr.open(‘get’,’ex.php’,true);
xhr.send(null);
1.3 GET请求
var xhr = createXHR();
xhr.onreadystatechange = function(){ //必须在open方法前指定
if(xhr.readystate == 4){
if((xhr.status >=200 && xhr.status < 300)|| xhr.status == 304){
alert(xhr.responseText);
}else{
alert(‘error’);
}
}
}
xhr.open(‘get’,’ex.php?uid=xx’,true); //URL地之后传递参数
xhr.send(null);
1.4 POST请求
var xhr = createXHR();
xhr.onreadystatechange = function() { //必须在open方法前指定
if (xhr.readystate == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert(‘error’);
}
}
}
xhr.open(‘post’, ’ex.php’, true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送前指定传输类型
xhr.send(form.data);//参数在send是传输
1.5 跨资源请求
IE8通过XDomainRequest对象支持CORS,其他浏览器通过XHR对象原生支持CORS,图像Ping和JSONP是另外两种跨浏览器通信技术。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。