JS-zelfstudie

JS HOME JS Introductie JS Waarheen? JS-uitgang JS-verklaringen JS-syntaxis JS-opmerkingen JS-variabelen JS Let JS Const JS-operators JS Rekenen JS-opdracht JS-gegevenstypen JS-functies JS-objecten JS-evenementen JS-snaren JS String-methoden JS String zoeken JS String-sjablonen JS-nummers JS-nummermethoden JS-arrays JS-array-methoden JS-array sorteren JS-array-iteratie JS Array Const JS-datums JS-datumnotaties JS Datum Ophaalmethoden Methoden voor het instellen van JS-datum JS Math JS Willekeurig JS Booleans JS-vergelijkingen JS-voorwaarden JS-schakelaar JS Loop For JS-lus voor binnen JS Loop For Of JS-lus terwijl JS Break JS-iteraties JS-sets JS-kaarten JS Typeof JS Type conversie JS Bitwise JS RegExp JS-fouten JS-bereik JS Hijsen JS strikte modus JS dit trefwoord JS-pijlfunctie JS-lessen JS JSON JS-foutopsporing JS-stijlgids JS-best practices JS-fouten JS-prestaties JS Gereserveerde Woorden

JS-versies

JS-versies JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-geschiedenis

JS-objecten

Objectdefinities Objecteigenschappen Objectmethoden Objectweergave Objectaccessoires Objectconstructeurs Objectprototypes Object-Iterables Objectsets Objectkaarten Objectreferentie

JS-functies

Functiedefinities Functieparameters: Functie-aanroep Functie-oproep: Functie Toepassen Functie Sluitingen

JS-lessen

Klas Intro Klasse Overerving Klasse Statisch

JS Asynchrone

JS-callbacks JS asynchroon JS belooft JS Async/Wachten

JS HTML DOM

DOM Intro DOM-methoden DOM-document DOM-elementen DOM HTML DOM-formulieren DOM-CSS DOM-animaties DOM-evenementen DOM-gebeurtenisluisteraar DOM-navigatie DOM-knooppunten DOM-collecties DOM-knooppuntlijsten

JS-browserstuklijst

JS-venster JS-scherm JS-locatie JS-geschiedenis JS-navigator JS pop-upwaarschuwing JS-timing JS-koekjes

JS Web API's

Introductie web-API Web Forms API Webgeschiedenis-API Webopslag-API Web Worker-API Web Fetch-API Webgeolocatie-API

JS AJAX

Ajax-intro AJAX XMLHttp Ajax-verzoek Ajax-reactie AJAX XML-bestand AJAX PHP Ajax ASP AJAX-database AJAX-toepassingen Ajax-voorbeelden

JS JSON

JSON-intro JSON-syntaxis JSON versus XML JSON-gegevenstypen JSON ontleden JSON Stringify JSON-objecten JSON-arrays JSON-server JSON PHP JSON HTML JSON JSONP

JS versus jQuery

jQuery-kiezers jQuery HTML jQuery CSS jQuery DOM

JS-graphics

JS-graphics JS Canvas JS Plotly JS Chart.js JS Google-kaart JS D3.js

JS-voorbeelden

JS-voorbeelden JS HTML DOM JS HTML-invoer JS HTML-objecten JS HTML-evenementen JS-browser JS-editor JS-oefeningen JS-quiz JS-certificaat

JS-referenties

JavaScript-objecten HTML DOM-objecten


JSONP


JSONP is een methode om JSON-gegevens te verzenden zonder dat u zich zorgen hoeft te maken over domeinoverschrijdende problemen.

JSONP gebruikt het XMLHttpRequestobject niet.

JSONP gebruikt <script>in plaats daarvan de tag.


JSONP Intro

JSONP staat voor JSON met opvulling.

Het aanvragen van een bestand uit een ander domein kan vanwege domeinoverschrijdend beleid problemen veroorzaken.

Het aanvragen van een extern script van een ander domein heeft dit probleem niet.

JSONP maakt gebruik van dit voordeel en vraagt ​​bestanden aan met behulp van de scripttag in plaats van het XMLHttpRequestobject.

<script src="demo_jsonp.php">

Het serverbestand

Het bestand op de server verpakt het resultaat in een functieaanroep:

Voorbeeld

<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';

echo "myFunc(".$myJSON.");";
?>

Het resultaat retourneert een aanroep naar een functie met de naam "myFunc" met de JSON-gegevens als parameter.

Zorg ervoor dat de functie op de client bestaat.

De JavaScript-functie

De functie met de naam "myFunc" bevindt zich op de client en is klaar om JSON-gegevens te verwerken:

Voorbeeld

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


Een dynamische scripttag maken

In het bovenstaande voorbeeld wordt de functie "myFunc" uitgevoerd wanneer de pagina wordt geladen, op basis van waar u de scripttag plaatst, wat niet erg bevredigend is.

De scripttag mag alleen worden gemaakt als dat nodig is:

Voorbeeld

Maak en voeg de tag <script> in wanneer op een knop wordt geklikt:

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

Dynamisch JSONP-resultaat

Bovenstaande voorbeelden zijn nog erg statisch.

Maak het voorbeeld dynamisch door JSON naar het php-bestand te sturen en laat het php-bestand een JSON-object retourneren op basis van de informatie die het krijgt.

PHP-bestand

<?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-bestand uitgelegd:

  • Converteer het verzoek naar een object met behulp van de PHP-functie json_decode() .
  • Open de database en vul een array met de gevraagde gegevens.
  • Voeg de array toe aan een object.
  • Converteer de array naar JSON met behulp van de functie json_encode() .
  • Wikkel "myFunc()" rond het geretourneerde object.

JavaScript-voorbeeld

De functie "myFunc" wordt aangeroepen vanuit het php-bestand:

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

Terugbelfunctie

Als je geen controle hebt over het serverbestand, hoe zorg je er dan voor dat het serverbestand de juiste functie aanroept?

Soms biedt het serverbestand een callback-functie als parameter:

Voorbeeld

Het php-bestand roept de functie aan die u als callback-parameter doorgeeft:

let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);