Рубрики
Uncategorized

Глубокое понимание интерфейса API междоменного доступа JSONP

Автор оригинала: David Wong.

Объяснять

Существует целых семь или восемь решений междоменных проблем. Не говорите, что их так много. Я не серьезно отношусь к тебе, и ты не серьезно относишься ко мне?! Добровольно Baidu или Google Я не буду рассказывать вам здесь так много вещей, только самую часто используемую. JSONP Вы должны сказать JSONP Он не самый часто используемый. Я в это не верю. Ты веришь в это. Ха-ха, ты счастлива?

О кросс-домене

  • Политика гомологии браузера

Чтобы понять, что такое Кросс-домен Вам нужно знать, что такое стратегия гомологии браузера

  • Требования к ресурсам для браузеров, разрешающих доступ

На самом деле, всего одно предложение. То же доменное имя, тот же протокол, тот же порт Доступ разрешен только в браузерах, это связано с соображениями безопасности, весь остальной доступ запрещен!

  • Общее представление о гомологических ресурсах, разрешенных браузерами

Например: a.com/article/mid/512 Посетить a.com/data/detail/512 Доступ разрешен. a.com/article/mid/512 Посетить b.com/data/detail/512 Нет!

  • Доступ к ресурсам доменного имени B под Доменным именем

Так что же делать, если вам нужно получить доступ к ресурсам под разными доменными именами? Итак, вот в чем вопрос…! Кросс-домен

Не используйте междоменный доступ

Это обычный способ доступа к URL-адресам других ресурсов доменных имен без междоменного доступа! Доступ к другим URL – адресам ресурсов доменных имен невозможен!

Интерфейсный код





    
    JSONP TEST

Советы консоли Инструментов разработчика браузера

Можно обнаружить, что консоль не выводит никаких возвращаемых данных, поскольку у нее нет никаких данных для вывода, но выдает следующую информацию о запросе:

Подробная информация о списке веб-запросов для инструментов разработчика браузера

В списке сетевых запросов вы можете видеть, что URL-адрес ресурса запроса не возвращает никаких данных.

Внутренняя форма возврата данных

Поскольку переданный jQuery Из AJAX Метод возвращает данные в виде JSON Формата, запрашивает URL-адреса ресурсов, данные не получены, прямой доступ к URL-адресам ресурсов через браузеры обычно может получать данные!

Использование JSONP для доступа к ресурсам в разных доменах

Интерфейсная или клиентская обработка

Из вышесказанного вы можете видеть, что прямой доступ к URL-адресам ресурсов через браузеры, то есть интерфейсы API, может получать данные и возвращать данные в виде JSON Способ запретить доступ-передать tem.mac.dev Доступ к этому доменному имени warnerwu.centos.dev Необходимо использовать URL-ресурсы интерфейса API под доменными именами JSONP Все, что вам нужно сделать, это jQuery в AJAX Метод в Тип данных Изменить значение на

dataType : 'JSONP'

Будьте осторожны

Это ограничивается только вышеупомянутым “доступом к данным непосредственно через URL интерфейса API браузера” через форму JSONP для получения, но только для этого, следующей страницы обновления через JSONP Доступ к URL интерфейса API ресурса, чтобы убедиться в этом!

Советы консоли Инструментов разработчика браузера

Больше не видно под консолью Перехваченные междоменные запросы Предупреждающее сообщение! Но Абсолютно пусто О

Подробная информация о списке веб-запросов для инструментов разработчика браузера

Теперь, когда я нахожусь в Консоли Я ничего не вижу. предупреждение Вы также не можете видеть вывод данных. Просто взгляните. сеть Как насчет списка запросов?

из сети Последний элемент в списке запросов показывает, что полный URL-адрес интерфейса API для доступа к ресурсам:

http://warnerwu.centos.dev/?c=adCreativeLib&a=api&type=list&callback=jQuery21408945840059161158_1519958486174&_=1519958486175

Здесь вы найдете адрес ресурса запроса с AJAX Методом в url Значения параметров совершенно разные! У него есть еще два параметра:

callback=jQuery21408945840059161158_1519958486174&_=1519958486175

