Что такое JSONP?

Что такое JSONP, что такое JSONP, как использовать JSONP.

Сначала нужно знать.

1. Основной принцип JSONP заключается в том, что целевая страница вызывает метод локальной страницы и передает параметры.
2. Мы часто используем динамические страницы, такие как JSP, PHP, ASPX.

Почему нужен JSONP?

Из-за ограничений безопасности браузера данные не могут быть запрашиваемы напрямую через разные домены (включая разные корневые домены, поддомены или разные порты), если целевой домен не разрешил вам доступ. Например, это можно сделать, настроив crossdomain.xml или предоставив разрешение в заголовках HTTP.

Однако crossdomain.xml позволяет установленным сайтам получать доступ ко всем данным, а настройка заголовков очень сложна.

Таким образом, вы можете настроить jsonp в возвращаемых данных с вашего разрешения, чтобы этот интерфейс позволял всем вызывающим получать данные.

Принцип работы JSONP.

JSONP — это принцип, основанный на использовании методов обратного вызова.

На веб-странице, если вы подключаете js с других страниц, то js этого страницы может вызывать код вашего веб-сайта.

Прямой запрос JS и выводимый JavaScript-код на динамических страницах (jsp, php, aspx) дают одинаковый эффект.

function showjson(json){
    alert(json.url);
}

如果引用的js或动态页面里有 showjson({"url":" http://www.bejson.com "});这行代码的话,那就会弹出 http://www.bejson.com

Первый способ JSONP заключается в том, чтобы загрузить целевой ресурс в формате JavaScript, хотя на самом деле это может быть PHP.

Далее мы сделаем запрос на этой странице. http://www.ibilibili.com/static/js/forbejson/userinfo.php Данные страницы, этот PHP-страница будет иметь функцию обратного вызова showjson, чтобы вызвать метод showjson на нашей странице bejson и передать ему JSON:

< ?php 
    // Здесь в php-странице вызывается метод showjson, который должен совпадать с методом обратного вызова, определенным на локальной странице выше.
    echo 'showjson({"url":"http://www.bejson.com"})';
?>

Запрос и обратный вызов функции на PHP:

$("#getuserp").click(function(){
    $.getScript("//www.bejson.com/test/userinfop.php");
});

Если мы перехватим пакет, то увидим (как на рисунке выше), что после нажатия кнопки был инициирован HTTP-запрос.

Запросил// www.bejson.com/test/userinfop.php страница,

页面里输出了 showjson({"url":" http://www.bejson.com "}) ,

поскольку это является загрузка в формате файла javascript Таким образом, он инициирует обратный вызов к локальной странице showjson (смотрите зеленую стрелку) и передает параметры json (смотрите красную стрелку), в результате чего появляется url из json.

Прямо использовать ajax из jQuery для запроса jsonp.

Спасибо. горлянка Укажите ошибки в коде и предоставьте правильный код.

​x
 $.ajax({
     url:'//www.bejson.com/test/userinfop.php',
     type:"GET",
            dataType:"jsonp",
            jsonp: false, 
            jsonpCallback: "showjson", //Значение здесь должно совпадать с именем функции обратного вызова.
            success:function(data){
                console.log("Script loaded and executed.");
            },
            error:function (textStatus) { // Функция, вызываемая при неудачном запросе
                console.log(JSON.stringify(textStatus));
            }
});