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跨域的方法”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！