本章节我们将向大家介绍 JSONP 的知识。
Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?这是因为同源策略。
同源策略,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略。
如客户想访问 : http://edu.jb51.net/try/ajax/jsonp.php?jsonp=callbackFunction。
假设客户期望返回JSON数据:["customername1","customername2"]。
真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。
服务端文件jsonp.php代码为:
<?php header( 'Content-type: application/json' ); //获取回调函数名 $jsoncallback = htmlspecialchars( $_REQUEST [ 'jsoncallback' ]); //json数据 $json_data = '["customername1","customername2"]' ; //输出jsonp格式的数据 echo $jsoncallback . "(" . $json_data . ")" ; ?> |
<script type= "text/javascript" > function callbackFunction(result, methodName) { var html = '<ul>' ; for ( var i = 0; i < result.length; i++) { html += '<li>' + result[i] + '</li>' ; } html += '</ul>' ; document.getElementById( 'divCustomers' ).innerHTML = html; } </script> |
< div id = "divCustomers" ></ div > |
<!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title>JSONP 实例</title> </head> <body> <div id= "divCustomers" ></div> <script type= "text/javascript" > function callbackFunction(result, methodName) { var html = '<ul>' ; for ( var i = 0; i < result.length; i++) { html += '<li>' + result[i] + '</li>' ; } html += '</ul>' ; document.getElementById( 'divCustomers' ).innerHTML = html; } </script> <script type= "text/javascript" src= "http://edu.jb51.net/try/ajax/jsonp.php?jsoncallback=callbackFunction" ></script> </body> </html> |
以上代码可以使用 jQuery 代码实例:
<!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title>JSONP 实例</title> </head> <body> <div id= "divCustomers" ></div> <script> var html = '<ul>' ; for ( var i = 0; i < data.length; i++) { html += '<li>' + data[i] + '</li>' ; } html += '</ul>' ; $( '#divCustomers' ).html(html); }); </script> </body> </html> |