json/jsonp
什么是JSON
前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式。
JSON的优点:
1、基于纯文本,跨平台传递极其简单;
2、js原生支持,后台语言几乎全部支持;
3、轻量级数据格式,占用字符数量极少,特别适合互联网传递;
4、可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易 识别的;
5、容易编写和解析,当然前提是你要知到数据结构
JSON的格式: JSON能够以非常简单的方式来描述数据结构
1 // {} 2 var p ={ 3 "name":"Bob", 4 "age":32, 5 "Company":"IBM", 6 "Engineer":true, 7 }; 8 9 // p.key 10 11 // [{},{}] 12 13 var members =[ 14 { 15 "name":"Bob", 16 "age":32, 17 "Company":"IBM", 18 "Engineer":true, 19 }, 20 { 21 "name":"John", 22 "age":32, 23 "Company":"Oracle", 24 "Engineer":false, 25 }, 26 { 27 "name":"Henry", 28 "age":32, 29 "Company":"Microsoft", 30 "Engineer":false, 31 } 32 33 ]; 34 // members[i].key 35 36 // { 37 // "Members":[{},{}] 38 // } 39 40 var conference ={ 41 "Conference":"", 42 "Date":"", 43 "Address":"", 44 "Members":[ 45 { 46 "name":"Bob", 47 "age":32, 48 "Company":"IBM", 49 "Engineer":true, 50 }, 51 { 52 "name":"John", 53 "age":32, 54 "Company":"Oracle", 55 "Engineer":false, 56 }, 57 { 58 "name":"Henry", 59 "age":32, 60 "Company":"Microsoft", 61 "Engineer":false, 62 } 63 64 ] 65 // --------- 66 67 }; 68 // conference.Members[i].key
什么是JSONP
先说说JSONP是怎么产生的:
1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;
2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力)
3、现在我们在jsonp.html页面定义一个函数,然后在远程remote.js中传入数据进行调用。
1 // 得到信息查询结果后的回调函数 2 3 var Msgcallback = function(data){ 4 console.log(data); 5 6 7 } 8 // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码) 9 var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=Msgcallback"; 10 // 创建script标签,设置其属性 11 var script = document.createElement('script'); 12 script.setAttribute('src', url); 13 // 把script标签加入head,此时调用开始 14 document.getElementsByTagName('head')[0].appendChild(script);
区别:
ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加标签来调用服务器提供的js脚本。
其实ajax与jsonp的区别不在于是否跨域,
ajax通过服务端代理一样可以实现跨域,
jsonp本身也不排斥同域的数据的获取。
jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。
通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过H5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持WebSocket
原生的只有ajax
Jquery-jsonp
1 $.ajax({ 2 type: "get", 3 async: false, 4 url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998", 5 dataType: "jsonp", 6 jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) 7 jsonpCallback:"flightHandler", 8 //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 9 success:function(data){ 10 console.log(data); 11 alert('您查询到航班信息:票价: ' + data.price + ' 元,余票: ' + data.tickets + ' 张。'); 12 13 }, 14 error:function(data){ 15 console.log("fail"); 16 17 } 18 19 });