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