读书人

dojo1.7通译 ajax跨域请求(Getting

发布时间: 2012-07-01 13:15:00 作者: rapoo

dojo1.7翻译 ajax跨域请求(Getting Jiggy with JSONP)

原文地址:http://dojotoolkit.org/documentation/tutorials/1.7/jsonp/

难度:初级

版本:1.7

?

JSONP已经成为了一种跨用请求的通过技术了。在这个教程中,你可以学到如何使用JSONP来进行跨域请求。

?

开始教程

dojo的基础ajax模块已经提供了简单有效的动态ajax功能,但是,并不能使用dojo的xhr进行安全的跨域请求,怎么办?大多数的浏览器都实现了W3C组织的Cross-Origin Resource Sharing的规范来支持跨域请求的功能,但不是所有的浏览器都支持的。有方法解决,我们可以使用JSONP技术来支持跨域的请求。

?

Bob Ippolito在2005年就发表过文章来介绍JSOPN技术,现在已经包括有Google,Twitter,Facebook等都提供了这种服务的全部API,DOJO的dojo/io/script模块就无缝的支持了读取这种服务的功能,而且使用起来非常的简单。

?

那到底什么是JSONP技术呢?不像XHR只能在一个域里来请求.JSONP通过动态的加载<script>标签来发起请求,并在有返回值时执行回调函数。如一个请求为endpoint?q=dojo&callback=callme?那么他的返回值可能是callme({id: "dojo", some: "parameter"})?

当浏览器执行到这个脚本时,它就会调用callme()这个方法,并把相应的参数传递过去。当本地的程序有定义callme这个方法时,将会接收这个方法。注意,这个函数是从第三方服务器中传过来的并执行的,所以你要确认这个第三个的合法和安全性。这不是让你禁用JSONP,而是让你只和信任的服务进行请求。

?

使用JSONP进行跨域请求可以降低浏览器与服务器的连接量。浏览器限制在同一时间对服务器发出的请求量。最坏的情况,在IE6上同时会有两个连接,但在最新的浏览器时会同时有6到8个连接。但使用跨域请求资源时,它将不再计算你同时连到服务器中的连接数

?

dojo/io/script 将会自动创建脚本元素和执行回调函数,并且也是使用dojo是常用的迟延技术

?

?

?代码很漂亮,我们再来加一点动画的效果

?

require(["dojo/io/script","dojo/domConstruct", "dojo/domReady!"], function(ioScript, domConstruct){     //make the request just as before    ioScript.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(){            domConstruct.create("li", {innerHTML: results.shift().text},"tweets");            if (results.length < 1){                clearInterval(handle);            }        }, 200);    });});

?

?

通过JSONP来动态生成脚本的有一个缺点,它不能返回错误信息。如果浏览器的请求遇到了404或500错误,那么dojo/io/script的回调函数将没有任何反应。为了防止你的空等待,你可以设置一个请求时间timeout。如果请求没有及时返回信息则被timeout打断。

?

结论

JSONP可以让你能通过访问不同的服务器而获得大量丰富的资源。大多数服务提供商都提供了大量的JSONP服务。及时是在同一个项目中,你也可以通过使用JSONP访问而组成多个子域,以提供更强大的访问连接功能。

读书人网 >JavaScript

热点推荐