Latest web development tutorials

JSONP Учебное пособие

В этой главе мы представим JSONP знания.

JSONP (JSON с Padding) является JSON "Использование режима", что позволяет ему получать информацию из других веб-доменов (сайтов), что данные междоменное считывается.

Зачем нам нужна специальная техника другой домен (веб-сайт) для доступа к данным из (JSONP) это? Это объясняется тем, что та же политика происхождения.

Происхождение политика, это хорошо известная политика безопасности, предложенный Netscape, теперь все браузеры поддерживают JavaScript будет использовать эту стратегию.

JSONP Приложения

1. JSONP формат данных сервера

Если клиенты хотят получить доступ к: http://www.w3big.com/try/ajax/jsonp.php?jsonp=callbackFunction~~HEAD=pobj.

Предположим, что клиент, как ожидается, возвращать данные в формате JSON: [ "customername1", "customername2"].

Действительно вернулся к данным клиента отображается в виде: callbackFunction ([ "customername1", "customername2"]).

Сервер код файла jsonp.php: 

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

2. Функция клиента для достижения 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>

впечатления Page 

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

Клиенты полный код страницы 

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

Приведенный выше код можно использовать примеры 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>