Tutorial JSONP
Tutorial JSONP
Dalam bab ini kami akan memperkenalkan anda kepada pengetahuan JSONP.
Jsonp (JSON dengan Padding) ialah "mod penggunaan" json, yang membenarkan halaman web mendapatkan data daripada nama domain lain (tapak web), iaitu membaca data merentas domain.
Mengapa kita memerlukan teknologi khas (JSONP) untuk mengakses data daripada domain (tapak web) yang berbeza? Ini kerana dasar asal yang sama.
Dasar asal yang sama ialah dasar keselamatan terkenal yang dicadangkan oleh Netscape Semua penyemak imbas yang menyokong JavaScript kini menggunakan dasar ini.
Aplikasi JSONP
1. Data format JSONP sebelah pelayan
Jika pelanggan ingin mengakses: http://ipnx.cn/try/ajax/jsonp .php? jsonp=callbackFunction.
Andaikan pelanggan menjangkakan data JSON akan dikembalikan: ["customername1", "customername2"].
Data yang sebenarnya dikembalikan kepada klien dipaparkan sebagai: callbackFunction(["customername1","customername2"]).
Kod jsonp.php sebelah pelayan ialah:
<?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 Pelanggan melaksanakan fungsi panggil balik
<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>Paparan halaman
<div. id=" divCustomers"></div>
Kod lengkap halaman klien
<!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 menggunakan JSONP
Kod di atas boleh menggunakan contoh kod 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>
