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