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能够跨域获取数据的能力,用前后端约定的函数来包裹数据,前端声明,后端调用,来达到获取数据的目的。