ajax跨域访问遇到的问题及解决方案
ajax请求一个目标地址为非本域(协议、域名、端口任意一个不同)的web资源,并根据响应获得外部应用数据。比如我们用ajax访问城市天气预报、ip地址等公共服务接口时,就涉及跨域了。我们请求一个外部服务时,浏览器会基于安全问题拒绝授权访问。
而script、script、iframe标签的src属性就不存在跨域的问题,所以ajax跨域就是利用这一点以及js对json的支持,外部服务只要给ajax的请求响应一段js代码或json数据,就能被ajax获取到。
由于安全方面的原因, 客户端js使用xmlhttprequest只能用来向来源网站发送请求,比如在www.readlog.cn下去请求test.readlog.cn的数据,都是不行的。不过,解决办法倒是不少。这里整理一下。
解决方式1 web代理的方式 (on server a)
由该页面代替用户页面完成交互,从而返回合适的结果。此方案可以解决现阶段所能够想到的多数跨域访问问题,但要求a网站提供web代理的支持,因此a网站与b网站之间必须是紧密协作的,且每次交互过程,a网站的服务器负担增加,且无法代用户保存session状态。
解决方式2. on-demand方式 (on server a)
mymsn的门户就用的这种方式,不过 mymsn中不涉及跨域访问问题。在页面内动态生成新的
解决方式3. iframe方式 (on server a)
查看过醒来在javaeye上的一篇关于跨域访问的帖子,他提到自己已经用iframe的方式解决了跨域访问问题。数据提交跟获取,采用iframe这种方式的确可以了,但由于父窗口与子窗口之间不能交互(跨域访问的情况下,这种交互被拒绝),因此无法完成对父窗口效果的影响。
在页面内嵌或动态生成指向别的网站的iframe,然后这2个网页间可以通过改变对方的anchor hash fragment来传输消息。改变一个网页的anchor hash fragment并不会使浏览器重新装载网页,所以一个网页的状态得以保持,而网页本身则可以通过一个计时器(timer)来察觉自己anchor hash的变化,从而相应改变自己的状态。
解决方式4. 用户本地转储方式 (local)
ie本身依附于windows平台的特性为我们提供了一种基于iframe,利用内存来“绕行”的方案,即两个window之间可以在客户端通过windows剪贴板的方式进行数据传输,只需要在接受数据的一方设置interval进行轮询,获得结果后清除interval即可。ff的平*立性决定了它不支持剪贴板这种方式,而以往版本的ff中存在的插件漏洞又被fixed了,所以ff无法通过内存来完成暗渡陈仓。而由于文件操作ff 也没有提供支持(无法通过cookie跨域完成数据传递),致使这种技巧性的方式只能在ie中使用。
解决方式5: (其实还是在服务端a用iframe解决了与服务器b通信的问题)
要解决的问题:发生在用户提交网页 url (还包括 tag, notes 等)给bookmark 服务器时。
关于 url 的提交至少可以有三种方式:
1. 登陆 bookmark 服务器的提交页面,将要收藏的 url 通过该页面提交给服务器。
2. 安装浏览器插件,通过插件将 url 提交给服务器。
3. 从 bookmark 服务器动态加载 javascript 小工具到当前页面,通过它来完成提交工作。
第一种方式开发起来最简单,但对用户来讲比较麻烦,每次都需要先登陆 bookmark 服务器才能完成提交;第二种方式我并不熟悉插件开发,而且用户也不喜欢太多的插件堆满自己的浏览器;第三种方式开发难度小,又避免了每次登陆服务器的麻烦,所以最终采用它。第三种方式中动态加载的 javascript 小工具除了需要生成 ui 供用户填写信息( url , tag , notes 等),当用户点击提交的时候,还要完成与服务器通信的功能。
上一篇: 了解javascript中的Dom操作
下一篇: 深入学习JavaScript中的bom