`
zccst
  • 浏览: 3322429 次
  • 性别: 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原理的核心在于动态创建标签,并将要请求的跨域URL作为该标签的src属性值。这个URL会包含一个callback参数,这个参数指定了一个将在当前页面执行的函数名。当请求成功返回时,数据会被包裹在这个函数调用的结构...

    JSONP实现原理

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

    jsonp原理.txt

    ### JSONP原理详解 #### 一、什么是JSONP? JSONP(JSON with Padding)是一种用于解决浏览器同源策略限制的方法,允许网页从不同域名的服务器上加载数据。它利用了`&lt;script&gt;`标签不受同源策略限制的特点来实现...

    浅析JSONP技术原理及实现

    以上便是对JSONP技术原理及其实现方法的详细解析,希望对您理解这一跨域技术有所帮助。在未来的技术发展中,JSONP已被更安全和功能更强大的CORS技术取代,因此在新的项目中,应优先考虑使用CORS来处理跨域请求问题。

    本地实现的最简单jsonp例子.zip

    1. **理解JSONP的原理**:了解为何`&lt;script&gt;`标签能跨域以及如何利用这个特性。 2. **回调函数的使用**:理解客户端如何定义回调函数,以及服务器如何根据这个函数名构建返回的JSONP响应。 3. **数据解析**:学习...

    jsonp原理及使用

    **JSONP的工作原理:** 1. **请求发起**:当需要跨域获取数据时,客户端(通常是网页中的JavaScript)会创建一个新的`&lt;script&gt;`标签,并设置其`src`属性指向提供JSONP服务的服务器URL。URL中通常会包含一个名为`...

    jquery下利用jsonp跨域访问实现方法

    本篇文章将深入探讨JSONP的工作原理以及在jQuery下如何利用它来实现异步跨域提交表单。 ### JSONP简介 JSONP是一种解决跨域问题的技术,其核心思想是利用`&lt;script&gt;`标签不受同源策略限制的特性。当浏览器解析到`...

    纯servlet实现JSONP

    在这个纯Servlet实现JSONP的例子中,我们将深入理解JSONP的工作原理,以及如何在Java的Servlet环境中实现这一功能。 首先,让我们了解JSONP的基本概念。JSON(JavaScript Object Notation)是一种轻量级的数据交换...

    JSONP原理以及示例.rar

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了HTML中`&lt;script&gt;`标签可以不受同源策略限制的特性,实现浏览器与服务器之间的数据通信。在Web开发中,由于同源策略的限制,JavaScript通常无法直接访问...

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

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

    jsonp 调用百度实现自动补全

    对于“百度自动补全”功能,其工作原理是用户在搜索框输入时,百度会返回一个包含建议搜索词的JSONP响应。例如,客户端可能发送一个请求到百度的API,URL中包含一个回调函数名(如`callback`)和用户的搜索关键词。...

    .net3.5 WCF实现jsonp

    首先,理解JSONP的工作原理是至关重要的。当一个网页上的JavaScript需要从不同源获取数据时,由于浏览器的同源策略限制,通常无法直接发起请求。JSONP通过动态插入一个`&lt;script&gt;`标签,其`src`属性指向提供JSONP服务...

    利用jsonp实现百度搜索

    首先,让我们了解JSONP的工作原理。当浏览器向其他域名发送AJAX请求时,由于同源策略的限制,会受到阻止。但`&lt;script&gt;`标签没有这个限制,因此我们可以在HTML中插入一个`&lt;script&gt;`标签,其`src`属性指向远程服务器...

    利用JQuery jsonp实现Ajax跨域请求json数据

    但为了实现数据交互,开发者常使用JSONP(JSON with Padding)这一技术来规避同源策略,实现在客户端跨域获取JSON数据。本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net...

    jsonp跨域请求实现示例

    ### JSONP请求实现原理 JSONP的核心在于`&lt;script&gt;`标签不受同源策略的限制,可以跨域加载和执行代码。在JSONP请求中,客户端首先定义一个回调函数,然后通过GET请求方式向服务器请求数据,服务器响应时,不是返回...

    ajax跨域访问

    #### 三、JSONP原理及实现 JSONP是一种利用`&lt;script&gt;`标签的src属性可以跨域加载的特性来实现跨域请求的技术。具体实现过程如下: 1. **前端构造请求**:客户端构造一个`&lt;script&gt;`标签,并设置其`src`属性为服务端...

    json和jsonp数据格式返回

    JSONP的工作原理** JSONP的核心在于,它不是一个数据格式,而是一种通过动态创建`&lt;script&gt;`标签来请求数据的方式。请求时,服务器返回一个JavaScript函数调用,该函数名由客户端通过查询参数传递,如`?callback=...

    jsonp跨域请求数据实现手机号码查询实例分析.docx

    #### JSONP 的基本原理 JSONP 是一种跨域数据交互的方案,它利用了`&lt;script&gt;`标签不受同源策略限制的特点来实现跨域数据请求。其工作流程大致如下: 1. **客户端**发起一个HTTP请求,该请求包含一个回调函数名。 2. ...

Global site tag (gtag.js) - Google Analytics