JSONP

JSONP er en metode til at sende JSON-data uden at tage højde for cross-domain problemer.

JSONP bruger ikke XMLHttpRequest-objektet.

JSONP bruger <script> Tagget erstattes.

JSONP Introduktion

JSONP betyder JSON with Padding.

At anmode om filer fra en anden domæne vil forårsage problemer på grund af cross-domain politik.

At anmode om eksterne skript fra en anden domæne, er der ingen problem.

JSONP udnytter denne fordel og bruger script-tagget i stedet for XMLHttpRequest-objektet.

<script src="demo_jsonp.php">

Server-fil

Serveren på filen indeholder resultaterne af funktion kald:

Eksempel

<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "myFunc(".$myJSON.");";
?>

Vis PHP-filen

Resultatet returnerer en kald til funktionen "myFunc", med JSON-dataene som parameter.

Sørg for, at funktionen eksisterer på klienten.

JavaScript funktioner

Funktionen "myFunc" er placeret på klienten og bruges til at håndtere JSON-data:

Eksempel

function myFunc(myObj)  {
    document.getElementById("demo").innerHTML =  myObj.name;
}

Prøv det selv

Opret dynamiske script-tags

Det tidligere eksempel vil køre "myFunc"-funktionen ved siden af, hvilket ikke er så tilfredsstillende, afhængigt af, hvor du placerer script-tagget.

Script skal kun oprettes, når det er nødvendigt:

Eksempel

Opret og indsæt <script>-tagget, når knappen trykkes:

function clickButton() {
    var s = document.createElement("script");
    s.src = "demo_jsonp.php";
    document.body.appendChild(s);
}

Prøv det selv

Dynamiske JSONP-resultater

Det tidligere eksempel er stadig statisk.

Man kan oprette dynamiske eksempler ved at sende JSON til PHP-filen og derefter få en JSON-objekt tilbage baseret på informationerne fra denne php-fil.

PHP-fil

<?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-fil forklaring:

  • Konverter anmodningen til et objekt, brug PHP-funktionen json_decode().
  • Tilgå databasen og fyld arrayet med anmodede data.
  • Tilføj arrayet til objektet.
  • Brug json_decode() Funktionen konverterer arrayet til JSON.
  • Brug "myFunc()" til at indpakke returobjektet.

JavaScript eksempel

Funktionen "myFunc" vil blive kaldt fra en php-fil:

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;
}

Prøv det selv

Callback-funktion

Hvis du ikke kan kontrollere serverfilen, hvordan får du serverfilen til at kalde den korrekte funktion?

Nogle gange tilbyder serverfilen en callback-funktion som parameter:

Eksempel

PHP-filen vil kalde funktionen, du overfører som callback parameter:

function clickButton() {
    var s = document.createElement("script");
    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
    document.body.appendChild(s);
}

Prøv det selv