浅析json与jsonp区别及通过ajax获得json数据后格式的转换

<!--京东商品图片-->
<img src="/UploadFiles/2021-04-02/56615e00N7a475ee6.jpg">

看来直接获取json是行不通了，那有没有其他方法能拿到数据呢？于是乎jsonp就这样被聪明的开发者给发现了，为什么说是发现而不是发明呢，因为并没有涉及到任何新技术，就像发现ajax一样。


jsonp原理是这样的，网站A需要获取网站B的数据，网站B说我给你们一个方法，【1. 你们使用<script src="/UploadFiles/2021-04-02/open.js">

open.js内容




foo({"name":"B","age":23});　　//为什么不直接写成json数据{"name":"B","age":23}呢，原因很简单，在js文件总得合乎js语法吧
//这也是为什么协议中明确规定处理数据的方法名必须命名为foo，因为B网站是在假定请求者的脚本中已经定义了数据处理方法foo的情况下返回数据；
//不然就会报foo is not defined错误


网站A脚本须有




function foo(data){
console.log(data);
//ToDo.. 
} 


啊！虽然拐了个弯，但数据总算得到了，网站A，网站B都非常高兴，那么问题又来了，网站C说也需要获取网站B的数据，网站B把协议甩给它，网站C拿过来一看，草泥马啊，foo这个名字已经在自己的脚本文件的6868行用过了，而且已经使用在脚本的各个角落，批量替换会导致很多潜在bug啊，网站B情急之下决定把foo改成fool，网站A立马蹦起来，因为自己的网站已经在很多地方使用foo引用了数据。


为了避免上面情况发生，那些牛X哄哄的开发者使用了动态生成js文件的方法，php版本如下：


open.php


<"name":"B","age":23}'; //待返回的json数据
echo $jsonCallback . "(" . $jsonData . ")"; //输出jsonp格式的数据，即一行函数调用语句
"http://www.B.com/open.php"></script>来请求数据，不需要修改任何变量，返回给A的脚本文件内容是： 




foo({"name":"B","age":23}); //所谓的jsonp，就是一句函数调用，数据都被包裹传递到参数中了，千万别穿个马甲就不认识了 
网站C就用<script src="/UploadFiles/2021-04-02/open.php">

Problem Solved，大家都取到了期望的数据，并且避免了命名冲突。


jsonp全名叫做json with padding，很形象，就是把json对象用符合js语法的形式包裹起来以使其它网站可以请求得到，也就是将json数据封装成js文件；


json是理想的数据交换格式，但没办法跨域直接获取，于是就将json包裹(padding)在一个合法的js语句中作为js文件传过去。这就是json和jsonp的区别，json是想要的东西，jsonp是达到这个目的而普遍采用的一种方法，当然最终获得和处理的还是json。所以说json是目的，jsonp只是手段。json总会用到，而jsonp只有在跨域获取数据才会用到。


理解了json和jsonp的区别之后，其实ajax里的跨域获取数据就很好理解和实现了，同源时候并没有什么特别的，直接取就行，跨域时候需要拐个弯来达到目的。


附上jquery中ajax请求json数据实例：


（同源）：




$.ajax({
url:"persons.json",
success:function(data){
　　　　console.log(data);
　　 　 //ToDo..
　 }
}); 


（跨域）：




$.ajax({
url:"http://www.B.com/open.php",
dataType:"jsonp",
success:function(data){
console.log(data);
//ToDo..
}
}); 


jquery已把jsonp封装进ajax，很合理，因为毕竟绝大多数的jsonp请求都是ajax，关于jquery的ajax具体用法请自行百度，另外要注意的一点就是不同的网站提供的数据接口的$_REQUEST ['callback']中不一定绝对是callback也可能是cb,cbk等，具体使用时务必阅读服务端提供的有关接口使用的详细文档。
下面给大家介绍下由“夜未央0906”写的通过ajax获得json数据后格式的转换
在有些情况下获取到的json数据可能是string类型的，需要把其格式化为json对象才方便解析。


a）原生js通过ajax获取到的json


　　此时返回的数据默认是string型的，所以需要用eval()函数将其转化为json对象。需要注意函数内字符串的格式：eval(“(” + data+“)”)，因为返回的string是在{}里面的，eval会将大括号识别为js代码块开始和结束的标志，所以必须加上（），将其强制转化为对象来处理。


b）jquery获取


　　1：通过ajax()异步请求并把type设置为json，返回的就是json对象。


　　2：通过用与ajax()等价的$.getJSON(url,data1,function(data2,status,xhr){//......})方法获取的也是json对象。其中data1为连同请求发送的数据，data2为服务器返回的数据即json对象。



            
            上一篇：Django框架利用ajax实现批量导入数据功能

            下一篇：浅谈Ajax技术实现页面无刷新