JSONP原理与实现

获取别人网站提供的数据,一直是很多网站所需要的。比如,某个游戏网站上的数据,优酷的视频信息等等。他们很多时候返回是json格式,但是你可以通过浏览器打开,一点问题都没有,但是想用诸如ajax请求打开,对不起 问题大了。你根本获取不到数据。

这时候我们就需要使用JSONP,这里给的demo没有使用AJAX,而是使用的javascript方式,有点邪恶.

首先我们先了解点知识:

1. JSONP定义

   JSONP是英文JSON with Padding的缩写，是一个非官方的协议。它允许在服务器端生成script tags返回至客户端，通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入，将server返回的response添加到页面实现特定功能。

2.JSONP由来

   要解释JSONP的来由，先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。 简而言之，就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互，这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。

    如何解决跨域访问呢？那就要借助浏览器的一个特性：尽管浏览器不允许页面中的脚本程序跨域读取数据，但却允许HTML引用跨域的资源，如图片，CSS和脚本程序。对于脚本程序的引用比较特殊，它被浏览器解析以后，就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件，一个简单的提示框：alert（“This is Victor！”）;。在A站点引用这个js，这个脚本就会在B站点的应用中执行，显示一个alert信息。由于站外脚本的引用是通过script tag来实现的，而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制（包括动态的创建script标签），这就可以实现通过调用站外程序对本地资源进行更改了。另外，通过

6

或jquery代码：

1 <code class="Brush string">"text/javascript"</code><code class="Brush plain">></code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>2</code></td> <td class="content"><code class="spaces"></code><code class="Brush plain">$.getJSON(</code><code class="Brush string">"http://localhost:8080/Jsonp/jsonp.jsp?callback=?"</code><code class="Brush plain">, </code><code class="Brush keyword">function</code><code class="Brush plain">(json){</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>3</code></td> <td class="content"><code class="spaces"></code><code class="Brush plain">alert(json[0].name);</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>4</code></td> <td class="content"><code class="spaces"></code><code class="Brush plain">});</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>5</code></td> <td class="content"><code class="Brush plain">

然后是jsonp.jsp代码：

1 <%
2 String callback = request.getParameter("callback");
3 out.print(callback+"([ { name:'John',age:'19'},{ name:'joe',age:'20'}] );");
4 out.print(callback);
5 %>

当然，后台可以用action或servlet等实现。

最后，只要是浏览器输入http://localhost:8080/Jsonp/test.jsp就会弹出John了。

转载于:https://www.cnblogs.com/lushijie/archive/2013/05/24/3311222.html