Latest web development tutorials

JSONP Tutorial

En este capítulo vamos a introducir el conocimiento JSONP.

Jsonp (JSON con relleno) es un JSON "modo de uso" que le permite obtener información de otros dominios Web (Web site), que los datos de varios dominios se lee.

¿Por qué necesitamos una técnica especial diferente de dominio (sitio web) para acceder a datos a partir de (JSONP) que? Esto se debe a la misma política de origen.

política de origen, se trata de una política de seguridad conocido propuesto por Netscape, ahora todos los navegadores soportan JavaScript utilizará esta estrategia.

Aplicaciones JSONP

1. El formato de los datos del servidor JSONP

Si los clientes quieren acceso: http://www.w3big.com/try/ajax/jsonp.php?jsonp=callbackFunction.

Supongamos que el cliente espera para devolver datos JSON: [ "customername2" "customername1"].

Verdaderamente regresado a los datos del cliente se muestra como: callbackFunction ([ "customername1", "customername2"]).

Servidor de archivos de código jsonp.php: 

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

2. La función de cliente para lograr 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>

impresiones de página 

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

Los clientes de página completa de código 

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

El código anterior se puede utilizar ejemplos de código 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>