Ajax如何进行跨域请求？Ajax跨域请求的原理

本文的例子分享了Ajax跨域请求的具体实现过程，供大家参考。具体内容如下

让我们建立两个本地站点来演示

第一步是在本地构建一个Apache服务器；下载地址；第二步：配置好服务器后，在本地配置两个虚拟域名；第三步是在c盘建立一个名为“HTML 5”的文件夹；步骤4找到Apache虚拟主机的配置文件，然后打开配置文件

第五步是在第三步创建的HTML5文件夹下创建一个文件夹A和一个文件夹B；步骤6修改Apache虚拟主机的配置文件，如图

第七步修改主机文件，添加A和b的URL，通常主机文件的路径在c : \ Windows \ System32 \ Drivers \等下

我们在HTML5/a文件夹下创建一个7.ajax.html文件

！DOCTYPE HTMl HTMl heartheta http-equiv=' Content-TYPe ' Content=' text/html；Charset=utf-8'title获取同一域下的内容/title scriptwindow . onload=function(){ varobtn=document . getelementbyid(' BTN ')；//忽略IE6 oBtn.onclick=function() {//创建一个ajax对象var xhr=new XMLHttpRequest()；//侦听事件xhr . onreadystatechange=function(){ if(xhr . readystate==4){ if(xhr . status==200){ alert(xhr . responsetext)；} } } xhr.open('get '，' ajax.php '，true)；xhr . send()；}}/script/head body输入类型=' button' value='获取同域下的内容' id=' BTN '/body/html我们先来看看同域下的请求

我们在HTML5/a下构建一个php文件，并返回‘hello’；

此时，我们正在打开当前页面http://www.a.com/7.ajax.html.点击按钮，我们发现数据已被请求；http://www.a.com/7.ajax.html

但是如果是跨域的，也就是你请求的数据和当前文件不在同一个域下，那么就会产生跨域的请求，这种情况下通常是禁止你访问的

例如，我们现在将把HTML5/a文件夹下的ajax.php文件放到B文件夹中

此时，单击后，我们发现请求报告了一个错误，这意味着跨域请求受到限制

这时候我们需要后端配合，你需要告诉后端在输出的时候添加一个“访问控制-允许-起源”的头信息。比如如图所示，就是说只要这个域名的跨域请求不受跨域策略的影响。

此时，当我单击时，可以正常获取跨域数据

如果你想兼容IE需求，

！DOCTYPE HTMl HTMl heartheta http-equiv=' Content-TYPe ' Content=' text/html；Charset=utf-8'titleajax跨域请求/title script window . onload=function(){/*在标准浏览器下，对XMLHttpRequest对象进行了升级，支持更多功能，可以跨域。但是，如果您想实现跨域请求，只有在后端的配合下，才能向XMLHttpRequest :添加许多功能。他也不建议使用onload */varobtn=document . getelementbyid(' BTN ')来监视事件。OBtn.onclick=function() {//这是编写var xhr=new XMLHttpRequest()的标准浏览器；xhr . onreadystatechange=function(){ if(xhr . readystate==4){ if(xhr . status==200){ alert(xhr . responsetext)；} } } xhr.open('get '，' http://www.b.com/ajax.php '，true)；xhr . send()；/*如果想兼容IE浏览器，可以专门为IE做兼容性，忽略IE6XDOMAINRequest3360IE。如果要实现跨域请求，需要使用这个对象来实现VAR OXDomainRequest=new xdinrequest()；oxdomainrequest . onload=function(){ alert(this . responsetext)；} oXDomainRequest.open('get '，' http://www.b.com/ajax.php '，true)；oxdomainrequest . send()；*/}}/script/head body输入类型=' button' value='获取同一域下的内容' id='btn' //body/html有关IE的详细信息，请访问https://mdsn.microsoft.com/en-us/library/cc288060(vs . 85)。aspxaajax最新标准请访问

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。