非常酷的JSONP <15>

JSONP(JSON with Padding) 已经成为浏览器端跨域访问资源中常见的技术。在这个教程中，你将学习到什么是JSONP,以及如和使用它检索不同域的信息。

开始

Dojo 常用的AJAX 功能提供了一个简单但又非常强大的接口来动态资源访问。可是由于浏览器的跨域安全的限制，阻止你通过XHR请求其它的域。那该怎么办？现代浏览器遵循了W3C 下的 Cross-Origin Resource Sharing规范，实现了跨域访问的能力。但并不是所有的浏览器都有效，并且大量现有的业务也不需要采用这个规范。

JSONP(JSON with padding) 可以实现跨域通信。 Bob Ippolito 早在2005年就提出了 JSONP 技术,Google,Github,Facebook的现有服务都可以通过API来访问。 Dojo的 dojo/request/script 模块（1.8引入，替代之前的 dojo/io/script) 可以轻易访问 JSONP资源，不需要麻烦的设置。

JSONP是什么技术呢？不像XHR,浏览器不会阻止角本的跨域加载。 JSONP 利用在网页中动态插入一个<script>元素，并且设置 URL为我们想要的资源地址。在URL的查询字符串里传递相关的参数，它会返回一个我们请求的数据动态响应，数据是Javascript格式。例如，一个请求为 endpoint?q=dojo&callback=callme. 它会返回如下内容：

callme({id: "dojo",some: "parameter"})

当浏览器在角本中执行这段代码时，它会调用callme()方法 - 并一起将数据传递给calllme方法。在本地的应用中，已经定义了callme访问，它会接收到这些数据。注意这里本质上是在第三方平台执行的角本。由于你通过第三方服务执行的角本，意味着你是信任这个第三方服务。

！* 通过JSONP可以访问跨域资源，还可以减少你应用程序服务器的连接请求。浏览器限制了同一时间到一个服务器的请求数量。最差的IE6只能有两个并发连接。新的浏览器一般默认是6-8个连接。当访问跨域的资源，它不会限制连接到你服务器请求的总数。

dojo/request/script 会自动创建script 元素和callback 方法。并且向你提供熟悉的Deferred接口，

//include the script modules
require(["dojo/request/script"],"dojo/dom-construct","dojo/dom","dojo/_base/array","dojo/domready!"
],function(script,domConstruct,dom,arrayUtil){
        // wait for the page and modules to be ready...
        // Make a request to GitHub API for dojo pull requests
            script.get("https://api.github.com/repos/dojo/dojo/pulls",{
                jsonp: "callback"
        });
});

这段代码跟 dojo/request/xhr具有相同的模式，唯一添加的是jsonp; 这个属性告诉 Dojo 数据返回后调用的callback function（不是callback本身）。这个callback 函数是动态的。从这个观点上看，你可以像其它的响应一样对待。这段代码可以从Dojo Github 中检索到最新的pull请深圳市。让我们充实下上面的代码：

//first do the io script request
script.get("https://api.github.com/repos/dojo/dojo/pulls",{
    jsonp: "callback"
}).then(function(response){
    return response.data;
}).then(function(results){
    // Iterate through the response results and add them to the DOM
    var fragment = document.createDocumentFragment();
    arrayUtil.forEach(results,function(pull){
        var li = domConstruct.create("li",{},fragment);
        var link = domConstruct.create("a",{href: pull.url,innerHTML: pull.title},li);
    });
    domConstruct.place(fragment,dom.byId("pullrequests"));
});

查看示例

！* JSONP 的机制（动态插入一个<script>标签）不能像正常的Ajax请求那样处理错误。浏览器不会在角本发生加载错误(404,500等）时不会通知应用程序。因此 dojo/request/script 回调函数会不收到这种错误信号。为了使你的应用程序正常运行，而不是等待解本的返回，你可以在dojo/request/script 的 request中设置 timeout属性。如果回调函数在timout触发前没有完成， Deferred将会获得一个 rejected 状态，之后你就可以采用适合的方法来处理。

总结

JSONP让你能获得丰富的资源，然后把它们混合到你的应用程序。许多主流的web服务提供者提供了许多可用JSONP 访问的服务。甚至在单个的组织内部。通过JSONP来访问不同子域的服务，降低浏览器对连接到服务器的限制。和标准的dojo/request 使用一样，你可以儿得跨域的资源。

如果你想实践一样，你应该访问Flickr JSON API,并且显示结果图像，为了你的开始，这里有一个Flickr URL,它会返回 Dojo toolkit-tagged图像:
http://api.flickr.com/services/feeds/photos_public.gne?tags=dojotoolkit&lang=en-us&format=json

更多阅读

开始

总结

相关推荐