简单谈谈json跨域

这一篇文章呢，主要是之前一直听别人讲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)  方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。

------------暂且先介绍这2种解决方法……其实还有很多其他的，之后再一一补充-----------------

赞 (0)

相关推荐

  • 使用jsonp完美解决跨域问题

    使用jsonp完美解决跨域问题

    调用web接口,get请求,发现提示:No 'Access-Control-Allow-Origin' header is present on the requested resource. 这个和安全机制有关,默认不允许跨域调用 处理手段:使用jsonp格式, ajax请求参数dataType:'JSONP'. 复制代码 代码如下: $.ajax({         url: "http://.......",         type: 'GET',         dataTy

  • getJSON跨域SyntaxError问题分析

    昨天写一个功能:点击手机验证的同时获取json端的数据. javascript代码如下: $(".check_mobile").click(function(){ var mobile = $('.mobile').val(); $.getJSON("http://www.test.com/user.php?mobile="+mobile+"&format=json&jsoncallback=?", function(data){

  • js跨域问题浅析及解决方法优缺点对比

    什么是跨域? 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 复制代码 代码如下: URL                      说明       是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www

  • JS跨域交互(jQuery+php)之jsonp使用心得

    JS跨域交互(jQuery+php)之jsonp使用心得

    什么是jsonp? 说到jsonp,你可能最先想到JSON:它还真和JSON有关系: JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产

  • Jsonp post 跨域方案

    Jsonp post 跨域方案

    近期在项目中遇到这样一问题,关于jsonp跨域问题,get传值是可以的,但post传值死活不行啊,于是网上看了一大堆关于这方面的资料,最终问题得以解决,今天抽空与大家分享下. 说明: http://www.t1.com/index.php 服务端URL 当然这是我本地配置的,需要改为自己对应的地址. 客户端代码: <script> $(function(){ var url = 'http://www.t1.com/index.php'; $.ajax({ type: 'post', url:

  • JS不能跨域借助jquery获取IP地址的方法

    获取IP地址,JS也可以获取客户端IP地址啦,大家知道JS不能跨域,所以这里借助了jquery,真的可以实现获取IP地址,代码如下,已通过测试: <script language="javascript" src="http://www.jb51.net/jslib/jquery/jquery.js"></script> <script language="javascript"> jQuery(functio

  • AngularJS iframe跨域打开内容时报错误的解决办法

    <iframe id="myFrame" ng-src="{{url}}" width="100%" height="100%" seamless frameborder="0" ></iframe> 打开不同域的内容时报下面的错误: Blocked loading resource from url not allowed by $sceDelegate policy 解决方案:

  • js跨域请求的5中解决方式

    跨域请求数据解决方案主要有如下解决方法: JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一.JSONP: 直观的理解: 就是在客户端动态注册一个函数 function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 function a(data),从而实现了跨域. 诞生背景: 1.Ajax直接请求普通文件存在跨域无权访问的问题,甭管是静态页面.动态

  • 5种处理js跨域问题方法汇总

    前两天碰到一个跨域问题的处理,使用jsonp可以解决.(http://www.jb51.net/article/57889.htm) 最近再整理了一下: 1.jsonp. ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那么调试的时候,在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误:在firefox

  • AJAX实现跨域的三种方法（代理,JSONP,XHR2）

    AJAX实现跨域的三种方法（代理,JSONP,XHR2）

    域: 域是WIN2K网络系统的安全性边界.我们知道一个计算机网最基本的单元就是"域",这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域.在独立的计算机上,域即指计算机本身,一个域可以分布在多个物理位置上,同时一个物理位置又可以划分不同网段为不同的域,每个域都有自己的安全策略以及它与其他域的信任关系.当多个域通过信任关系连接起来之后,活动目录可以被多个信任域域共享. 由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只

  • javascript跨域方法、原理以及出现问题解决方法（详解）

    javascript跨域方法、原理以及出现问题解决方法（详解）

    javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实

  • js实现跨域的几种方法汇总（图片ping、JSONP和CORS）

    跨域 虽然有同源策略的存在,但是在js中跨域也依然很常见,有document.domain.window.name.图片ping.jsonp.CORS,在这里简单总结下图片ping.jsonp和CORS备忘. 图片ping 图片可以从任何URL中加载,所以将img的src设置成其他域的URL,即可以实现简单的跨域,可以使用onload和onerror事件来确定是否接受到了响应. var img=new Image(); img.src='http://www.jb51.net'; img.one

随机推荐