JSONP
JSONP является методом для отправки данных JSON, не беспокоясь о проблемах между доменами.
JSONP не использует объект XMLHttpRequest.
Вместо этого JSONP использует тег <script>.
JSONP интро
JSONP расшифровывается как JSON с заполнением.
Запрос файла из другого домена может вызвать проблемы из-за кросс-доменной политики.
Запрос внешнего сценария из другого домена не имеет этой проблемы.
JSONP использует это преимущество и запрашивает файлы, используя тег script вместо объекта XMLHttpRequest.
<script src="demo_jsonp.php">
Файл сервера
Файл на сервере обтекает результат внутри вызова функции:
Пример
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Show PHP file »
Результат возвращает вызов функции с именем "myFunc" с данными JSON в качестве параметра.
Убедитесь, что функция существует на клиентском компьютере.
Функция JavaScript
Функция с именем "myFunc" находится на клиентском компьютере и готова обработать данные JSON:
Пример
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Создание тега динамического сценария
Приведенный выше пример будет выполнять функцию "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 с помощью функции жсон_енкоде () .
- Оберните "myFunc ()" вокруг возвращаемого объекта.
JavaScript Example
The "myFunc" function will be called from the php file:
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);
}
