JSONP
- Pagina precedente HTML JSON
- Pagina successiva Selettore jQuery
JSONP è un metodo per trasmettere dati JSON senza doversi preoccupare dei problemi di cross-domain.
JSONP non utilizza l'oggetto XMLHttpRequest.
Uso di JSONP <script> Il tag viene sostituito.
Introduzione a JSONP
JSONP sta per JSON with Padding.
Richiedere un file da un altro dominio può causare problemi a causa delle politiche di cross-domain.
Non c'è questo problema quando si richiede uno script esterno da un altro dominio.
JSONP sfrutta questo vantaggio e utilizza il tag script al posto dell'oggetto XMLHttpRequest.
<script src="demo_jsonp.php">
File Server
Il file sul server contiene il risultato encapsulato nella chiamata di funzione:
Esempio
<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "myFunc(".$myJSON.");";
?>
Il risultato restituisce la chiamata alla funzione "myFunc", con i dati JSON come parametro.
Assicurarsi che la funzione esista sul client.
Funzioni JavaScript
La funzione "myFunc" si trova sul lato client e viene utilizzata per elaborare i dati JSON:
Esempio
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
Creare tag script dinamici
L'esempio esegue la funzione "myFunc" durante il caricamento della pagina, il che potrebbe non essere soddisfacentemente in base alla posizione del tag script.
Il script dovrebbe essere creato solo quando necessario:
Esempio
Creare ed inserire il tag <script> quando viene cliccato il pulsante:
function clickButton() {
var s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Risultato JSONP dinamico
L'esempio precedente è statico.
E' possibile creare esempi dinamici inviando JSON al file PHP e ottenere un oggetto JSON in base alle informazioni di questo file php.
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).")";
?>
Spiegazione del file PHP:
- Convertire la richiesta in un oggetto, utilizzando la funzione PHP
json_decode(). - Accedere al database e riempire l'array con i dati richiesti.
- Aggiungere l'array all'oggetto.
- Utilizzare
json_decode()La funzione converte l'array in JSON. - Il contenuto dell'oggetto restituito viene encapsulato con "myFunc()".
Esempio JavaScript
Dal file php verrà chiamata la funzione "myFunc":
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;
}
Funzione di callback
Se non puoi controllare il file del server, come fare in modo che il file del server chiama la funzione corretta?
A volte il file del server fornisce la funzione di callback come parametro:
Esempio
Il file PHP chiamerà la funzione che hai passato come parametro di callback:
function clickButton() {
var s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);
}
- Pagina precedente HTML JSON
- Pagina successiva Selettore jQuery
