`
zccst
  • 浏览: 3287057 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JSONP原理及实现

阅读更多
作者:zccst



2015-04-30 更新
跨域实现的两种方式
一、通过src="http://romateServer.com/api?callback=callbackHandler"
回调成功后,在浏览器端实现callbackHandler方法,返回值在callbackHandler参数中
批注:既然如此,所有src都可以实现跨域。比如图片src等。具体实现是将该内容动态的插入到DOM中。

二、通过jQuery的ajax参数{dataType:jsonp,jsonp:callback,success:function(){}}
回调成功后,返回值在success参数中

在jQuery1.5后,又增加如下描述,照着做之后发现报错:
Uncaught SyntaxError: Unexpected token :
暂未找到解决办法,所以还是回归传统方式。

jsonp
Type: String
Override the callback function name in a JSONP request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url. So {jsonp:'onJSONPLoad'} would result in 'onJSONPLoad=?' passed to the server. As of jQuery 1.5, setting the jsonp option to false prevents jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation. In this case, you should also explicitly set the jsonpCallback setting. For example, { jsonp: false, jsonpCallback: "callbackName" }
jsonpCallback
Type: String or Function()
Specify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests. As of jQuery 1.5, you can also use a function for this setting, in which case the value of jsonpCallback is set to the return value of that function.



ajax与jsonp的异同再做一些补充说明:
1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变这一点!








2014-06-09

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。


JSONP原理:
首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)


实例:

(1)客户端:(任一)

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
    function jsonpCallback(result) {
        //alert(result);
        for(var i in result) {
            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
        }
    }
    var JSONP=document.createElement("script");
    JSONP.type="text/javascript";
    JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";
    document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>




<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
    function jsonpCallback(result) {
        alert(result.a);
        alert(result.b);
        alert(result.c);
        for(var i in result) {
            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
        }
    }
</script>
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>



注意:JavaScript的链接,必须在function的下面。



(2)服务器端:

<?php

//服务端返回JSON数据
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$result=json_encode($arr);
//echo $_GET['callback'].'("Hello,World!")';
//echo $_GET['callback']."($result)";
//动态执行回调函数
$callback=$_GET['callback'];
echo $callback."($result)";




jQuery中的实现

如果将上述JS客户端代码用jQuery的方法来实现,也非常简单。
$.getJSON
$.ajax
$.get

(1)$.getJSON
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $.getJSON("http://crossdomain.com/services.php?callback=?",
    function(result) {
        for(var i in result) {
            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
        }
    });
</script>


(2)$.ajax
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $.ajax({
        url:"http://crossdomain.com/services.php",
        dataType:'jsonp',
        data:'',
        jsonp:'callback',
        //jsonpCallback:"flightHandler",//可选,jQuery把返回放到success里了。默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
        success:function(result) {
            for(var i in result) {
                alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
            }
        },
        timeout:3000
    });
</script>


(3)$.get
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $.get('http://crossdomain.com/services.php?callback=?', {
        name: encodeURIComponent('tester')
    }, function (json) { 
        for(var i in json) alert(i+":"+json[i]); 
    }, 'jsonp');
</script>

其中 jsonCallback 是客户端注册的,获取跨域服务器上的json数据后,回调的函数。
http://crossdomain.com/services.php?callback=jsonpCallback
这个 url 是跨域服务 器取 json 数据的接口,参数为回调函数的名字,返回的格式为
jsonpCallback({msg:'this is json data'})



使用JSON的优点在于:
比XML轻了很多,没有那么多冗余的东西。
JSON也是具有很好的可读性的,但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示,浏览器对于JSON的格式化的显示就需要借助一些插件了。
在JavaScript中处理JSON很简单。
其他语言例如PHP对于JSON的支持也不错。
JSON也有一些劣势:
JSON在服务端语言的支持不像XML那么广泛,不过JSON.org上提供很多语言的库。
如果你使用eval()来解析的话,会容易出现安全问题。
尽管如此,JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

缺点与不足:
JSONP 是构建 mashup 的强大技术,但不幸的是,它并不是所有跨域通信需求的万灵药。它有一些缺陷,在提交开发资源之前必须认真考虑它们。

第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。


如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    JSONP原理及简单实现

    主要介绍了JSONP原理及简单实现的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下

    JSONP实现原理

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的...

    jsonp原理.txt

    交接jsonp,轻松实现跨域方法的调用,很值得学习的东西

    浅析JSONP技术原理及实现

    主要介绍了浅析JSONP技术原理及实现 的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下

    通过实例解析json与jsonp原理及使用方法

    在ajax中 JSON用来解决数据交换问题,而JSONP来实现跨域。 备注:跨域也可以通过服务器端代理来解决; 理解:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。 2....

    详细分析jsonp的原理和实现方式

    详细分析jsonp的原理和实现方式 一:跨域问题。 二,跨域产生的原因 Js是不能跨域请求。出于安全考虑,js设计时不可以跨域。 什么是跨域: 1、域名不同时。 2、域名相同,端口不同。 只有域名相同、端口相同时,才...

    JSONP跨域的原理解析及其实现介绍

    JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理

    借助script进行Http跨域请求:JSONP实现原理及代码

    [removed]元素的src属性能设置URL并发起HTTP GET请求, 使用[removed]元素实现脚本操作HTTP可以跨域通信而不受限与同源策略. 通常, 使用基于[removed]的Ajax传输协议时, 服务器响应采用JSON编码的数据格式, 当执行...

    基于JSONP原理解析(推荐)

    这篇解析一下jsonp的实现原理。 基本原理 基本原理很容易说明白,在html页面中有一些标签是不受跨域限制的,比如img,script,link等。如果把我们需要的数据,放在一个js文件里面,这时,我们就能突破浏览器同源的...

    深入分析jsonp协议原理

    但是因为当时后端没有支持jsonp来访问,后来他在实现这个功能的时候问了我一句,jsonp形式返回的格式是怎么样子的?我一直以来只知道怎么使用,迷迷糊糊的却没有答上来。。。 虽然后来解决了,但是对于喜欢解决问题...

    利用jsonp跨域调用百度js实现搜索框智能提示

    使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js。  ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的 在chrome的调试窗口下看看百度搜索...

    使用jquery的jsonp如何发起跨域请求及其原理详解

    本文主要给大家介绍的是关于jquery jsonp发起跨域请求及其原理的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的...

    跨域请求两种方法 jsonp和cors的实现

    // 原理: ajax 不能直接跨域 。 //向html中加入script标签 含有访问路径,script标签直接访问路径达到效果 $('.get_service2').click(function () { // 伪造ajax提交请求 $.ajax({ url:'...

    VUE2.0中Jsonp的使用方法

    1.JSONP的用途和原理 使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域。确切地说,AJAX请求由于同源影响,是不允许进行跨域请求的,而Script标签src属性中的链接却可以访问跨域的js...

    js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下

Global site tag (gtag.js) - Google Analytics