浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用-Web前端之家

复制代码
代码如下://定义shoPrice函数function showPrice { alert(“Symbol: ” +
data.symbol + “, Price: ” + data.price);}

复制代码 代码如下://JSONPcallback

后端用PHP实现的JSONP服务的代码片段:复制代码 代码如下:$jsonData =
getDataAsJson;echo $_GET[‘callback’] . ‘;’;// 打印:
showPrice({“symbol” : “IBM”, “price” :
“91.42”});很好的契合了JSONP的定义,打包在函数调用中的JSON数据。以上几个例子来自:使用
JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的
mashupwww.6766.com,在jQuery中使用JSONP
AJAX和JSONP在jQuery中的调用方式看起来极为相像,千万不要被这种现象迷惑,它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容,而JSONP是动态的添加

JSON和JSONP JSON(JavaScript Object
Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息。
JSONP,就是打包在函数调用中的的JSON。
JSON是一种数据格式,JSONP是一种数据调用方式。复制代码 代码如下://JSON{“name”: “sb”}

复制代码
代码如下://在Web页面中包含showPrice函数和参数

出于安全考虑,脚本不能访问非本域的内容。但是,静态资源是不受域策略限制的,可以加载任意域的脚本、样式、图片等静态资源,JSOP就是利用这种原理来实现跨域获取数据的。例1:

remote.js的内容和之前在标签里写的一样是:1 showPrice({symbol: ‘IBM’,
price: 91.42});
动态插入的JavaScript代码,将要传递的JSON数据作为参数,showPrice函数调用语句的参数。
那么问题来了,每次获取到数据都调用showPrice函数吗?这就需要前后端程序猿做好约定,当然这样有很多不便,尤其是对于开放接口给公众开发的情况。JSOP这样处理:支持前端传递一个回调函数名参数,后端接收回调函数名参数,然后生成对该函数的调用,将JSON数据作为参数传递,在到达客户端时将其插入页面开始执行。例3:
动态插入代码,带有callback参数:复制代码
代码如下:

本例展示了如何将静态JSON数据作为参数调用JavaScript函数。例2:
第一种的函数调用完全可以写在一个js文件中放在服务器上,用script标签加载到页面,而且这个标签可以动态地创建。复制代码 代码如下:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图