Учебник JSONP

Jsonp (JSON with Padding) — это «модель использования» json, которая позволяет веб-странице из другого домена (сайта) получать данные, то есть читать данные через跨домен.

Что такое JSONP?

JSONP представляет собой заполненный JSON.

Из-за политики跨域, запрос файла из другого домена может вызвать проблемы.

Запрос внешнего скрипта из другого домена не вызывает этой проблемы.

JSONP использует это преимущество и использует<script>Используется тег, а не объект XMLHttpRequest для запроса файла.

　　<script src="jsonp_demo.php">

Файл на сервере (jsonp_demo.php) обертает результат в вызов функции:

　　<?php
　　$myJSON = '{ "name":"Seagull", "age":32, "city":"New Delhi" }';
　　echo "myFunc($myJSON);";
　　?>

Функция «myFunc» расположена на клиенте и может обрабатывать данные JSON:

function myFunc(myObj) {
　　document.getElementById("output").innerHTML = myObj.name;
}

Разница между JSON и JSONP

JSON: JavaScript использует JSON (JavaScript Object Notation) для обмена данными через сеть. Он тщательно проверяет JSON данные, которые представляют собой просто строковый формат JavaScript объекта.

　　{"name":"Seagull", "age":22, "city":"New Delhi"}

JSONP: JSONP - это JSON с заполнителем. Заполнитель означает, что функция заключена в JSON и затем возвращена в запрос.

　　myFunc({ "name":"Seagull", "age":22, "city":"New Delhi" })

Методы использования JSONP

• В HTML коде включен тег script. Источник тега script будет URL, из которого будут извлекаться данные. Web сервис позволяет指定回调 функцию. В URL в конце будет параметр callback.

• Когда браузер встречает элемент script, он отправляет HTTP запрос по исходному URL.

• Сервер отправляет ответ, содержащий JSON, заключенный в вызов функции.

• Браузер анализирует строковый формат JSON ответа и преобразует его в объект JavaScript. Вызовет回调 функцию и передаст созданный объект ей.

Создание динамического тега скрипта

В предыдущем примере функция "myFunc" выполняется при загрузке страницы в зависимости от места放置 тега script.

Но тег скрипта должен создаваться только по мере необходимости.

Ниже приведен пример, который создает и вставляет<script>Метка:

function createScriptDynamically() {
　　var elem = document.createElement("script");
　　elem.src = "jsonp_demo.php";
　　document.body.appendChild(elem);
}