今天看面试题看到了JSONP的实现，而且上次面试也被问到了，虽然回答出来了，但还是需要整理一下。
本文先介绍JSONP的实现原理，介绍几个例子。关于JSON是什么，我会在下一篇介绍。
WHY
Ajax直接请求一般文件存在跨域无权限访问的问题，而我们发现凡是拥有src属性的标签都拥有跨域能力，比如<script>、<img>、<iframe>,于是可以判断，可以利用这些标签跨域访问数据，也就是在远程服务器上设法把数据装进js格式的文件里，供客户端进一步处理。
HOW
JSONP实现原理：
1、首先在客户端注册一个callback（也就是写一个回调函数），然后把callback的名字传递给服务器
2、服务器先生成json数据，然后以js语法的方式，生成一个函数，函数名就是callback传递的回调函数名
3、然后服务器将json数据直接以入参的方式，放到function中，这样就生成了一段js语法的文档，返回给客户端。
4、客户端浏览器，解析script标签，并执行返回的js文件，动态执行回调函数。
Examples
下面我们逐步解释这个原理：
静态方式：
1、现在远程服务器remoteserver.com根目录下有一个remote.js文件代码如下（服务端代码）：
alert('我是远程文件’);
本地服务器localserver.com下有个jsonp.html页面代码如下（客户端代码）：
<!DOCTYPE html>
<html>
<head>
<title>"jsonp的实现方式"</title>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
</html>
毫无疑问，页面会弹出一个提示窗，显示“我是远程文件”。
2、现在我们在jsonp.html里定义一个函数，然后从远程remote.js中传入数据进行调用。
<!DOCTYPE html>
<html>
<head>
<title>"jsonp的实现方式"</title>
<script type="text/javascript">
function jsonCallback(data){
alert(data.result);
};
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
</html>
remote.js文件代码如下：
jsonCallback({“result”:”我是远程js带来的数据”})；
运行之后，页面成功弹出提示窗口。这样跨域远程获取数据的目的实现了，但是又有一个问题出现了，jsonp的服务者有很多服务对象，远程js怎么知道它应该调用的本地函数叫什么名字呢？
3、只要服务端提供的js脚本是动态生成的就行了，这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码，请你给我”，于是服务器就可以按照客户端的需求来生成js脚本并响应了。
动态方式
<!DOCTYPE html>
<html>
<head>
<title>"jsonp的实现方式"</title>
<script type="text/javascript"></script>
function jsonCallback(data){
alert(data.result);
}
var url="http://remoteserver.com?callback=“jsonCallback";
var script=document.createElement("script");
script.setAttibute('src',url);
document.getElementByTagName('head')[0].appendChild("script");
</head>
</html>
这样就可以了！！
是不是很简单。
参考：
http://kb.cnblogs.com/page/139725/
