JSONP
JSONP это метод отправки данных JSON, не беспокоясь о междоменных проблемах.
JSONP не использует объект XMLHttpRequest.
JSONP вместо этого использует тег <script>.
JSONP Введение
JSONP означает JSON с Padding (т.е. с дополнением).
Запрос файла из другого домена может вызвать проблемы из-за междоменной политики.
Запрос внешнего скрипта из другого домена не вызывает этой проблемы.
JSONP использует это преимущество и запрашивает файлы с помощью тега script вместо объекта XMLHttpRequest.
<script src="demo_jsonp.php">
Файл сервера
Файл на сервере заключает результат в вызов функции:
Пример
<?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;
}
Попробуйте сами »
Создание тега динамического скрипта
В приведенном выше примере выполняется функция "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);
Попробуйте сами »
