Latest web development tutorials

JSONP Tutorial

In diesem Kapitel werden wir JSONP Wissen einführen.

JSONP (JSON mit Padding) ist ein json "Benutzungsmodus", dass es Informationen von anderen Web-Domains (Websites) zu erhalten, ermöglicht es, dass Cross-Domain-Daten gelesen werden.

Warum brauchen wir eine spezielle Technik unterschiedliche Domain (Website) den Zugriff auf Daten von (JSONP) es? Dies liegt daran, den gleichen Ursprung Politik.

Origin Politik, es ist eine bekannte Sicherheitspolitik vorgeschlagen von Netscape, jetzt alle Browser unterstützen JavaScript wird diese Strategie verwenden.

JSONP Anwendungen

1. Der Server JSONP Formatdaten

Wenn die Kunden wollen Zugang: http://www.w3big.com/try/ajax/jsonp.php?jsonp=callbackFunction.

Angenommen, der Kunde erwartet, dass JSON-Daten zurück: [ "customername1", "customername2"].

Wirklich zurückgegebenen Daten des Kunden wird angezeigt als: callback ([ "customername1", "customername2"]).

Server-Datei jsonp.php Code: 

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

2. Der Client-Funktion zu erreichen callback 

<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>

Kunden komplette Codepage 

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

Der obige Code kann jQuery-Code Beispiele verwenden: 

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