PhoneGAP中没有直接使用jsonp,本地代码同源请求的时候使用的是XHR,而需要跨域访问的时候则需要用JSONP,这个是需要开发者自己去实现网页跨域操作。
JSONP是什么,与JSON什么关系?
JSON:
基于文本的数据描述格式,和XML一样在Web 应用数据传递保存具有相同重要的地位大放异彩,JSON主要是服务于Javascirpt,这正好XML在Javascript中进行解析的复杂提供了强大的候补。JSON格式可以表示字符串,NUMBER,BOOLEAN, 数组,以及MAP,其中每个元素之间KEY:VALUE用”,”分割,数组用[]表示,MAP用{key:Value}表示。
如下的关于people的Json数据格式:
{ "people":[ {"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"}, {"firstName":"Jason","lastName":"Hunter","email":"bbbb"}, {"firstName":"Elliotte","lastName":"Harold","email":"cccc"} ] }该people的KEY值对应的是一个3元素的数组,每个元素是一个OBJECT,没个OBJECT都有3个元素组成,KEY分别是firstName,lastName,email.
这种轻量级的数据经常被用来JAVASCRIPT内部或者与本地代码进行数据交互的格式。双方只要知道其中的数据结构将很方便的获得KEY所对应的值。
其实在Andriod里面所用到的JSONObject通过Iterator就可以如解析XML一样进行遍历,得到该数据结构的KEY和VALUE的数据。
JSONP:
JSONP不是数据格式,而是对JSON的一种使用模式。可以利用ajax用于跨域进行数据传输。而JSONP的跨域是利用HTML里面的元素进行对其他域的请求而实现的。
众所周知,<script>、<iframe>标签里src属性可以请求其他域的js或者asp的,
所以JSONP就是利用script 访问其他域(自己域也可)的请求request,得到反馈response的过程。
(这位 博主将JSONP分析的很清楚,可以参考一下。)
如果要理解这个概念,首先抛弃JQUERY和AJAX的弄得一头雾水的使用方法,
用硬代码实现该JSONP的跨域。
客户端代码:
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function callback(option) { alert(option.result); } </script> <script type="text/javascript" src="http://192.168.23.1/jsonpTest/test2.js"></script> </head> <body> </body> </html>服务端代码:
test2.js
callback({result:"the file is from server"});其中客户端function callback一定要放在<script src=>前面,否则,当加载test2.js的时候,找不到callback方法的异常。
得到的结果是这样的:
所以为了避免写硬代码,ajax采用了将callback方法名称传到服务器端的做法,这样就可以做到通用性和灵活性了。
如果使用ajax访问的话,就不能直接写test2.js的代码了,将回调函数作为参数传过去后,需要在服务端将方法名和需要传递的参数以JSON的格式如test.js代码的内容的样子拼凑起来,服务器端可以用servlet或者asp写resonse。
客户端用JQUERY访问的话就如同:
$.ajax({ url: 'http://192.168.23.1/jsonpTest/jsonpServlet', dataType: "jsonp", jsonp: "callback", success: function (data) { alert(option.result); } })其中url的话就是服务端地址,jquery很聪明的将jsonp的callback+内部定义的ID值一起作为回调函数名,
回调函数名({result:"the file is from server"});成功回调的情况下设置给response,就如同执行了test2.js一样。callback+内部定义的ID值的回调函数名回调后,
如果成功在jquery就执行sucess方法,因此就可以从服务器获取相应的回调了。