1.服务端jsonp格式数据
如客户想访问 : http://www.runoob.com/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=http://www.mamicode.com/‘["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>
客户端实现的完整代码
<!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://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script> </body> </html>
以上代码可以用jquery实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 实例</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> </head> <body> <div id="divCustomers"></div> <script>
$.getJSON("http://www.runoob.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>
jsonp应用
