Latest web development tutorials

Tutorial JSONP

Ce chapitre nous présenterons JSONP connaissances.

JSONP (JSON avec Rembourrage) est un json "mode d'utilisation" qui lui permet d'obtenir des informations à partir d'autres domaines Web (sites Web), que les données inter-domaines est lu.

Pourquoi avons-nous besoin d'un autre domaine de la technique spéciale (site web) pour accéder aux données à partir de (JSONP) il? En effet, la politique de même origine.

la politique d'origine, il est une politique de sécurité bien connu proposé par Netscape, maintenant tous les navigateurs prennent en charge JavaScript utilisera cette stratégie.

JSONP Applications

1. Le serveur JSONP données de format

Si les clients veulent un accès: http://www.w3big.com/try/ajax/jsonp.php?jsonp=callbackFunction.

Supposons que le client devrait renvoyer des données JSON: [ "customername1", "customername2"].

Vraiment retourné à les données du client est affiché comme: callbackFunction ([ "customername1", "customername2"]).

Code Serveur fichier jsonp.php: 

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

2. La fonction de client pour atteindre 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>

page impressions 

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

Clients de page de code complet 

<!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 en utilisant JSONP

Le code ci-dessus peut utiliser des exemples de code 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>