你的位置:首页 > 网页设计

[网页设计]【04】JSONP 教程


JSONP 教程

Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?这是因为同源策略。

同源策略,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略。

 

 

JSONP 应用

1. 服务端JSONP格式数据

假如客户想访问 : http://www.baidu.com/try/ajax/jsonp.php?jsonp=callbackFunction。

假设客户期望返回JSON数据:["customername1","customername2"]。

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件jsonp.php代码为:

  1. <?php
  2. header('Content-type: application/json');
  3. //获取回调函数名
  4. $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
  5. //json数据
  6. $json_data ='["customername1","customername2"]';
  7. //输出jsonp格式的数据
  8. echo $jsoncallback ."(". $json_data .")";
  9. ?>

 

2. 客户端实现 callbackFunction 函数

  1. <script type="text/javascript">
  2. function onCustomerLoaded(result, methodName)
  3. {
  4. var html ='<ul>';
  5. for(var i =0; i < result.length; i++)
  6. {
  7. html +='<li>'+ result[i]+'</li>';
  8. }
  9. html +='</ul>';
  10. document.getElementById('divCustomers').innerHTML = html;
  11. }
  12. </script>

 

页面展示

<div id="divCustomers"></div>

  

客户端页面完整代码

  1. <!DOCTYPE html >
  2. <head>
  3. <title>JSONP 实例</title>
  4. </head>
  5. <body>
  6. <div id="divCustomers"></div>
  7. <script type="text/javascript">
  8. function callbackFunction(result, methodName)
  9. {
  10. var html ='<ul>';
  11. for(var i =0; i < result.length; i++)
  12. {
  13. html +='<li>'+ result[i]+'</li>';
  14. }
  15. html +='</ul>';
  16. document.getElementById('divCustomers').innerHTML = html;
  17. }
  18. </script>
  19. <script type="text/javascript" src="http://www.baidu.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
  20. </body>
  21. </html>

 

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JSONP 实例</title>
  5. <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
  6. </head>
  7. <body>
  8. <div id="divCustomers"></div>
  9. <script>
  10. $.getJSON("http://www.baidu.com/try/ajax/jsonp.php?jsoncallback=?", function(data){
  11. var html ='<ul>';
  12. for(var i =0; i < data.length; i++)
  13. {
  14. html +='<li>'+ data[i]+'</li>';
  15. }
  16. html +='</ul>';
  17. $('#divCustomers').html(html);
  18. });
  19. </script>
  20. </body>
  21. </html>