Ну, в использовании jQuery Метода AJAX , если указанный способ возврата данных JSONP Когда, то есть AJAX Буквальное количество объекта параметра Тип данных: 'JSONP' Следующим образом:

$.ajax({
    type : 'GET',
    dataType : 'JSONP',
    url : "http://warnerwu.centos.dev/?c=adCreativeLib&a=api&type=list",
    success : function (data){
        console.log(data);
    }
});

Это произойдет во время запроса ресурсов. AJAX Литеральное количество объекта параметра метода url Автоматическое добавление параметров к определенным ссылкам обратный вызов и _ И значения этих двух параметров в основном никогда не повторяются

Параметр AJAX объект буквальное количество URL-адрес Значение параметра JSONP
  • Обратный вызов: Значение является случайным для jQuery Имя функции обратного вызова, за которым следует строка случайных чисел
  • _ Значение-это строка случайных чисел, которая гарантирует, что каждый запрос AJAX является новым и не использует URL-адрес, запрошенный браузером Механизм кэширования Существующие ресурсы

Как вы можете видеть на рисунке выше сеть Интерфейс API обращается к списку конкретных параметров URL-адреса в списке ресурсов запроса, в то время как интерфейс API обращается к списку конкретных параметров в списке ресурсов запроса. ответ Конкретно:

Можете видеть ответ Возвращает данные в формате JSON, что неверно! Просто посмотри еще раз. Консоль :

Вы можете видеть, что консоль все еще там Абсолютно пуста ! Ничего, по каталогу. Интерфейс или клиент Проделанная работа завершена! Далее следует Серверная сторона Интерфейс API для внесения некоторых изменений!

Обработка на стороне сервера

Серверный язык, используемый здесь,- PHP То же самое верно и для других языков.

На самом деле настройка на стороне сервера очень проста. Ему нужно только получить параметры запроса. обратный вызов А затем вернитесь к обратному вызову Кодированной строке данных в формате JSONP со значением параметра в качестве имени функции

Перед Настройкой интерфейса API

Этот метод обычно используется, когда нет междоменного интерфейса API для запроса данных, но он не является распространенным, если для получения данных используется интерфейс API междоменных запросов JSONP.

После настройки интерфейса API

Вы можете видеть, что форма возврата данных обрабатывается здесь на стороне сервера для общих запросов, независимо от того, доступен ли интерфейс API для междоменных запросов или нет! __________

Снова обновите данные интерфейса API междоменного запроса страницы

Вы обнаружите, что запрос данных интерфейса API выполнен успешно, и при запросе обратного вызова Значения параметров совпадают с возвращаемыми именами методов данных формата JSONP. Как обрабатывать данные в формате JSON?

Когда запрос выполняется успешно, он выполняется в jQuery ниже AJAX Сгенерированный метод обратный вызов Функция пары значений параметров-это просто данные в формате JSONP, возвращенные с сервера. После выполнения функции она возвращает данные субъекта, которые являются теми же данными, что и тип данных, до возврата кода сервера.

Выше приведен вывод данных массива с помощью интерфейса API междоменных запросов через консоль

Выше приведен массив данных, полученных браузером при непосредственном доступе к интерфейсу API.

резюме

Используйте его просто jQuery Из AJAX Очень просто реализовать междоменные ресурсы запросов.

Интерфейсный код

$.ajax({
    type : 'GET',
    dataType : 'JSONP',
    url : "http://warnerwu.centos.dev/?c=adCreativeLib&a=api&type=list",
    success : function (data){
        console.log(data);
    }
});

Код на стороне сервера

На самом деле, очень простой вопрос здесь сказал так много, вы меня простите! ?

Вышесказанное Глубокое понимание интерфейса API междоменного доступа JSONP Спасибо за вашу поддержку!

Я надеюсь, что эта статья будет полезна для вашей работы и учебы.

Как я могу отблагодарить вас, если вы считаете, что это хорошо, и вы получили знания? Черт возьми! Хвала ему!

удачи! от warnerwu в 2018.03.02 вечера, адрес электронной почты [email protected]