JSONP的原理

As we know，浏览器的同源策略，不允许访问非同源页面。ajax中，不允许请求非同源的URL，JSONP就是来解决跨域请求问题的，实现方法：

script标签src属性中的链接可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式数据，而是返回一段调用某个函数的js代码，在src中进行调用，这样实现跨域调用。

可以动态的给页面添加一个script标签，src指向服务器（php）脚本执行返回的js代码，所以JSONP将访问跨域请求变成了执行远程的js代码，服务端不再返回JSON格式的数据，而是返回一段将JSON数据作为传入参数的函数执行代码。
所以JSONP只能解决GET请求的跨域请求。

举个栗子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    var localHandler = function(data){
        alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
    };
    </script>
    <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
 
</body>
</html>

而服务器的remote.js文件内容是：

localHandler({"result":"我是远程js带来的数据"});

将response写在callback函数的参数里面，页面动态执行js文件时候直接就执行了这句代码。

其实原理就是：动态生成js脚本是服务端返回的，服务端给返回的js脚本里面的callback函数传参，一般就是开发者自己在GET请求服务器代码时候加个callback参数告诉服务器我需要执行哪个函数，服务器就返回哪个函数的传参调用。

那么，ajax也是请求一个url，然后响应服务器的response然后执行callback函数，跟JSONP有什么不同过呢？

首先，本质上面的不同，Ajax的核心是通过XHR对象获取响应，而jsonp是通过动态添加一段js的返回函数自执行。

【完】

三乘五性皆醒悟，方知自有珍珠库。