jsonp实现跨域ajax调用

     Ajax在前台的开发中使用越来越多，为前台用户体验带来了很大的提升。但是由于XMLHttpRequest的安全限制，普通的Ajax请求不能实现跨域访问，这主要是由于浏览器的浏览器的同源策略限制导致的。可是在有些场景下，我们非常希望通过Ajax的方式获取远程的数据，这样就不需要再通过后台进行数据的获取，会极大的减小开发量。

       实现前台跨域访问，我们可以通过frame或者script标签的src来实现，这种方式可以进行远程数据的获取，但是这两种方式需要我们自己去监听不同的事件，处理起来比较复杂，程序员的好习惯就是lazy了，我们会寻找更加简单的解决方案。一种解决方案就是本文将要介绍的JSONP。

 

JSONP和JSON

 

      JSONP维基百科的解释： JSONP （ JSON with Padding ） 是资料格式 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