JSONP
JSONP — это метод отправки данных JSON, не беспокоясь о междоменных проблемах.
JSONP не использует XMLHttpRequestобъект.
Вместо этого JSONP использует этот <script>тег.
Введение в JSONP
JSONP означает JSON с дополнением.
Запрос файла из другого домена может вызвать проблемы из-за междоменной политики.
Запрос внешнего скрипта из другого домена не имеет этой проблемы.
JSONP использует это преимущество и запрашивает файлы, используя тег скрипта вместо XMLHttpRequestобъекта.
<script src="demo_jsonp.php">
Файл сервера
Файл на сервере оборачивает результат внутри вызова функции:
Пример
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Результат возвращает вызов функции с именем «myFunc» с данными JSON в качестве параметра.
Убедитесь, что функция существует на клиенте.
Функция JavaScript
Функция с именем «myFunc» находится на клиенте и готова обрабатывать данные JSON:
Пример
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Создание тега динамического скрипта
В приведенном выше примере будет выполняться функция «myFunc» при загрузке страницы в зависимости от того, куда вы поместили тег script, что не очень хорошо.
Тег script следует создавать только при необходимости:
Пример
Создайте и вставьте тег <script> при нажатии кнопки:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Динамический результат JSONP
Приведенные выше примеры все еще очень статичны.
Сделайте пример динамическим, отправив JSON в php-файл, и пусть php-файл возвращает объект JSON на основе полученной информации.
PHP-файл
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj =
json_decode($_GET["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM
".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo "myFunc(".json_encode($outp).")";
?>
Объяснение файла PHP:
- Преобразуйте запрос в объект, используя функцию PHP json_decode() .
- Получите доступ к базе данных и заполните массив запрошенными данными.
- Добавьте массив к объекту.
- Преобразуйте массив в JSON с помощью функции json_encode() .
- Оберните "myFunc()" вокруг возвращаемого объекта.
Пример JavaScript
Функция «myFunc» будет вызываться из файла php:
const obj = { table: "products", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
function myFunc(myObj) {
let txt = "";
for (let x in myObj)
{
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
Функция обратного вызова
Когда у вас нет контроля над файлом сервера, как заставить файл сервера вызывать правильную функцию?
Иногда файл сервера предлагает функцию обратного вызова в качестве параметра:
Пример
Файл php будет вызывать функцию, которую вы передаете в качестве параметра обратного вызова:
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);