JSONP
JSONP - це метод надсилання даних JSON, не турбуючись про міждоменні проблеми.
JSONP не використовує об’єкт XMLHttpRequest.
JSONP замість цього використовує тег <script>.
JSONP Інтро
JSONP означає JSON із Padding (підкладка).
Запит файлу з іншого домену може спричинити проблеми через міждоменну політику.
Запит зовнішнього скрипту з іншого домену не має цієї проблеми.
JSONP використовує цю перевагу та запитує файли за допомогою тегу script замість об’єкта XMLHttpRequest.
<script src="demo_jsonp.html">
Файл сервера
Файл на сервері загортає результат у виклик функції:
Приклад
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Показати PHP файл »
Результат повертає виклик функції з назвою "myFunc" з даними JSON як параметром.
Переконайтеся, що функція існує на клієнті.
Функція JavaScript
Функція з назвою "myFunc" знаходиться на клієнті та готова до обробки даних JSON:
Приклад
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
Спробуйте самі »
Створення динамічного тегу script
Наведений вище приклад виконає функцію "myFunc", коли сторінка завантажується, залежно від місця розміщення тегу script, що не дуже задовольняє.
Тег script слід створювати лише за потреби:
Приклад
Створіть і вставте тег <script>, коли натиснуто кнопку:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.html";
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.html?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.html?callback=myDisplayFunction";
document.body.appendChild(s);
Спробуйте самі »
