Лучшее руководство по JSONP Учебное пособие в 2024 году. В этом руководстве вы можете изучить JSONP Приложения,JQuery с использованием JSONP,
В этой главе мы представим JSONP знания.
JSONP (JSON с Padding) является JSON "Использование режима", что позволяет ему получать информацию из других веб-доменов (сайтов), что данные междоменное считывается.
Зачем нам нужна специальная техника другой домен (веб-сайт) для доступа к данным из (JSONP) это? Это объясняется тем, что та же политика происхождения.
Происхождение политика, это хорошо известная политика безопасности, предложенный Netscape, теперь все браузеры поддерживают JavaScript будет использовать эту стратегию.
Если клиенты хотят получить доступ к: http://www.w3write.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 . ")"; ?>
<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>
<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.w3write.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script> </body> </html>
Приведенный выше код можно использовать примеры 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.w3write.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); }); </script> </body> </html>