非常酷的JSONP <15>

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

更多阅读

• Tutorial: Ajax with Dojo
  
• Dojo Toolkit Reference Guide: dojo/request/script
  
• Dojo Toolkit API Documentation: dojo/request/script
  
• Overcome security threats for Ajax applications