jQueryJSONP
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.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction.
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 du serveur est :
Code du fichier jsonp.php
Exemple
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
2 Le client implémente la fonction callbackFunction
Instance
<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>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
affichage de la page
Instance
<div id="divCustomers"></div>
Exécuter l'instance»
Cliquez sur "Exécuter l'instance" " Bouton " pour visualiser l'instance en ligne
Code complet de la page client
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>Instance en cours d'exécution»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
jQuery utilisant JSONP
Le code ci-dessus peut utiliser des exemples de code jQuery :
Exemples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("http://www.runoob.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>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
