? ? ?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?