ajax式的jsonp

json是一种轻量级的数据交换格式，你可以把它理解成没有方法的，键名要加引号的对象。

jsonp是一种跨域传输数据的解决方案，利用src属性的跨域能力来拉取数据

建两个文件夹a,b来模拟两台服务器
a里建a.js，代码如下：
1 alert("i am a server")

b里建index.html,代码如下：

<!DOCTYPE html><html><head><title>bserver</title></head><body><script type="text/javascript" src="http://localhost:3000/a.js"></script></body></html>

启动这两台服务器，打开b里的index即可弹出i am a server

平常从cdn引入jQuery，bootstrap，甚至图片链接，均是通过src跨域拉取文件的。

如果本地声明了一个函数，而远程服务器上是一个函数调用呢，挂了一串数据的那种调用。那么拉取过来之后就直接执行了该函数。
aserver/a.js

aserver({a:1,b:2});

bserver/index.html

<!DOCTYPE html>
<html>
<head>
<title>bserver</title>
</head>
<body>
<script type="text/javascript">
// 定义了一个函数
function aserver(data) {
alert(data.a +'+'+data.b)
}
</script>
<script type="text/javascript" src="http://localhost:3000/a.js"></script>
</body>
</html>

如果动态定义了script标签里的src url，同后端约定了回掉函数callback的函数名，还挂载了一段查询数据呢？这也是可以实现的。

jquery里的ajax也封装了jsonp的方法。如下代码是抓取qq音乐的数据。

$.ajax({
type: "get",
url: "https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg",
data:{
g_tk:5381,
loginUin:0,
hostUin:0,
format:'jsonp',
inCharset:'utf8',
outCharset:'utf-8',
notice:0,
platform:'yqq',
jsonpCallback:"hotSearchKeysmod_top_search",
needNewCode:0
},//挂载到链接上的数据。
dataType: "jsonp",
cache:true,//消去链接上的时间戳以允许缓存
jsonp: "callback",//传给后端用来获取jsonp回掉函数名的参数名，一般默认是callback。
jsonpCallback:"hotSearchKeysmod_top_search",//和后端约定的函数名
success: function(json){
//json即是我们需要的数据。
alert(JSON.stringify(json.data))
},
error: function(){
alert('fail');
}
});

简单来说，jsonp是利用了script的src能够跨域获取数据的能力，用前后端约定的函数来包裹数据，前端声明，后端调用，来达到获取数据的目的。