json跨域的方法

首先,先了解浏览器有一个很重要安全性限制,即为同源策略:不同域的客户端脚本在无明确授权的情况下不能读些对方资源。跨域也就是不同源~

只要协议,端口,域名有一个不同,即为跨域!

然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。

解决方法:

1.使用jsonp解决跨域 :(仅适用于GET请求)
实现原理:

<script>  标签是不受同源策略的限制的,它可以载入任意地方的 JavaScript 文件,而并不要求同源。
所以 JSONP 的理念就是,我和服务端约定好一个函数名,当我请求文件的时候,服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数,并且将数据当做参数传入。非常巧合的一点(其实并不是),JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。所以在我们约定的函数里面可以直接使用这个对象。
使用JavaScript代码解决

 var eleScript = document.createElement("script");  
   eleScript.type = "text/javascript";  
   eleScript.src = "http://example2.com/getinfo.php";  
   document.getElementsByTagName("HEAD")[0].appendChild(eleScript);

使用jquery解决

$.ajax({  
        url: http://跨域的dns/document!searchJSONResult.action,  
        type: "GET",  
        dataType: 'jsonp',      //主要是这里和原来的json改变了!
       jsonp: 'jsoncallback',  
 })

2.使用HTML5的window.postMessage方法来跨域传送数据 (只兼容IE8+、FireFox、Chrome、Opera等浏览器)

window.postMessage(message,targetOrigin)

windowObj : 接受消息的 Window 对象。
message : 在最新的浏览器中可以是对象。
targetOrigin : 目标的源,* 表示任意。
可以使用它来向其它的window对象发送消息,功能非常强大,无视域名无视端口……无论这个window对象是属于同源或不同源。

 var windowObj = window; // 可以是其他的 Window 对象的引用
  var data = null;
   
  addEventListener('message', function(e){
      if(e.origin == 'http://jasonkid.github.io/fezone') {
          data = e.data;
  
         e.source.postMessage('Got it!', '*');
      }
 });

message 事件就是用来接收 postMessage 发送过来的请求的。函数参数的属性有以下几个:

origin : 发送消息的 window 的源。
data : 数据。
source : 发送消息的 Window 对象。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值