JSONP
JSONP è un metodo per inviare dati JSON senza preoccuparsi di problemi tra domini.
JSONP non utilizza l' XMLHttpRequestoggetto.
JSONP utilizza <script>invece il tag.
Introduzione a JSONP
JSONP sta per JSON con riempimento.
La richiesta di un file da un altro dominio può causare problemi, a causa di criteri tra domini.
La richiesta di uno script esterno da un altro dominio non presenta questo problema.
JSONP sfrutta questo vantaggio e richiede i file utilizzando il tag script anziché l' XMLHttpRequestoggetto.
<script src="demo_jsonp.php">
Il file del server
Il file sul server racchiude il risultato all'interno di una chiamata di funzione:
Esempio
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Il risultato restituisce una chiamata a una funzione denominata "myFunc" con i dati JSON come parametro.
Assicurarsi che la funzione esista sul client.
La funzione JavaScript
La funzione denominata "myFunc" si trova sul client ed è pronta per gestire i dati JSON:
Esempio
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Creazione di un tag di script dinamico
L'esempio sopra eseguirà la funzione "myFunc" durante il caricamento della pagina, in base a dove hai inserito il tag di script, il che non è molto soddisfacente.
Il tag script deve essere creato solo quando necessario:
Esempio
Crea e inserisci il tag <script> quando si fa clic su un pulsante:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Risultato JSONP dinamico
Gli esempi sopra sono ancora molto statici.
Rendi dinamico l'esempio inviando JSON al file php e lascia che il file php restituisca un oggetto JSON in base alle informazioni che ottiene.
File 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).")";
?>
File PHP spiegato:
- Converti la richiesta in un oggetto, usando la funzione PHP json_decode() .
- Accedi al database e riempi un array con i dati richiesti.
- Aggiungi l'array a un oggetto.
- Converti l'array in JSON usando la funzione json_encode() .
- Avvolgi "myFunc()" attorno all'oggetto restituito.
Esempio JavaScript
La funzione "myFunc" verrà richiamata dal file 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;
}
Funzione di richiamata
Quando non hai alcun controllo sul file del server, come fai a chiamare il file del server la funzione corretta?
A volte il file del server offre una funzione di callback come parametro:
Esempio
Il file php chiamerà la funzione passata come parametro di callback:
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);