`
gaozzsoft
  • 浏览: 412461 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

JSONP使用研究

 
阅读更多

JSONP使用研究


Part One:



什么是JSONP

　　JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

编辑本段如何使用JSONP

　　1. 在客户端调用提供JSONP支持的URL Service，获取JSONP格式数据。　　

比如客户想访问http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction　　

假设客户期望返回JSON数据：["customername1","customername2"]　　

那么真正返回到客户端的Script Tags: callbackFunction([“customername1","customername2"])　　

可能的调用方式：　　<script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction" />　　

2. 在客户端写callbackFunction函数的实现　　

<script type="text/javascript">　　

function onCustomerLoaded(result, methodName)　　

{　　var html = '<ul>';　　for(var i = 0; i < result.length; i++)　　{　　html += '<li>' + result[i] + '</li>';　　}　　html += '</ul>';　　document.getElementById('divCustomers').innerHTML = html;　　}　　</script>　　

3. 页面展示　　　<div id="divCustomers"></div>　　

4. 最终Page Code　　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">　　<html xmlns="http://www.w3.org/1999/xhtml" >　　<head>　　<title>Top Customers with Callback</title>　　</head>　　<body>　　<div id="divCustomers"></div>　　<script type="text/javascript">　　function onCustomerLoaded(result, methodName)　　{　　var html = '<ul>';　　for(var i = 0; i < result.length; i++)　　{　　html += '<li>' + result[i] + '</li>';　　}　　html += '</ul>';　　document.getElementById('divCustomers').innerHTML = html;　　}　　</script>　　<script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=onCustomerLoaded"></script>　　</body>　　</html>

编辑本段JSONP在JQuery中如何体现的

　　1. $.getJSON　　

<script>　　

$(document).ready(function(){　　$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",　　function(data){　　$.each(data.items, function(i,item){　　$("<img/>").attr("src", item.media.m).appendTo("#images");　　if ( i == 3 ) return false;　　});　　});　　});　　

</script>　　

jsoncallback=?，其中？会自动替换为function(data)函数。　　

2. $.ajax　　

$.ajax({　　

dataType: 'jsonp',　　

data: 'id=10',　　

jsonp: 'jsonp_callback',　　

url: 'http://www.yiwuku.com/getdata',　　

success: function () {　　// do stuff　　

},　　

});

编辑本段如何在服务器端实现对JSON支持

　　这仅仅需要把服务的JSON数据转换成想要的script tags的形式就可以了，格式可以自已定义，毕竟这是个非官方的协议。　　可参考：Implement JSONP in your Asp.net Application

　　注：Callback仅仅是JSONP的简单实现，可以根据具体需要实现更复杂的功能，比如可以在客户端动态集成更多的变量数据来完成分页功能。

===================================================

Part Two:



JSONP（JSON with Padding）是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。另一个解决这个问题的新方法是跨来源资源共享。

由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通，而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的 JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。



原理

为了理解这种模式的原理，先想像有一个回传 JSON 文件的 URL，而 JavaScript 程式可以用 XMLHttpRequest 跟这个 URL 要资料。假设我们的 URL 是http://server2.example.com/RetrieveUser?UserId=xxx 。假设小明的 UserId 是 1823，且当浏览器透过 URL 传小明的 UserId，也就是抓取http://server2.example.com/RetrieveUser?UserId=1823 ，得到：

   {"Name": "小明", "Id" : 1823, "Rank": 7}

这个 JSON 资料可能是依据传过去 URL 的查询参数动态产生的。


这个时候，把 <script> 元素的 src 属性设成一个回传 JSON 的 URL 是可以想像的，这也代表从 HTML 页面透过 script 元素抓取 JSON 是可能的。

然而，一份 JSON 文件并不是一个 JavaScript 程式。为了让浏览器可以在 <script> 元素执行，从 src 里 URL 回传的必须是可执行的 JavaScript。在 JSONP 的使用模式里，该 URL 回传的是由函数呼叫包起来的动态生成 JSON，这就是JSONP 的“填充（padding）”或是“前辍（prefix）”的由来。

惯例上浏览器提供回调函数的名称当作送至服务器的请求中命名查询参数的一部份，例如：

 <script type="text/javascript"
         src="http://server2.example.com/RetrieveUser?UserId=1823&jsonp=parseResponse">
 </script>

服务器会在传给浏览器前将 JSON 回应用这个前辍（或称作填充）包起来。浏览器得到的回应已不是单纯的资料叙述而是一个脚本。在本例中，浏览器得到的是：

   parseResponse({"Name": "Cheeso", "Id" : 1823, "Rank": 7})

[编辑]填充

虽然这个填充（前辍）“通常”是浏览器执行背景中定义的某个回调函数，它也可以是变量赋值、if 叙述或者是其他 JavaScript 叙述。JSONP 要求（也就是使用 JSONP 模式的请求）的回应不是 JSON 也不被当作 JSON 解析——回传内容可以是任意的运算式，甚至不需要有任何的 JSON，不过惯例上填充部份还是会触发函数呼叫的一小段 JavaScript 片段，而这个函数呼叫是作用在 JSON 格式的资料上的。

另一种说法—典型的 JSONP 就是把既有的 JSON API 用函数呼叫包起来以达到跨域存取的解法。

[编辑]Script 元素“注入”

为了要启动一个 JSONP 呼叫（或者说，使用这个模式），你需要一个 script 元素。因此，浏览器必须为每一个 JSONP 要求加（或是重用）一个新的、有所需 src 值的 <script> 元素到 HTML DOM 里—或者说是“注入”这个元素。浏览器执行该元素，抓取 src 里的 URL，并执行回传的 JSON。

也因为这样，JSON 被称作是一种“让使用者利用 script 元素注入的方式绕开同源策略”的方法。

[编辑]安全问题

使用远端网站的 script 标签会让远端网站得以注入任何的内容至网站里。如果远端的网站有 JavaScript 注入漏洞，原来的网站也会受到影响。

现在有一个正在进行计划在定义所谓的 JSON-P 严格安全子集，使浏览器可以对 MIME 类别是“application/json-p”请求做强制处理。如果回应不能被解析为严格的 JSON-P，浏览器可以丢出一个错误或忽略整个回应。

[编辑]跨网站的伪造要求

粗略的 JSONP 部署很容易受到跨网站的伪造要求（CSRF/XSRF）的攻击[1]。因为 HTML <script> 标签在浏览器里不遵守同源策略，恶意网页可以要求并取得属于其他网站的 JSON 资料。当使用者正登入那个其他网站时，上述状况使得该恶意网站得以在恶意网站的环境下操作该 JSON 资料，可能泄漏使用者的密码或是其他敏感资料。

只有在该 JSON 资料含有不该泄漏给第三方的隐密资料，且服务器仅靠浏览器的同源策略阻挡不正常要求的时候这才会是问题。若服务器自己决定要求的专有性，并只在要求正常的情况下输出资料则没有问题。只靠 Cookie 并不够决定要求是合法的，这很容易受到跨网站的伪造要求攻击。

[编辑]历史

2005 年夏天，乔治·詹姆提（George Jempty）建议在 JSON 前面选择性的加上变量赋值 [2][3]。鲍勃·伊波利托（Bob Ippolito）于 2005 年 12 月提出了 JSONP 最原始的提案，其中填充部份已经是回调函数[4]，而现在已有很多 Web 2.0 应用程式使用这份提案，像是 Dojo Toolki 应用程式、Google Web Toolkit 应用程式[5]与 Web 服务。

=================================================================

Part Three:

 

使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup

 

 

简介

Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，它可将来自多个地方的内容集成为单一 Web 应用程序。

不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。如果能控制数据驻留的远程服务器并且每个请求都前往同一域，就可以避免这些安全错误。但是，如果仅停留在自己的服务器上，Web 应用程序还有什么用处呢？如果需要从多个第三方服务器收集数据时，又该怎么办？

理解同源策略限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 Netscape Navigator 2.0 版本开始就存在。

克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据，并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用，但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域，并且使用 GET 请求获取任何第三方资源。不过，获取资源后，框架中的内容会受到同源策略的限制。

克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。幸运的是，通过添加 JavaScript Object Notation (JSON) 可以改进该技术。

JSON 和 JSONP

JSON 是用于在浏览器和服务器之间交换信息的轻量级数据格式（与 XML 相比）。JOSON 依赖于 JavaScript 开发人员，因为它是 JavaScript 对象的字符串表示。例如，假设有一个含两个属性的 ticker 对象：symbol 和 price。这是在 JavaScript 中定义 ticker 对象的方式：

var ticker = {symbol: 'IBM', price: 91.42};


并且这是它的 JSON 表示方式：

{symbol: 'IBM', price: 91.42}


从 参考资料 查找更多有关 JSON 和将其作为数据内部交换格式的信息。清单 1 定义了一个 JavaScript 函数，调用该函数时会显示 IBM 的股价。（我们没有详细介绍如何将该函数添加到 Web 页面）。


清单 1. 定义 showPrice 函数

function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}


可以将 JSON 数据作为参数传递，以调用该函数：

showPrice({symbol: 'IBM', price: 91.42}); // alerts: Symbol: IBM, Price: 91.42


现在准备将这两个步骤包含到 Web 页面，如清单 2 所示。


清单 2. 在 Web 页面中包含 showPrice 函数和参数

<script type="text/javascript">
function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
</script>
<script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script>


加载页面后，应该看如图 1 所示的警告。


图 1. IBM ticker
IBM ticker 

至此，本文已展示了如何将静态 JSON 数据作为参数调用 JavaScript 函数。不过，通过在函数调用中动态包装 JSON 数据可以用动态数据调用函数，这是一种动态 JavaScript 插入的技术。要查看其效果，将下面一行放入名为 ticker.js 的独立 JavaScript 文件中。

showPrice({symbol: 'IBM', price: 91.42});


现在改变 Web 页面中的脚本，使其和清单 3 一样。


清单 3. 动态 JavaScript 插入代码

<script type="text/javascript">
// This is our function to be called with JSON data
function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
var url = “ticker.js”; // URL of the external script
// this shows dynamic script insertion
var script = document.createElement('script');
script.setAttribute('src', url);

// load the script
document.getElementsByTagName('head')[0].appendChild(script); 
</script>


在清单 3 所示的例子中，动态插入的 JavaScript 代码位于 ticker.js 文件中，它将真正的 JSON 数据作为参数调用 showPrice()函数。

前面已经提到，同源策略不阻止将动态脚本元素插入文档中。也就是说，可以动态插入来自不同域的 JavaScript，并且这些域都携带 JSON 数据。这其实是真正的 JSONP（JSON with Padding）：打包在函数调用中的 JSON 数据。注意，为了完成该操作，Web 页面必须在插入时具有已经定义好的回调函数，也就是我们例子中的 showPrice()。

不过，所谓的 JSONP 服务（或 Remote JSON Service）是一种带有附加功能的 Web 服务，该功能支持在特定于用户的函数调用中打包返回的 JSON 数据。这种方法依赖于接受回调函数名作为请求参数的远程服务。然后该服务生成对该函数的调用，将 JSON 数据作为参数传递，在到达客户端时将其插入 Web 页面并开始执行。

回页首

jQuery 的 JSONP 支持

从 1.2 版本开始，jQuery 拥有对 JSONP 回调的本地支持。如果指定了 JSONP 回调，就可以加载位于另一个域的 JSON 数据，回调的语法为：url?callback=?。

jQuery 自动将 ? 替换为要调用的生成函数名。清单 4 显示了该代码。


清单 4. 使用 JSONP 回调

jQuery.getJSON(url+"&callback=?", function(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
});


为此，jQuery 将一个全局函数附加到插入脚本时需要调用的窗口对象。另外，jQuery 也能优化非跨域调用。如果向同一个域发出请求，jQuery 就将其转化为普通 Ajax 请求。

使用 JSONP 支持的示例服务

在上一个例子中，使用了静态文件（ticker.js）将 JavaScript 动态插入到 Web 页面中。尽管返回了 JSONP 回复，但它不允许您在 URL 中定义回调函数名。这不是 JSONP 服务。因此，如何才能将其转换为真正的 JSONP 服务呢？可使用的方法很多。这里我们将分别使用 PHP 和 Java 展示两个示例。

首先，假设您的服务在所请求的 URL 中接受了一个名为 callback 的参数。（参数名不重要，但是客户和服务器必须都同意该名称）。另外假设向服务发送的请求是这样的：

http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=showPrice


在这种情况下，symbol 是表示请求 ticker symbol 的请求参数，而 callback 是 Web 应用程序的回调函数的名称。使用清单 5 所示的代码可以通过 jQuery 的 JSONP 支持调用该服务。


清单 5. 调用回调服务

jQuery.getJSON("http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=?", 
function(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
});


注意，我们使用 ? 作为回调函数名，而非真实的函数名。因为 jQuery 会用生成的函数名替换 ?。所以您不用定义类似于 showPrice()的函数。

清单 6 显示了用 PHP 实现的 JSONP 服务的一段代码。


清单 6. 用 PHP 实现的 JSONP 服务的代码片段

$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"});


清单 7 显示了具有同样功能的 Java™ Servlet 方法。


清单 7. 用 Java servlet 实现的 JSONP 服务

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
  throws ServletException, IOException {
	String jsonData = getDataAsJson(req.getParameter("symbol"));
	String output = req.getParameter("callback") + "(" + jsonData + ");";

	resp.setContentType("text/javascript");
          
	PrintWriter out = resp.getWriter();
	out.println(output);
	// prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"});
}


那么，如果要构建 mashup 应该怎么办，是从第三方服务器收集内容，并在单一的 Web 页面中显示它们吗？答案很简单：您必须使用第三方 JSONP 服务。这种服务并不少。

现成的 JSONP 服务

知道如何使用 JSONP 之后，可以开始使用一些现成的 JSONP Web 服务来构建应用程序和 mashup。下面为接下来的开发项目做准备。（提示：您可以复制特定的 URL 并将其粘贴到浏览器的地址栏，以检查生成的 JSONP 响应）。

Digg API：来自 Digg 的头条新闻：

http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript
&callback=?


Geonames API：邮编的位置信息：

http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?


Flickr API：来自 Flickr 的最新猫图片：

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any
&format=json&jsoncallback=?


Yahoo Local Search API：在邮编为 10504 的地区搜索比萨：

http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza
&zip=10504&results=2&output=json&callback=?


回页首

重要提示

JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。

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

回页首

结束语

在该系列的第一篇文章中，我们讲解了如何结合使用 JSONP 和 jQuery 快速构建强大的 mashup。主要主题包括：

  • 浏览器同源策略的限制以及解决办法
  • 作为一种有效的跨域通信技术，JSONP 能够绕过当前浏览器的同源策略限制
  • JSONP 使 Web 应用程序开发人员能够快速构建 mashup
  • 示例 JSONP 服务及其使用：Ticker 服务

本系列的下一篇文章将介绍 Yahoo! 查询语言（YQL），这种单端点 JSONP 服务允许您跨 Web 查询、过滤和合并数据。最后还使用 YQL 和 jQuery 构建 mashup 应用程序。









 

分享到：
| FusionCharts Free简介(FCF)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics