JSONP это метод отправки данных JSON, не беспокоясь о междоменных проблемах.
JSONP не использует объект XMLHttpRequest.
JSONP Вместо этого JSONP использует тег <script>.
JSONP Введение
JSONP означает JSON с заполнением.
Запрос файла из другого домена может вызвать проблемы из-за междоменной политики.
Запрос внешнего сценария script из другого домена не вызывает этой проблемы.
JSONP использует это преимущество и запрашивает файлы, используя тег скрипта вместо объекта XMLHttpRequest.
<script src="demo_jsonp.php">
Серверный файл
Файл на сервере обертывает результат внутри вызова функции:
<?php
$myJSON = '{ "name":"Щипунов", "age":30, "city":"Пермь" }';
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() {
var 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:
function clickButton() {
var obj, s
obj = { table: "products", limit: 10 };
s =
document.createElement("script");
s.src = "jsonp_demo_db.php?x="
+ JSON.stringify(obj);
document.body.appendChild(s);
}
function myFunc(myObj)
{
var x, txt = "";
for (x in myObj)
{
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
Попробуйте сами »
Функция обратного вызова
Если у вас нет контроля над серверным файлом, как заставить серверный файл вызывать правильную функцию?
Иногда файл сервера предлагает функцию обратного вызова в качестве параметра:
Файл php вызовет функцию, которую вы передаете в качестве параметра обратного вызова:
function clickButton() {
var s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);
}
Попробуйте сами »