Latest web development tutorials

JSONP Tutorial

Neste capítulo, vamos introduzir conhecimentos JSONP.

Jsonp (JSON com estofamento) é um json "modo de utilização" que lhe permite obter informações de outros domínios web (websites), que os dados de domínio cruzado é lido.

Por que precisamos de uma técnica especial de domínio diferente (website) para acessar dados de (JSONP) é? Isto é porque a mesma política de origem.

política de origem, é uma política de segurança bem conhecido proposto pela Netscape, agora todos os navegadores suportam JavaScript usará esta estratégia.

Aplicações JSONP

1. Os dados formato JSONP servidor

Se os clientes querem acesso: http://www.w3big.com/try/ajax/jsonp.php?jsonp=callbackFunction.

Suponha que o cliente espera para retornar dados JSON: [ "customername1", "customername2"].

Verdadeiramente voltou aos dados do cliente é exibido como: callbackFunction ([ "customername1", "customername2"]).

Servidor de código de arquivo jsonp.php: 

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

2. A função de cliente para alcançar 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>

impressões de página 

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

Clientes página de código completo 

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

O código acima pode usar exemplos 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>