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>

クライアントページの完全なコード

<!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>