JSONP チュートリアル
JSONP チュートリアル
この章では、JSONP の知識を紹介します。
Jsonp (JSON with Padding) は、Web ページが他のドメイン名 (Web サイト) からデータを取得すること、つまりドメイン間でデータを読み取ることを可能にする JSON の「使用モード」です。
異なるドメイン (Web サイト) からのデータにアクセスするために特別なテクノロジー (JSONP) が必要なのはなぜですか?これは同一生成元ポリシーによるものです。
同一生成元ポリシーは、Netscape によって提案されたよく知られたセキュリティ ポリシーであり、現(xiàn)在 JavaScript をサポートするすべてのブラウザでこのポリシーが使用されています。
JSONP アプリケーション
1. サーバー側(cè) JSONP 形式データ
お客様がアクセスしたい場合: http://ipnx.cn/try/ajax/jsonp.php?jsonp=callbackFunction。
顧客が JSON データが返されることを期待しているとします: ["customername1", "customername2"]。
実際にクライアントに返されるデータは callbackFunction(["customername1","customername2"]) として表示されます。
サーバー側(cè)ファイルの 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 関數(shù)を?qū)g裝します
<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>
