Могу ли я сделать междоменный запрос JSONP в JavaScript без использования jQuery или другой внешней библиотеки? Я хотел бы использовать сам JavaScript, а затем проанализировать данные и сделать их объектом, чтобы я мог его использовать. Обязательно ли использовать внешнюю библиотеку? Если нет, как мне это сделать?
javascript
jsonp
Дейв
источник
источник
Ответы:
источник
foo(payload_of_json_data)
идея заключается в том, что когда он загружается в тег script, он вызывает функцию foo с полезной нагрузкой уже как объект javascript, и синтаксический анализ не требуется.Легкий пример (с поддержкой onSuccess и onTimeout). Вам нужно передать имя обратного вызова в URL, если вам это нужно.
Пример использования:
На GitHub: https://github.com/sobstel/jsonp.js/blob/master/jsonp.js
источник
Что такое JSONP?
При использовании jsonp важно помнить, что на самом деле это не протокол или тип данных. Это просто способ загрузки сценария на лету и обработки сценария, который вводится на страницу. В духе JSONP это означает введение нового объекта javascript с сервера в клиентское приложение / скрипт.
Когда нужен JSONP?
Это 1 метод, позволяющий одному домену асинхронно получать доступ / обрабатывать данные другого на той же странице. В первую очередь, он используется для переопределения ограничений CORS (Cross Origin Resource Sharing), которые возникают с запросом XHR (ajax). На загрузку скриптов не распространяются ограничения CORS.
Как это сделано
Внедрение нового объекта javascript с сервера может быть реализовано разными способами, но наиболее распространенной практикой является реализация сервером выполнения функции «обратного вызова» с переданным ей требуемым объектом. Функция обратного вызова - это просто функция, которую вы уже настроили на клиенте, и сценарий, который вы загружаете, вызывает в момент загрузки сценария для обработки переданных ему данных.
Пример:
У меня есть приложение, которое регистрирует все предметы в чьем-то доме. Мое приложение настроено, и теперь я хочу получить все предметы в главной спальне.
Мое приложение работает
app.home.com
. API-интерфейсы, с которых мне нужно загружать данные, включеныapi.home.com
.Если сервер явно не настроен для этого, я не могу использовать ajax для загрузки этих данных, так как даже страницы на отдельных поддоменах подпадают под ограничения XHR CORS.
В идеале настройте все, чтобы разрешить XHR домена x
В идеале, поскольку api и приложение находятся в одном домене, у меня может быть доступ для настройки заголовков
api.home.com
. Если я это сделаю, я могу добавитьAccess-Control-Allow-Origin:
элемент заголовка, предоставляющий доступ кapp.home.com
. Предполагая, что заголовок настроен следующим образом:,Access-Control-Allow-Origin: "http://app.home.com"
это намного безопаснее, чем настройка JSONP. Это потому, чтоapp.home.com
можно получить все, что угодно,api.home.com
неapi.home.com
предоставляя CORS доступа ко всему Интернету.Вышеупомянутое решение XHR невозможно. Настройка JSONP В моем клиентском скрипте: я настроил функцию для обработки ответа от сервера, когда я выполняю вызов JSONP. :
Сервер необходимо настроить так, чтобы он возвращал мини-скрипт, который выглядит примерно так.
"processJSONPResponse('{"room":"main bedroom","items":["bed","chest of drawers"]}');"
Он может быть предназначен для возврата такой строки, если//api.home.com?getdata=room&room=main_bedroom
вызывается что-то подобное .Затем клиент устанавливает тег сценария как таковой:
Это загружает скрипт и немедленно вызывает
window.processJSONPResponse()
как написано / эхо / распечатано сервером. Данные, переданные в качестве параметра функции, теперь хранятся вdataFromServer
локальной переменной, и вы можете делать с ними все, что вам нужно.Очистить
Как только у клиента есть данные, т.е. сразу после добавления скрипта в DOM элемент скрипта может быть удален из DOM:
источник
SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
. После добавления одинарных кавычек к данным все работало нормально, поэтому:"processJSONPResponse('{"room":"main bedroom","items":["bed","chest of drawers"]}');"
Насколько я понимаю, вы на самом деле используете теги скриптов с JSONP, ооо ...
Первый шаг - создать вашу функцию, которая будет обрабатывать JSON:
Убедитесь, что эта функция доступна на глобальном уровне.
Затем добавьте в DOM элемент скрипта:
Сценарий загрузит JavaScript, созданный поставщиком API, и выполнит его.
источник
eval
илиparse
или что - нибудь. Вы должны получить JavaScript, который браузер может просто выполнять, верно?как я использую jsonp, как показано ниже:
затем используйте метод jsonp следующим образом:
ссылка:
JavaScript XMLHttpRequest с использованием JsonP
http://www.w3ctech.com/topic/721 (расскажите о способе использования Promise)
источник
У меня есть чистая библиотека javascript для этого https://github.com/robertodecurnex/J50Npi/blob/master/J50Npi.js
Взгляните на него и дайте мне знать, если вам понадобится помощь в использовании или понимании кода.
Кстати, у вас есть простой пример использования: http://robertodecurnex.github.com/J50Npi/
источник
Пример использования:
источник
window[callback] = null
разрешить сборку мусора.Я написал библиотеку, чтобы справиться с этим как можно проще. Не нужно делать его внешним, это всего лишь одна функция. В отличие от некоторых других параметров, этот сценарий очищается после себя и универсален для выполнения дальнейших запросов во время выполнения.
https://github.com/Fresheyeball/micro-jsonp
источник
Ниже приведен
JavaScript
примерJSONP
звонка без JQuery:Также вы можете обратиться к моему
GitHub
репозиторию для справки.https://github.com/shedagemayur/JavaScriptCode/tree/master/jsonp
источник
источник
window.document.getElementsByTagName('script')[0];
и нетdocument.body.appendChild(…)
?logAPI
следует устанавливать,null
когда это будет сделано, чтобы можно было выполнить сборку мусора?Если вы используете ES6 с NPM, вы можете попробовать модуль узла «fetch-jsonp». Fetch API Обеспечивает поддержку вызова JsonP как обычного вызова XHR.
Предпосылка: вы должны использовать
isomorphic-fetch
модуль узла в своем стеке.источник
Просто вставьте ES6-версию хорошего ответа собстела:
источник