JSONP
JSONP is 'n metode om JSON-data te stuur sonder om bekommerd te wees oor kruisdomeinkwessies.
JSONP gebruik nie die XMLHttpRequestvoorwerp nie.
JSONP gebruik <script>eerder die merker.
JSONP Inleiding
JSONP staan vir JSON met Padding.
Om 'n lêer van 'n ander domein te versoek kan probleme veroorsaak as gevolg van kruisdomeinbeleid.
Om 'n eksterne skrif van 'n ander domein te versoek, het nie hierdie probleem nie.
JSONP gebruik hierdie voordeel, en versoek lêers met behulp van die script tag in plaas van die XMLHttpRequestobjek.
<script src="demo_jsonp.php">
Die bedienerlêer
Die lêer op die bediener draai die resultaat in 'n funksie-oproep:
Voorbeeld
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Die resultaat gee 'n oproep terug na 'n funksie genaamd "myFunc" met die JSON-data as 'n parameter.
Maak seker dat die funksie op die kliënt bestaan.
Die JavaScript-funksie
Die funksie genaamd "myFunc" is op die kliënt geleë en gereed om JSON-data te hanteer:
Voorbeeld
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Skep 'n dinamiese skripmerker
Die voorbeeld hierbo sal die "myFunc" funksie uitvoer wanneer die bladsy laai, gebaseer op waar jy die script tag geplaas het, wat nie baie bevredigend is nie.
Die skripmerker moet slegs geskep word wanneer dit nodig is:
Voorbeeld
Skep en voeg die <script>-merker in wanneer 'n knoppie geklik word:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Dinamiese JSONP-resultaat
Die voorbeelde hierbo is steeds baie staties.
Maak die voorbeeld dinamies deur JSON na die php-lêer te stuur, en laat die php-lêer 'n JSON-voorwerp terugstuur op grond van die inligting wat dit kry.
PHP lêer
<?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-lêer verduidelik:
- Skakel die versoek om in 'n objek deur die PHP-funksie json_decode() .
- Toegang tot die databasis, en vul 'n skikking met die gevraagde data.
- Voeg die skikking by 'n voorwerp.
- Skakel die skikking om na JSON deur die json_encode() funksie te gebruik.
- Draai "myFunc()" om die terugkeervoorwerp.
JavaScript voorbeeld
Die "myFunc"-funksie sal vanaf die php-lêer geroep word:
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;
}
Terugbelfunksie
Wanneer jy geen beheer oor die bedienerlêer het nie, hoe kry jy die bedienerlêer om die korrekte funksie te roep?
Soms bied die bedienerlêer 'n terugbelfunksie as 'n parameter:
Voorbeeld
Die php-lêer sal die funksie wat jy deurgee as 'n terugbelparameter noem:
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);