说到jsonp，你可能最先想到JSON；它还真和JSON有关系；
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
JSONP（JSON with Padding），我更倾向于把最后一个字母P理解为 protocol（协议，约定）；
JSON的优点：
1、基于纯文本，跨平台传递极其简单；
2、Javascript原生支持，后台语言几乎全部支持；
3、轻量级数据格式，占用字符数量极少，特别适合互联网传递；
4、可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的；
5、容易编写和解析，当然前提是你要知道数据结构；
JSON的缺点当然也有，但在作者看来实在是无关紧要的东西，所以不再单独说明。
有这么一个故事：
A男和B女居住在不同的国家A国和B国，在一次去C国旅行的途中相遇了，双方聊的比较Happy，旅行结束都回国了；但A男总是会想B女，想联系上B女，无奈当时没有留下B女的电话、邮箱、微信、QQ号码这些可以更加即时的联系方式，只是闲聊间知道B女地址，那就只能写信吧去C国也不太现实；于是就写信把自己的各种即时联系方式都写进去了，一封信寄出去了过了一段时间没有回音又写一封，就是没有收到C友的电话等任何回音；对方收到了没有呢，确定是收到了也看了。
这是为什么呢？C女不想搭理他呗（没有按A男指定的方式回调）！
JSONP就是这么一回事，你知道对方的调用地址，告诉对方你的回调函数名称是什么，但对方如果不配合，就是不调用你约定的回调函数名称，你调用多少次也没用，所以JSONP的关键还是要对方配合你才行。
js跨域交互实现原理
HTML <script> 标签，对就是它，世界因它而美好！
你可以使用这个标签加载任何其它可访问到的网站的js文件试试，我就不多说了；
跨域交互一：jQuery.getScript
这个例子比较简单易懂，使用固定的回调函数名称：fncallback
调用端，也可以说是客户端：
我是在本地测试，跑了多个Web服务，本地页面访问地址：:88/
网页中的JS代码如下：
<script type="text/javascript" src="https://www.jb51.net/jquery-1.10.2.min.js"></script> <script type="text/javascript"> //定义名称为“fncallback”的回调函数，参数接收JSON对象； function fncallback(data){ $(document.body).append("<hr />getScript ok!" + data.reqUrl); } //注册页面加载完成回调函数（匿名） $(document).ready(function(){ //使用getScript方法调用跨域脚本； $.getScript("https://localhost/test2.php"); }); </script>
效果：在页面尾部增加一条线，以及：getScript ok! ，后面紧跟被调用端返回的它接收到的请求地址：
getScript ok!/test2.php?_=1467261287339
后面为什么会多了个“?_=1467261287339”呢？
这是防止浏览器从缓存去加载这个URL地址的内容的！由jQuery自动添加；
被调用端，也可以说是服务端
服务端后台语言是PHP，通过Nginx代理的，端口为：80，所以访问地址是：
test2.php 文件的内容：
<?php echo "var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; echo "fncallback({\"reqUrl\": reqUrl });";
浏览器访问：
通过浏览器访问，自然没有后面的参数，除非你自己手动加上；
跨域交互二：jQuery.getJSON
调用端：
<script type="text/javascript"> //注册页面加载完成回调函数（匿名） $(document).ready(function(){ //使用getJSON方法调用跨域脚本；注册匿名回调函数 $.getJSON("http://localhost/test.php?callback=?", function(data){ $(document.body).append("<hr />getJSON ok!" + data.reqUrl); }); }); </script>
注意：我在请求的地址中添加了“?callback=?”，这是做什么用的呢？