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