Latest web development tutorials

JSONP Tutorial

In questo capitolo saranno presentati conoscenza JSONP.

JSONP (JSON con imbottitura) è un JSON "modalità di utilizzo", che gli permette di ottenere informazioni da altri domini web (siti web), che i dati tra domini viene letto.

Perché abbiamo bisogno di una speciale tecnica di diverso dominio (sito web) per accedere ai dati da (JSONP) esso? Questo perché la stessa politica di origine.

politica di origine, si tratta di una politica di sicurezza ben noto proposto da Netscape, ormai tutti i browser supportano utilizzerà questa strategia JavaScript.

Applicazioni JSONP

1. Il JSONP dati in formato di server

Se i clienti vogliono l'accesso: http://www.w3big.com/try/ajax/jsonp.php?jsonp=callbackFunction.

Supponiamo che il cliente dovrebbe restituire i dati JSON: [ "customername1", "customername2"].

Veramente tornato ai dati del cliente viene visualizzato come: callbackFunction ([ "customername1", "customername2"]).

Server codice del file jsonp.php: 

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

2. La funzione client per raggiungere 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>

impressioni di pagina 

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

I clienti di pagina codice completo 

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

Il codice di cui sopra può utilizzare esempi di codice 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>