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