博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
黄聪:利用iframe实现ajax 跨域通信的解决方案(转)
阅读量:6242 次
发布时间:2019-06-22

本文共 2190 字,大约阅读时间需要 7 分钟。

原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html

  在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求;但是如果请求是发生在不同的域下,请求 就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧。纵然如此,要实现跨域访问的 话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求。

  

 

 

  如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌套了一个 iframe指向域b.com的response.html,而response.html里又嵌套了域a.com的proxy.html。

  要实现域a.com的request.html请求域b.com的process.php,可以将请求的参数通过URL传给 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完成,把域b.com的响应数据递回给 request.html。

跨域访问流程图

  OK,接下来就是如何用代码实现了;在此之前先看文档结构:

  http://a.com/

    request.html

    proxy.html

  http://b.com/

    response.html

    process.php

 

1、先来看request.html,为了方便理解,我把js也放到了页面上:

1  2  3  4     
5 该页面的路径是:http://a.com/request.html 6 7 8

这里将会填上响应的结果

9 点击,发送跨域请求10 11 28 29

  看代码和注释相信都很容易理解,这个页面其实就是要告诉response.html:我要让你执行你定义好的方法GetPerson,并且要用 我给你的参数'{"id" : 24}'。可能感到模糊的就是为什么要把CallBack函数传给response.html,这是定义在本页面上的方法,response.html也 不能执行它;看接下来的代码就会知道:response.html纯粹是负责将CallBack这个方法名传递给下一位仁兄proxy.html,而 proxy.html拿到了CallBack这个方法名就可以执行了,因为proxy.html和request.html是同域的。

 

2、接下来我们看response.html的代码:

1  2  3  4 
5 该页面的路径是:http://b.com/response.html 6 7 8 9 48 49

   这里其实就是接收来自request.html的请求得到请求参数和方法后向服务器process.php发出真正的ajax请求,然后将从服务器返回的数据以及从request.html传过来的回调函数名传递给proxy.html。

 

3、接下来看一下process.php的代码,比较简单:

1 
id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}');5 ?>

这几句代码就不打算讲了,稍微有点PHP基础都能看懂,没PHP基础的应该都能看出个大概了,呵呵~~~

 

4、最后就是proxy.html了:

1  2  3  4     
5 该页面的路径是:http://a.com/proxy.html 6 7 8 20 21

  这里也是最后一步了,proxy终于拿到了request.html透过response.html传过来的回调函数名以及从response.html直接传过来的响应数据,利用window.top执行request.html里定义的回调函数。

  实际应用中,proxy.html基本上可以是一个通用的代理,无需改动,如果需要用到很多跨域方法,这些方法都可以在域a.com里面加上, 而域b.com就相当于定义一些接口供a.com调用,如GetPerson,当然这并不是真正的接口,只是方便理解,打个比方;另外,当然就是要把 iframe隐藏起来。OK,最后还是奉上那句老话:所拥有的技术并不是最重要的,最重要的是学习的能力。

你可能感兴趣的文章
Mars说光场(3)— 光场采集
查看>>
kettle与各数据库建立链接的链接字符串
查看>>
Android--调用系统照相机拍照与摄像
查看>>
【OpenCV学习】利用HandVu进行手部动作识别分析
查看>>
Ubuntu下安装配置JDK1.7
查看>>
AngularJS快速入门指南15:API
查看>>
安装惠普M1136打印机一直处于“新设备已连接”状态怎么办?
查看>>
android88 录音机
查看>>
美国诚实签经验(最全集合)
查看>>
HttpContext.Current:异步模式下的疑似陷阱之源
查看>>
《Java与模式》- 创建型模式
查看>>
[Android]使用Kotlin开发Android(二)
查看>>
php将对象数组转成普通数组
查看>>
org.gradle.process.internal.ExecException: Process 'command 'C:\Program Files (x86)\Java\jdk1.7.0_7
查看>>
Python 中的 if __name__ == '__main__' 该如何理解(1)
查看>>
Qt之对话框设计——利用QPalette改变控件颜色
查看>>
#lspci | grep Eth
查看>>
Linux下svn常用指令【转】
查看>>
C#下2\10\16进制互转代码总汇
查看>>
人工智能和机器学习领域的一些有趣的开源项目
查看>>