JSONP
JSONP to metoda wysyłania danych JSON bez martwienia się o problemy między domenami.
JSONP nie używa XMLHttpRequestobiektu.
JSONP <script>zamiast tego używa tagu.
Wprowadzenie do JSONP
JSONP oznacza JSON z dopełnieniem.
Żądanie pliku z innej domeny może powodować problemy ze względu na zasady dotyczące wielu domen.
Żądanie skryptu zewnętrznego z innej domeny nie ma tego problemu.
JSONP wykorzystuje tę zaletę i żąda plików przy użyciu tagu skryptu zamiast XMLHttpRequestobiektu.
<script src="demo_jsonp.php">
Plik serwera
Plik na serwerze zawiera wynik w wywołaniu funkcji:
Przykład
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Wynik zwraca wywołanie funkcji o nazwie „myFunc” z danymi JSON jako parametrem.
Upewnij się, że funkcja istnieje na kliencie.
Funkcja JavaScript
Funkcja o nazwie „myFunc” znajduje się na kliencie i jest gotowa do obsługi danych JSON:
Przykład
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Tworzenie dynamicznego tagu skryptu
Powyższy przykład wykona funkcję „myFunc” podczas ładowania strony, na podstawie miejsca umieszczenia tagu skryptu, co nie jest zbyt satysfakcjonujące.
Tag skryptu powinien być tworzony tylko w razie potrzeby:
Przykład
Utwórz i wstaw tag <script> po kliknięciu przycisku:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Dynamiczny wynik JSONP
Powyższe przykłady są nadal bardzo statyczne.
Spraw, aby przykład był dynamiczny, wysyłając JSON do pliku php, a plik php zwróci obiekt JSON na podstawie uzyskanych informacji.
plik 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).")";
?>
Wyjaśnienie pliku PHP:
- Przekształć żądanie w obiekt za pomocą funkcji PHP json_decode() .
- Uzyskaj dostęp do bazy danych i wypełnij tablicę żądanymi danymi.
- Dodaj tablicę do obiektu.
- Przekonwertuj tablicę na JSON za pomocą funkcji json_encode() .
- Owiń "myFunc()" wokół zwracanego obiektu.
Przykład JavaScript
Funkcja „myFunc” zostanie wywołana z pliku 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;
}
Funkcja oddzwaniania
Kiedy nie masz kontroli nad plikiem serwera, jak sprawić, by plik serwera wywołał poprawną funkcję?
Czasami plik serwera oferuje funkcję zwrotną jako parametr:
Przykład
Plik php wywoła funkcję, którą przekazujesz jako parametr wywołania zwrotnego:
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);