Dojo JSONP 入门

水深无声 2022-04-17 06:17 181阅读 0赞

JSON with Padding (JSONP)现在已经成为浏览器端跨域访问资源的常用解决方法。在本教程中，将会介绍JSONP是什么，并告诉你如何使用它来跨域获取数据。

难度：初学者

Dojo版本：1.6

作者：Dustin Machi

原文：[Getting Jiggy with JSONP][]

**开始上手**

Dojo内置的Ajax模块提供了一套简单而强大的接口来动态获取资源。然而，浏览器的跨域安全策略会限制你使用XHR请求另一个域下的资源。这该怎么办呢？越来越多的现代浏览器开始遵循W3C的[Cross-Origin Resource Sharing][] 规约来提供跨域请求的能力，但是，并不是所有浏览器都这么做了，并且大量已有的服务还没有从该规约中受益。

解决跨域交互的方法之一就是使用JSONP(JSON with Padding）。 Bob Inppolito [早在2005年便提出了JSONP技术][2005_JSONP]，如今，Google,Twitter，Facebook等公司都提供JSONP API来访问其服务。Dojo的dojo.io.script模块提供了一套无缝的接口来访问JSONP资源，让你免去繁复的JSONP使用细节。

那到底什么是JSONP技术呢？和XHR不同的是，浏览器不会阻止从别的域加载脚本。使用JSONP会先动态地向叶面注入一个<script>标签元素，然后执行插入的脚本。其中的技巧在于在url中提供查询参数，并将其返回的JSON结果包裹在一个回调函数中。例如：一个请求发送到endpoint?q=dojo&callback=callme，其返回值为：

callme(\{id: "dojo", some: "parameter"\})  
之后浏览器将会解释执行这段代码，也就是说它会调用一个名为callme的函数，并将返回的数据传给这个函数作为参数。本地的应用程序需要具体实现callme方法来接受传入的数据。需要注意的是，使用JSONP本质是在执行一段来自第三方的脚本，这也意味着你应该确保你的应用程序使用的的第三方服务是安全的。但这并不是说JSONP不好或是应该被避免使用，仅仅它应该被用在与可信任的第三方服务的交互上。

！使用JSONP来访问跨域资源还会减少你的应用程序Web服务器的连接竞争。浏览器会限制同一时刻连接到某一个服务器的请求数。最坏的情况是IE6，它限制同一时刻只能有2个连接。而在其它新一点的浏览器中，这个限制是6-8个连接。在跨域访问一个资源时，它不会被算在访问你的服务器的总连接数中。

dojo.io.script将创建script元素和回调函数的过程进行了自动化，并提供了Dojo中你所熟悉的Deferred接口。使用这一切只需加载dojo.io.script模块：

dojo.require("dojo.io.script")

//include the script module dojo.require("dojo.io.script"); //wait for the page and modules to be ready... dojo.ready(function()\{ //Make a request to search twitter for \#dojo dojo.io.script.get(\{ url: "http://search.twitter.com/search.json", content: \{q: "\#dojo"\}, callbackParamName: "callback" \}); \});  
上述代码和你通常看到的dojo.xhr的使用方法非常相似。其中比较特别的可能就是callbackParamName；这个属性告诉Dojo哪一个参数会被用来指定回调函数名（它并不是回调函数名本身）。这个参数对于不同服务也有所不同。

之后，你就可以像处理其他方式返回的内容一样来处理返回结果。

上面的代码会获取最新的关于dojo的tweet，现在我们来添加一些代码将获取的内容显示出来。

dojo.ready(function()\{ //first do the io script request dojo.io.script.get(\{ url: "http://search.twitter.com/search.json", content: \{q: "\#dojo"\}, callbackParamName: "callback" \}).then(function(data)\{ //Loop through the data results and create an array containing //each tweet's text wrapped in an LI var tweets=\[\]; dojo.forEach(data.results, function(item,idx)\{ tweets.push("<li>" + item.text + "</li>"); \}); //join the array of LIs together and make them the //innerHTML of the content holding node. dojo.byId("tweets").innerHTML = tweets.join(''); \}); \});  
这样就差不多了，为了让它更酷一点，我们让程序一次一条地逐个添加tweet：

dojo.require("dojo.io.script"); dojo.ready(function()\{ //make the request just as before dojo.io.script.get(\{ url: "http://search.twitter.com/search.json", callbackParamName: "callback", content: \{q: "\#dojo"\} \}).then(function(data)\{ //we're only interested in data.results, so strip it off and return it return data.results; \}).then(function(results)\{ //create an interval timer that will remove the first item in //the array and render it. Stop the loop when the results have been //exhausted. var handle = setInterval(function()\{ dojo.create("li", \{innerHTML: results.shift().text\},"tweets"); if (results.length < 1)\{ clearInterval(handle); \} \}, 200); \}); \});  
**[查看示例][Link 1]**

！JSONP的机制（动态插入<script>标签）使得它无法像标准Ajax请求一样处理异常。浏览器不会在脚本加载失败（404, 500等异常）时告知应用程序，所以dojo.io.script回调函数也不会在这种情况下捕捉到任何信号。因此为了让你的应用程序可以继续运行下去而不是出错了还在那里傻等，你可以为dojo.io.script请求设置一个timeout属性。如果回调函数在时间到之前还没有被处理，Deferred对象会被关闭，从而使得你的应用程序继续运行下去。

**结论**

JSONP使得我们可以访问许多丰富的资源来结合你自己的应用程序创造出有趣、新奇的东西。大多数主流Web应用都提供了访问他们服务的JSONP接口。通过JSONP来访问子域名下的资源也可以为有连接数限制的浏览器减少压力。与dojo.xhr类似的API将使你能很快上手使用dojo.io.script来访问异步资源。

如果你想要一些练习，你可以尝试使用Flickr JSON API并将返回的图片结果显示出来。为了帮助你开始熟悉，这里是一个返回Dojo Toolkit相关图片的Flickr url：

[http://api.flickr.com/services/feeds/photos\_public.gne?tags=dojotoolkit&lang=en-us&format=json][http_api.flickr.com_services_feeds_photos_public.gne_tags_dojotoolkit_lang_en-us_format_json]

[Getting Jiggy with JSONP]: http://dojotoolkit.org/documentation/tutorials/1.6/jsonp/
[Cross-Origin Resource Sharing]: http://www.w3.org/TR/cors/
[2005_JSONP]: http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/
[Link 1]: http://dojotoolkit.org/documentation/tutorials/1.6/jsonp/demo/demo.html
[http_api.flickr.com_services_feeds_photos_public.gne_tags_dojotoolkit_lang_en-us_format_json]: http://api.flickr.com/services/feeds/photos_public.gne?tags=dojotoolkit&lang=en-us&format=json