javascript中Ajax跨域的方法
本篇内容主要讲解"javascript中Ajax跨域的方法"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"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."）;
}
}
到此，相信大家对"javascript中Ajax跨域的方法"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
