Ajax在前台的开发中使用越来越多,为前台用户体验带来了很大的提升。但是由于XMLHttpRequest的安全限制,普通的Ajax请求不能实现跨域访问,这主要是由于浏览器的浏览器的同源策略限制导致的。可是在有些场景下,我们非常希望通过Ajax的方式获取远程的数据,这样就不需要再通过后台进行数据的获取,会极大的减小开发量。
实现前台跨域访问,我们可以通过frame或者script标签的src来实现,这种方式可以进行远程数据的获取,但是这两种方式需要我们自己去监听不同的事件,处理起来比较复杂,程序员的好习惯就是lazy了,我们会寻找更加简单的解决方案。一种解决方案就是本文将要介绍的JSONP。
JSONP和JSON
由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通,而HTML 的 <script>
元素是一个例外。利用 <script>
元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的 JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。在知道JSONP是什么之后,我们要来看下怎么用JSONP。其实很多优秀的js库都已经实现了JSONP,而且很好的屏蔽了其技术细节,使用是就和普通的Ajax调用没有区别。我们来看下JQuery的实现方式和使用方式。
简单原理:
客户端:
<script type="text/javascript"> function test(data) { alert(data); } </script> <script type="text/javascript" src="http://******.aspx?callback=test"></script> 服务端: var fun = Request["callback"]; Response.Write(fun+"(\"你好世界\")");
JQuery的JSONP使用
先看一个简单的例子
<script>
$( 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){ $("<span></span>").text(i + ' '+ item.title).appendTo("#images"); $("#images").append("<br>"); }); } ); } ); </script>
上面这段代码和使用普通的Ajax调用没有太多的区别,唯一的区别就是请求的url是一个远程地址,而且在url里添加了一个jsoncallback=?这样一个参数,这个就是JSONP的关键所在了。JQuery会自动根据一个正则表达式去判断有没有XXX=?的这样一个参数,然后会在请求发出前自动把?替换成一个随机生成的函数名称(如果没有在ajaxSetting里设置的话),例如我们现在随机生成的函数名称为jQuery1010_100的函数名称,这是我们看下后台返回的格式:
jQuery1010_100l({ "title": "Recent Uploads tagged cat", "link": "http://www.flickr.com/photos/tags/cat/", "description": "", "modified": "2012-10-15T15:20:44Z", "generator": "http://www.flickr.com/", "items": [ { "title": "_MG_5430", "link": "http://www.flickr.com/photos/25642376@N07/8090499253/", "media": {"m":"http://farm9.staticflickr.com/8046/8090499253_e12dc0c2b1_m.jpg"}, "date_taken": "2012-10-12T19:59:37-08:00", "description": " <p><a href=\"http://www.flickr.com/people/25642376@N07/\">dmzkrsk<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/25642376@N07/8090499253/\" title=\"_MG_5430\"><img src=\"http://farm9.staticflickr.com/8046/8090499253_e12dc0c2b1_m.jpg\" width=\"240\" height=\"160\" alt=\"_MG_5430\" /><\/a><\/p> ", "published": "2012-10-15T15:20:44Z", "author": "nobody@flickr.com (dmzkrsk)", "author_id": "25642376@N07", "tags": "cat jupiter9 кузя" }, { "title": "_MG_5432", "link": "http://www.flickr.com/photos/25642376@N07/8090507680/", "media": {"m":"http://farm9.staticflickr.com/8468/8090507680_162cc352f6_m.jpg"}, "date_taken": "2012-10-12T20:00:59-08:00", "description": " <p><a href=\"http://www.flickr.com/people/25642376@N07/\">dmzkrsk<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/25642376@N07/8090507680/\" title=\"_MG_5432\"><img src=\"http://farm9.staticflickr.com/8468/8090507680_162cc352f6_m.jpg\" width=\"240\" height=\"160\" alt=\"_MG_5432\" /><\/a><\/p> ", "published": "2012-10-15T15:21:56Z", "author": "nobody@flickr.com (dmzkrsk)", "author_id": "25642376@N07", "tags": "dog cat catdog jupiter9 кузя чаппа" }]});
从返回值可以看到,后台应该返回一个合法的js函数调用,而函数名称就是JQuery自动生成的那个。那么这个函数时在哪儿生成的呢,和我们在getJSON里定义的callback是什么关系呢,JQuery实现的魔法在哪儿呢?
在jquery的源码里,我们看到这样一段
// Install callback
window[ jsonpCallback ] = function( response ) {
responseContainer = [ response ];
};
// Clean-up function
jqXHR.always(function() {
// Set callback back to previous value
window[ jsonpCallback ] = previous;
// Call if it was a function and we have a response
if ( responseContainer && jQuery.isFunction( previous ) ) {
window[ jsonpCallback ]( responseContainer[ 0 ] );
}
});
最终效果
0 Pink_aRT__UFONET_2012
1 yoga!
2 I love this pic
3 P1020870
4 P1020871
5 Monday morning
6 Sexy_Kızıl_77___UFONET_2012
7 hide and seek
8
9 Dexter
10 Nightlife
11
12 Dior & Daeron
13 Dior & Daeron
14 Dior & Daeron
15 Black cats for Halloween
16 Dior & Daeron
17 Dior & Daeron
18 kitten 2