JSONP原理及jQuery中的使用

发布时间：2020-12-16 19:12:18 所属栏目：百科来源：网络整理

导读：JSON和JSONP JSON （ JavaScriptObjectNotation ）是一种轻量级的数据交换格式，用于在浏览器和服务器之间交换信息。 JSONP(JSONWithPadding) ，就是打包在函数调用中的的 JSON（或者包裹的JSON）。 JSON是一种数据格式，JSONP是一种数据调用方式。 1 // JS

JSON和JSONP

　　JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，用于在浏览器和服务器之间交换信息。

　　JSONP(JSONWithPadding)，就是打包在函数调用中的的JSON（或者包裹的JSON）。

　　JSON是一种数据格式，JSONP是一种数据调用方式。

1 //JSON
2 
3 {
4 
5 “name”: “sb”
6 
7 }

JSONP 3 callback({ 7 })

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

例1：

定义shoPrice函数
2 function showPrice(data) {
3     alert("Symbol: " + data.symbol + ",Price: " + data.price);
4 }

1 //在Web页面中包含showPrice函数和参数 <script type="text/javascript"> 3 function showPrice(data) { 4 alert("Symbol: " + data.symbol + ,Price: data.price); 5 } 6 </script7 >showPrice({symbol: 'IBM91.42});>

　　本例展示了如何将静态JSON数据作为参数调用JavaScript函数。

例2：

　　第一种的函数调用完全可以写在一个js文件中放在服务器上，用script标签加载到页面，而且这个标签可以动态地创建。

1 2 // This is our function to be called with JSON data 3 4 5 6 7 var url = “remote.js”; 外部脚本的URL 8 动态插入脚本 9 script document.createElement(script); 10 script.setAttribute(src11 12 加载script 13 document.getElementsByTagName(head)[0].appendChild(script); 14 remote.js的内容和之前在标签里写的一样是：

1showPrice({symbol: 'IBM',price: 91.42});

　　动态插入的JavaScript代码，将要传递的JSON数据作为参数，showPrice函数调用语句的参数。

　　那么问题来了，每次获取到数据都调用showPrice函数吗？这就需要前后端程序猿做好约定，当然这样有很多不便，尤其是对于开放接口给公众开发的情况。JSOP这样处理：支持前端传递一个回调函数名参数，后端接收回调函数名参数，然后生成对该函数的调用，将JSON数据作为参数传递，在到达客户端时将其插入页面开始执行。

例3：

　　动态插入代码，带有callback参数：

1 <script type="text/javascript"> 2 3 4 alert("Symbol: " + data.symbol + ",128); line-height:1.5!important; font-size:12px!important"> 5 } 6 7 var url = “remote.js?callback='showPrice'”; 8 9 10 var script = document.createElement('script'); 11 script.setAttribute('src',128); line-height:1.5!important; font-size:12px!important">12 13 14 document.getElementsByTagName('head')[0].appendChild(script); 15 </script>

后端用PHP实现的JSONP服务的代码片段：

1 $jsonData = getDataAsJson($_GET['symbol']); 2 echo $_GET['callback'] . '(' . $jsonData . ');'; 3 打印: showPrice({"symbol" : "IBM","price" : "91.42"});

很好的契合了JSONP的定义，打包在函数调用中的JSON数据。

以上几个例子来自：

使用JSONP实现跨域通信，第1部分:结合JSONP和jQuery快速构建强大的mashup

在jQuery中使用JSONP

　　AJAX和JSONP在jQuery中的调用方式看起来极为相像，千万不要被这种现象迷惑，它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容，而JSONP是动态的添加<script>标签来调用服务器脚本。虽然jQuery把JSONP作为AJAX的一种形式进行了封装，但JSONP并不是AJAX的一种形式或一种特例。

1 2 $.ajax({ 3 url: "http://query.yahooapis.com/v1/public/yql", 4 5 jsonpCallback: "showPrice", 6 jsonp: "callback",128); line-height:1.5!important; font-size:12px!important"> 7 8 tell jQuery we're expecting JSONP 9 dataType: "jsonp",128); line-height:1.5!important; font-size:12px!important">10 11 12 data: { 13 q: "select title,abstract,url from search.news where query="cat"",128); line-height:1.5!important; font-size:12px!important">14 format: "json" 15 },128); line-height:1.5!important; font-size:12px!important">16 17 work with the response 18 success: function( data ) { 19 console.log( data ); server response 20 } 21 });

参数解释：

jsonp，

　　重写jsonp请求中的回调函数的名称。至俄格值用来替代“callback=?”这种GET或POST请求URL参数里的“callback”部分，例如{jsonp:'onJsonPLoad'}会导致“onJsonPLoad”传递给服务器。

jsonpCallback，

　　为jsonp指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。但是实际使用过程中，并不用写回调函数，比如此例中的showPrice，不写也不会报错，因为jQuery在处理JSONP的时候，自动帮你生成回调函数并且把数据取出来共success方法调用。可能像这样：

functionsuccess_jsonpCallback(data) { success(data); }

其他参数可以到jQuery官网查询：http://api.jquery.com/jquery.ajax/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!