每日三问之javascript之Ajax与跨域

ajax技术能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验。
 
XMLHttpRequest 对象
 
Ajax 技术的核心是 XMLHttpRequest 对象(简称 XHR )
 
创建 XHR 对象
 
var xhr = new XMLHttpRequest();
 
XHR的用法 
 
要调用的第一个方法是 open() ,它接受 3 个参数:要发送的请求的类型(”get” 、 “post” 等)、请求的 URL 和表示是否异步发送请求的布尔值。
 
xhr.open(”get”, “example.php”, false);
 
xhr.send(null);
 
这里的 send() 方法接收一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入 null ,因为这个参数对有些浏览器来说是必需的。调用 send() 之后,请求就会被分派到服务器。
 
在收到响应后,响应的数据会自动填充 XHR 对象的属性,相关的属性简介如下。
 
responseText:作为响应主体被返回的文本。
 
responseXML:如果响应的内容类型是”text/xml”或”application/xml”,这个属性中将保存包含着响应数据的 XML DOM 文档。
 
status:响应的 HTTP 状态。
 
statusText:HTTP 状态的说明。
 
xhr.open(”get”, “example.txt”, false); 
 
xhr.send(null); 
 
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 
 
 alert(xhr.responseText); 
 
} else { 
 
 alert(”Request was unsuccessful: ” + xhr.status); 
 
}
 
像前面这样发送同步请求当然没有问题,但多数情况下,我们还是要发送异步请求,才能让 JavaScript 继续执行而不必等待响应。此时,可以检测 XHR 对象的 readyState 属性,该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。
 
0:未初始化。尚未调用 open()方法。
 
1:启动。已经调用 open()方法,但尚未调用 send()方法。
 
2:发送。已经调用 send()方法,但尚未接收到响应。
 
3:接收。已经接收到部分响应数据。
 
4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
 
var xhr = createXHR(); 
 
xhr.onreadystatechange = function(){ 
 
 if (xhr.readyState == 4){ 
 
 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 
 
 alert(xhr.responseText); 
 
 } else { 
 
 alert(”Request was unsuccessful: ” + xhr.status); 
 
 } 
 
 } 
 
}; 
 
xhr.open(”get”, “example.txt”, true); 
 
xhr.send(null);
 
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; 
 
 } catch (ex){ 
 
 //跳过
 
 } 
 
 } 
 
 } 
 
 return new ActiveXObject(arguments.callee.activeXString); 
 
 } else { 
 
 throw new Error(”No XHR object available.”); 
 
 } 
 
}

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64248.shtml

张贴在3