JSONP ????
JSONP Tutorial
? ???? JSONP? ?? ??? ?????.
Jsonp(JSON with Padding)? json? "?? ??"?, ?? ?? ? ???? ?? ??? ??(? ???)?? ???? ?? ? ????. ?, ??? ???? ???? ?? ? ????.
?? ???(????)? ???? ?????? ? ?? ??(JSONP)? ?????? ?? ??? ?? ?? ?????.
?? ?? ??? Netscape?? ??? ? ??? ?? ?????. ?? JavaScript? ???? ?? ????? ? ??? ?????.
JSONP ??????
1. ?? ? JSONP ?? ???
??? ?????? ??: http://ipnx.cn/try/ajax/jsonp.php?jsonp=callbackFunction.
??? JSON ???(["customername1", "customername2"])? ????? ????? ?????.
??? ?????? ??? ???? callbackFunction(["customername1","customername2"])? ?????.
??? ?? jsonp.php ??? ??? ????.
<?php
header('Content-type: application/json');
//獲取回調(diào)函數(shù)名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json數(shù)據(jù)
$json_data = '["customername1","customername2"]';
//輸出jsonp格式的數(shù)據(jù)
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>
Complete? ?????. ????? ??? ??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<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://ipnx.cn/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>jQuery? JSONP? ?????
? ??? jQuery? ??? ? ????. ?? ?:
<!DOCTYPE html>
<html>
<head>
<title>JSONP 實例</title>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("http://ipnx.cn/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>
