使用iframe的ajax跨域通信的实现原理(插图)

在前端开发的漫漫征途中，必然会接触到ajax，ajax请求通常在同一个域中使用；但是，如果请求发生在不同的域中，则无法执行该请求，并且将引发异常，指示不允许跨域请求。目前我还没有找到任何明确的信息来解释为什么，所以我认为应该是出于安全考虑。即便如此，实现跨域访问的方法还是有的，而且不止一种。这里，我们介绍其中一个解决方案：如何使用iframe完成ajax跨域请求。

如下图所示，指向b.com request.html的iframe嵌套在a.com的页面中(即http://a.com/request.html)，而a.com的proxy.html嵌套在response.html。

要了解a.com的request.html请求b.com的process.php，您可以通过网址将请求的参数发送到response.html。Response.html向process.php发送一个真正的ajax请求(response.html和process.php都属于域b.com)，然后通过URL将返回的结果发送给proxy.html。最后，由于proxy.html和request.html在同一个域中，您可以使用proxy.html的window.top将结果返回给request.html，以完成跨域通信。其实整个过程很清楚。真正的ajax请求不是发生在a.com域，而是发生在b.com域。而域a.com做了两件事，第一件事是由request.html做的，向域b.com发送传入参数；第二件事是proxy.html做的，域back的响应数据交给了request.html。

跨域访问流程图好的，接下来就是如何用代码实现了；在此之前先看文档结构：http://a.com/request。html代理。html http://b.com/响应。html流程。P1博士，先来看request.html，为了方便理解，我把射流研究…也放到了页面上：复制代码代码如下：DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 '标题该页面的路径是：http://a.com/request。html/title/head body p id=' result '这里将会填上响应的结果/p a id=' SendBtn ' href=' JavaScript : void(0)'点击，发送跨域请求/a iframe id='serverIf'/iframe脚本类型=' text/JavaScript '文档。getelementbyid(' sendBtn ').onclick=function(){ var URL=' http://b.com/response。html '；var fn=' GetPerson这是定义在response.html的方法var reqdata=' { ' id ' : 24 }//这是请求的参数定义变量回调='回调；//这是请求全过程完成后执行的回调函数，执行最后的动作交叉请求(url、fn、reqdata ),回调);//发送请求}函数CrossRequest(url，fn，reqdata，callback){ var server=document。getelementbyid(' Serverif ')；server.src=url '？fn=' encodeURIComponent(fn)'数据=' encodeURIComponent(reqdata)'回调=' encodeURIComponent(回调);//这里由request.html向response.html发送的请求其实就是通过内联框架的科学研究委员会将参数与回调方法传给response.html }函数回调（数据){//回调函数"我的名字是'数据。名字。我是一个"数据性"的人。我是"数据。年龄"岁。文件。getelementbyid(' result ').innerHTML=str}/脚本/正文/html看代码和注释相信都很容易理解，这个页面其实就是要告诉response.html:我要让你执行你定义好的方法GetPerson，并且要用我给你的参数{“id”: 24 }。可能感到模糊的就是为什么要把回收函数传给response.html，这是定义在本页面上的方法，response.html也不能执行它；看接下来的代码就会知道：response.html纯粹是负责将回收这个方法名传递给下一位仁兄proxy.html，而proxy.html拿到了回收这个方法名就可以执行了，因为proxy.html和request.html是同域的。2、接下来我们看response.html的代码：复制代码代码如下：DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 '标题该页面的路径是：http://b.com/回应。html/title/head body iframe id=' proxy '/iframe脚本类型=' text/JavaScript ' function _ request(请求数据、url、回调){//通用方法，ajax请求var xmlhttpif(窗口. XMLHttpRequest){ xmlhttp=new XMLHttpRequest()；} else { xmlhttp=新ActiveX对象(' Microsoft .XMLHTTP’)；} xmlhttp。onreadystatechange=function(){ if(xmlhttp。readystate==4 xmlhttp。status==200){ var data=xmlhttp。responsetext回调（数据);} } xmlhttp.open('POST '，URL)；xmlhttp。setrequestheader(' Content-Type '，' application/JSON；charset=utf-8 ')；xmlhttp。发送(请求数据)；} function _getQuery(key) {//通用方法，获取全球资源定位器(统一资源定位符)参数var query=location.href.split('？')[1];定义变量值=decodeURIComponent(查询。拆分(键'=')[1]。split(" "[0])；返回值；}函数请求数据，回调){//向process.php发送创建交互式、快速动态网页应用的网页开发技术请求var URL=' process . phpvar fn=function(data){ var proxy=document。getelementbyid(' proxy ')；代理人。'http://b.com/Proxy.html？数据=' encodeURIComponent(数据)'回调=' encodeURIComponent(回调);} _request(reqdata，url，fn)；}(function(){ var fn=_ Getquery(' fn ')；var req data=_ Getquery(' data ')；定义变量回调=_getQuery('回调');eval(fn '(“请求数据”、“回调”))；})();/脚本/正文/html这里其实就是接收来自request.html的请求得到请求参数和方法后向服务器process.php发出真正的创建交互式、快速动态网页应用的网页开发技术请求，然后将从服务器返回的数据以及从request.html传过来的回调函数名传递给proxy.html。

3.接下来看看process.php的代码，比较简单：复制代码如下：PHP $ data=JSON _ decode(file _ get _ contents(' PHP ://input '))；标头(' Content-Type:应用程序/JSON；charset=utf-8 ')；echo(“{”id“:”)。$data-id。‘年龄’: 24、‘性别’:‘男孩’、‘姓名’:‘黄雪明’})；我不想说这些代码，但是我能理解一点PHP基础，没有PHP基础应该能看到大概的画面。呵呵~ ~ ~ 4、最后，proxy.html:复制代码如下：DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；Charset=UTF-8 '标题此页面的路径为：http://a.com/proxy.html/title/headbody脚本类型=' text/JavaScript ' function _ geturl(key){//general方法，获取url参数var query=location.href.split('？'。)[1];var值=decodeURIComponent(query . split(key '=')[1]。split(“”)[0])；返回值；}(function(){ var callback=_ GetURl(' callback ')；var data=_ GetURl(' data ')；eval(' window . top . ' . decodeURIComponent(回调)'(' decodeURIComponent(数据)')'))；})()/script/body/HTMl这也是最后一步。代理最终得到了request.html通过response.html发送的回调函数名和response.html直接发送的响应数据，并使用window.top执行request.html定义的回调函数。实际上，proxy.html基本上可以成为总代理，这一点不需要改变。如果需要使用很多跨域的方法，可以在域a.com中添加这些方法，而域b.com相当于定义了一些接口让a.com调用，比如GetPerson。当然，这不是一个真实的界面，只是为了方便理解和类比。此外，当然是隐藏iframe。好吧，最后，我提供一句老话：你拥有的技术不是最重要的，而是学习的能力。