【PhoneGAP学习】Android PhoneGap框架（2）--重要知识点的预先学习（jsonp）

来源：互联网发布：1100lu千百鲁最新域名编辑：程序博客网时间：2024/06/05 06:49

关于JSONP

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值一起作为回调函数名，
servlet中将paramter的回调函数名这个KEY值获取后，拼凑成下面的数据，

回调函数名({result:"the file is from server"});

成功回调的情况下设置给response，就如同执行了test2.js一样。callback+内部定义的ID值的回调函数名回调后，

如果成功在jquery就执行sucess方法，因此就可以从服务器获取相应的回调了。

0 0

【PhoneGAP学习】Android PhoneGap框架（2）--重要知识点的预先学习 （jsonp）

关于JSONP

【PhoneGAP学习】Android PhoneGap框架（2）--重要知识点的预先学习（jsonp）