Latest web development tutorials

JSONP Tutorial

bab ini kita akan memperkenalkan JSONP pengetahuan.

Jsonp (JSON dengan Padding) adalah json "penggunaan mode" yang memungkinkan untuk mendapatkan informasi dari domain web lainnya (website), bahwa data lintas-domain dibaca.

Mengapa kita perlu teknik khusus yang berbeda domain (website) untuk mengakses data dari (JSONP) itu? Hal ini karena kebijakan asal yang sama.

kebijakan asal, itu adalah kebijakan keamanan yang terkenal diusulkan oleh Netscape, sekarang semua browser mendukung JavaScript akan menggunakan strategi ini.

Aplikasi JSONP

1. Server format data JSONP

Jika pelanggan ingin akses: http://www.w3big.com/try/ajax/jsonp.php?jsonp=callbackFunction.

Misalkan pelanggan diharapkan untuk mengembalikan data JSON: [ "customername1", "customername2"].

Benar-benar kembali ke data klien ditampilkan sebagai: callbackFunction ([ "customername1", "customername2"]).

Server file kode jsonp.php: 

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

2. Fungsi klien untuk mencapai 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>

tayangan halaman 

<div id="divCustomers"></div>

Klien halaman kode lengkap 

<!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.w3big.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

jQuery menggunakan JSONP

Kode di atas dapat menggunakan contoh kode 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.w3big.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>