Tutoriel JSONP
Dans ce chapitre, nous vous présenterons la connaissance de JSONP.
Jsonp (JSON with Padding) est un "mode d'utilisation" de json, qui permet aux pages Web d'obtenir des données d'autres noms de domaine (sites Web), c'est-à-dire de lire des données sur plusieurs domaines.
Pourquoi avons-nous besoin d'une technologie spéciale (JSONP) pour accéder aux données de différents domaines (sites Web) ? Cela est dû à la politique de même origine.
La politique de même origine est une politique de sécurité bien connue proposée par Netscape.Tous les navigateurs prenant en charge JavaScript utilisent désormais cette politique.
Application JSONP
1. Données au format JSONP côté serveur
Si le client souhaite accéder à : http://www.php.cn/try/ajax/jsonp .php ? jsonp=fonction de rappel.
Supposons que le client s'attende à ce que des données JSON soient renvoyées : ["customername1", "customername2"].
Les données effectivement renvoyées au client sont affichées sous la forme : callbackFunction(["customername1","customername2"]).
Le code du fichier jsonp.php côté serveur est :
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>2 Le client implémente la fonction 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>Affichage de la page
<div. id=" divCustomers"></div>
Code complet de la page client
<!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.php.cn/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>jQuery utilisant JSONP
Le code ci-dessus peut utiliser l'exemple 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.php.cn/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>
