JSONP-Tutorial
In diesem Kapitel führen wir Sie in JSONP ein.
JSONP (JSON with Padding) ist ein "Nutzungsmuster" von JSON, das Webseiten ermöglicht, Daten von anderen Domains (Websites) abzurufen, d. h. das domänenübergreifende Lesen von Daten.
Warum benötigen wir eine spezielle Technologie (JSONP), um auf Daten von verschiedenen Domains (Websites) zuzugreifen? Das liegt an der Same-Origin-Policy.
Die Same-Origin-Policy ist eine bekannte Sicherheitsrichtlinie, die von Netscape vorgeschlagen wurde. Heute verwenden alle Browser, die JavaScript unterstützen, diese Richtlinie.
JSONP-Anwendung
1. Serverseitige Daten im JSONP-Format
Zum Beispiel, wenn ein Client auf Folgendes zugreifen möchte:https://www.example.com/try/ajax/jsonp.php?jsoncallback=callbackFunction。
Angenommen, der Client erwartet, folgende Daten zu erhalten: ["customername1","customername2"].
Die tatsächlich an den Client zurückgegebenen Daten werden wie folgt angezeigt: callbackFunction(["customername1","customername2"]).
Die serverseitige Datei jsonp.php enthält den folgenden Code:
Code der Datei jsonp.php
<?php
header('Content-type: application/json');
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
$json_data = '["customername1","customername2"]';
echo $jsoncallback . "(" . $json_data . ")";
?>
2. Clientseitige Implementierung der Funktion 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>
Seitenanzeige
<div id="divCustomers"></div>
Vollständiger Clientseiten-Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP-Beispiel</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="https://www.example.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>
jQuery mit JSONP
Der obige Code kann mit dem jQuery-Codebeispiel implementiert werden:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP-Beispiel</title>
<script src="https://cdn.static.example.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.example.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>
Weitere Erweiterungen