JSONP チュートリアル

この章では、JSONP の知識を紹介します。

Jsonp (JSON with Padding) は、Web ページが他のドメイン名 (Web サイト) からデータを取得すること、つまりドメイン間でデータを読み取ることを可能にする JSON の「使用モード」です。

異なるドメイン (Web サイト) からのデータにアクセスするために特別なテクノロジー (JSONP) が必要なのはなぜですか?これは同一生成元ポリシーによるものです。

同一生成元ポリシーは、Netscape によって提案されたよく知られたセキュリティポリシーであり、現在 JavaScript をサポートするすべてのブラウザでこのポリシーが使用されています。

JSONP アプリケーション

1. サーバー側 JSONP 形式データ

お客様がアクセスしたい場合: //m.sbmmt.com/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>

ページ表示

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="//m.sbmmt.com/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("//m.sbmmt.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>

学び続ける

新しいファイル

<!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("//m.sbmmt.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>

提出するリセットコード

自動運転