Latest web development tutorials

JSONP Tutorial

W tym rozdziale będziemy wprowadzać jsonp wiedzy.

Jsonp (JSON z wyściółką) jest json "tryb użytkowania", która pozwala na uzyskanie informacji z innych domen internetowych (), że dane cross-domain jest odczytywany.

Dlaczego potrzebujemy specjalnej technice inną domenę (stronę internetową), aby uzyskać dostęp do danych z (jsonp) IT? To dlatego, że tej samej polityki pochodzenia.

Polityka pochodzenie, jest to dobrze znany polityka bezpieczeństwa proponowane przez firmę Netscape, teraz wszystkie przeglądarki obsługują JavaScript użyje tej strategii.

jsonp Aplikacje

1. Serwer JSONP Format danych

Jeśli klienci chcą dostępu: http://www.w3big.com/try/ajax/jsonp.php?jsonp=callbackFunction~~HEAD=pobj.

Załóżmy, że klient oczekuje się powrotu danych JSON: [ "customername1", "customername2"].

Prawdziwie powrócił do danych klienta jest wyświetlany jako: callbackFunction ([ "customername1", "customername2"]).

Serwer kod pliku jsonp.php: 

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

2. Funkcja klienta, aby osiągnąć 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>

wyświetleń strony 

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

Klienci kompletne strony kodowej 

<!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 używając jsonp

Powyższy kod można użyć przykładów kodu 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>