注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易邮箱前端技术中心

汇聚最新最劲爆的前端技术

 
 
 

日志

 
 
 
 

前端开发各种cross之cross domain(一)  

2012-05-10 11:54:06|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

作为一个苦逼前端开发工程师,不得不面对各种cross,比如面对五花八门的浏览器我们必须cross browser,面对各种终端,我们必须cross device,在这么多年的前端开发经历中,在不同的域之间穿越中,遭受各种折磨,所以这次和大家分享的是cross domain。

这次分享的cross domain,是包括所有跨域调用,无论是跨域获取数据,还是跨域跨frame调用,所以会分为两部分,这次会先分享跨域获取数据,跨域获取数据大概有以下方式。

1.jsonp方式
这是最简单,也是最实用的跨域获取数据方式,原理是在浏览器端通过生成script标签,并通过js callback的形式实现跨域访问,比如一个jsonp接口是这样:
http://mail.163.com/someapp/jsonp?somequery=xxx&callback=fSomeMethod
然后服务器端会通过以下方式返回数据:
fSomeMethod({返回的json数据对象})
优点:实现简单,使用灵活,并且原生cross all browser
缺点:只能get方式获取数据,某些浏览器会显示加载中提示

2.表单post方式
这个方式会复杂一点点,原理是post表单到一个隐藏的iframe,然后iframe将数据post回来同域的一个url,这时候就可以直接调用同域的回调:
首先post表单到如:http://other.domain.com/someapp?somequery=xxx&callback=fSomeMethod&backurl=http://mail.163.com/proxy
这个接口返回的内容:
<form action="${backurl}" method="post">
<input type="hidden" name="data" value="返回的数据">
<input type="hidden" name="callback" value="${callback}">
</form>
<script>document.getElementsByTagName("FORM")[0].submit();</script>

然后post到http://mail.163.com/proxy后,返回:
<script>
parent.${param.callback}("${param.data}")
</script>
这样就完成整个跨域获取数据的过程
优点:支持post方式,并且原生cross all browser
缺点:实现有点复杂,并且流程有点曲折,需要两次请求,而且表单post方式会引起刷新提示的问题

3.服务器代理
服务器代理方式跨域调用也是使用的比较广泛的方式,原理就是在服务器端来获取跨域数据,然后在同域里ajax方式或者其他方式返回给浏览器。
优点:客户端实现简单,没有cross browser问题
缺点:需要在服务器端实现模拟请求获取数据

4.html5的XDomainRequest
终于在html5迎来了对跨域的ajax,泪牛满脸啊,这下完全可以通过浏览器的原生方式跨域ajax获取数据,这里有个对浏览器的各种跨域ajax的测试:
http://www.debugtheweb.com/test/teststreaming.aspx
优点:浏览器原生支持跨域方式ajax请求
缺点:只能在支持html5的高级浏览器中支持

5.flash request
这个是目前跨域请求最好的一个解决方案,建议在不能用jsonp的方式时候,都可以使用flash request方式,而且flash request可以配置一个安全策略,可以允许哪些域可以调用,然后被跨域的调用需要配置一个crossdomain.xml,允许可以被那个域的flash跨域调用,内容如下:
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="www.xxx.com" />
</cross-domain-policy>
这种方式的局限就是必须依赖flash,我们在邮箱曾经做过一个统计,99%的用户可以通过这种方式获取到数据,另外1%的用户可能是没有安装flash或者flash版本有问题。
优点:依赖flash下可以无视各个浏览器兼容问题
缺点:正所谓成也萧何败也萧何,缺点也是因为要依赖flash

以上每个方式都有优点和缺点,具体使用那种方式来跨域获取数据,需要具体使用时候来决定,没有那种方式是完美的。

下一篇是跨frame调用时候需要cross domain的分享。

前端开发各种cross之cross domain(二)

By Harry

  评论这张
 
阅读(2734)| 评论(2)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017