При столкновении с междоменными проблемами в разработке проектов они обычно решаются через JSONP. Но что такое JSONP и что является принципом реализации. Вы можете тщательно изучить его в свободное время проекта.
1. Что такое JSONP?
Чтобы понять JSONP, я должен упомянуть JSON, так что же такое JSON?
JSON является подмножеством объекта буквальной нотации JavaScript. Поскольку JSON является подмножеством JavaScript, он может использоваться на языке без мидий и суеты.
JSONP (JSON с заполнением)-это неофициальный протокол, который позволяет интегрировать теги скрипта на стороне сервера возвращаться к клиенту, а доступ к перекрестному домену достигается с помощью формы обратного вызова JavaScript (это просто простая реализация JSONP).
2. Что такое JSONP?
Из-за ограничения политики одинакового происхождения, Xmlhttprequest позволяет только ресурсам текущего источника (доменное имя, протокол, порт). Чтобы реализовать перекрестные запросы, запросы междомена могут быть реализованы с помощью тегов сценариев, а затем вывод данных JSON на сервере и выполнять функции обратного вызова, тем самым решение запросов данных междомена.
Поколение JSONP
1. Как мы все знаем, ресурсы запроса AJAX ограничены одним и тем же доменом, независимо от того, являются ли они статическими ресурсами, динамическими страницами или веб -сервисами.
2. В то же время мы обнаружили, что при вызове файлов JS на веб-странице их не влияет кросс-домен (не только это, мы также обнаружили, что все теги с атрибутом 'src' обладают возможностями кросс-домены, такие как <cript>, <img>, <iframe> и т. Д.)
3. Можно представить, что в настоящее время, если вы хотите получить доступ к данным через домены через Интернет (элементы управления ActiveX, агенты сервера, веб -сайты HTML5 и т. Д.).
4. Передача данных. Мы знаем, что формат данных чистого символа, называемый JSON, может кратко описать сложные структуры данных, а также изначально поддерживается JS. Он может легко обрабатывать данные в этом формате на клиенте.
5. Решение ясно с первого взгляда. Веб-сторона вызывает динамически сгенерированные файлы JS на сервере кросс-домен так же, как и вызывающий скрипт. Причина, по которой сервер хочет динамически генерировать файлы JS, заключается в получении имени функции обратного вызова клиента и передачи данных, необходимых клиентом в формат JSON (или Pure String).
6. После того, как клиент успешно вызывает файл JS, получены параметры в функции обратного вызова. Остальное - это обработка данных. Этот метод выглядит очень похоже на Ajax, но он не то же самое (jQuery инкапсулирует JSONP и Ajax, и если вы не поймете, вы его путаете)
7. Чтобы облегчить клиенту использовать данные, был постепенно сформирован неформальный протокол передачи. Люди называют это JSONP. Одним из ключевых моментов этого протокола является позволить пользователям передавать параметр обратного вызова на сервер. Когда сервер возвращает данные, параметр обратного вызова будет использоваться в качестве имени функции для обертывания данных JSON, чтобы клиент мог настроить свои собственные функции для автоматического обработки данных возврата.
Хорошо, я не знаю, понимаете ли вы JSONP. Если нет, я суммирую это. Если у вас его нет, не бей меня.
Фактически, принцип заключается в том, что клиент запрашивает ссылку и добавляет необходимые параметры. Обратный вызов означает, что это запрос JSONP (передний конец и задний день могут быть объединены сами по себе). Фон анализирует ссылку на запрос и обнаруживает, что это запрос JSONP. Затем генерирует метод вызова и динамически генерирует строку (может быть JSON или Pure String) в соответствии с параметрами запроса. Таким образом, клиент может получить доступ к данным и выполнить последующую обработку.
Сказав так много, это не мой стиль, чтобы не добавлять код, я добавляю код. Полем
Функциональный тест (data) {console.log (data)} var url = "http://www.x.com/test?a=1&callback=test" // Передача параметра. Фоновая обработка генерирует следующий (Fictitious Data) Test ("aaaaaaa") тест ({a: 1, b: 2}) // Затем передний конечный доступ и выполняет его через тег скрипта, приведенный выше var script = document. document.getElementsbytagname ('head') [0] .appendchild (script); // затем будет вызван метод испытаний страницы, который является принципом реализации JSONP.О реальности JSONP в jQuery
$ .ajax ({type: «get», url: «http: //xdcn/asych/adv.html? loc = 8 & callback =? Запускается на успех) Тип: «post», // jsonp может только отправлять запросы на получение GET, даже если я устанавливаю тип запроса в postDatatype: «jsonp», // Скажите JQUERY, что это данные JSONP, вам необходимо генерировать теги скрипта для загрузки JSDATA: {a: «1»},/*Успех: функция (Data) {/методы jq wit wit wit jq wit wit wrature wrable wit wrature wrable whit wit jq wit wit wra electure после jq wit wit wit wit wit wrast wra electure wra wit wit wit wra electure while wra electure после j "?") $ ("Body"). Append (data);},*/ошибка: функция (xmlhttprequest, textStatus, ErrsThrown) {//Alert(ErrorThrown););Прочитав приведенный выше код и комментарии, я считаю, что все понимают это. Хотя jQuery инкапсулирует JSONP в AJAX, он по сути отличается.
Ядро Ajax заключается в том, чтобы получить содержимое, отличное от этой страницы, через xmlhttprequest, в то время как ядро JSONP состоит в том, чтобы динамически добавить теги <script>, чтобы вызвать сценарии JS, предоставленные сервером.
Следовательно, разница между AJAX и JSONP заключается не в том, является ли он перекрестный домен. Ajax также может достичь междоменного через серверный прокси, а сам JSONP не исключает получения данных в том же домене.
Как упоминалось выше, форматы данных JSONP и Ajax не должны быть JSON, но также могут быть чистыми струнами.
Короче говоря, JSONP не является подмножеством AJAX, и даже если JQUERY инкапсулирует JSONP в AJAX, это не может изменить это.
Выше приведено подробное объяснение примера перекрестного запроса JS JSOP, представленного вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!