jsonp教程及び実現

34104 ワード

json p Json 前の方

JSONP教程
この章ではJSONPの知識を紹介します.
JSON With Paddingはjsonの「使用モード」であり、他のドメイン名(ウェブサイト)から資料を取得することができます.つまり、ドメインを越えてデータを読み取ります.
なぜ私たちは異なるドメイン(サイト)からデータを訪問するには特殊な技術(JSONP)が必要ですか?これは同源戦略のためです.
同じソースポリシーは、Netscapeによって提案された有名なセキュリティポリシーです.今はJavaScriptをサポートするすべてのブラウザがこのポリシーを使用します.
JSONPアプリケーション
1.サービス端末JSONPフォーマットデータ
お客様が訪問したい場合:http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction.
クライアントがJSONデータに戻ることを望むと仮定します.[customername 1]、「customername 2」.
クライアントに戻ったデータは、コールバックFunction(「customername 1」「customername 2」)と表示されます.
サービス先のファイルjsop.phpコードは以下の通りです.

<?php
header('Content-type: application/json');
//       
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json  
$json_data = '["customername1","customername2"]';
//  jsonp     
echo $jsoncallback . "(" . $json_data . ")";
?>

2.クライアントがcalbackFunction関数を実現する

<script type="text/javascript">
function onCustomerLoaded(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.runoob.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("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>

ドメインをまたぐ問題、ソリューション-Ngix逆代理