JSON is een formaat voor het opslaan en transporteren van gegevens.
JSON wordt vaak gebruikt wanneer gegevens van een server naar een webpagina worden verzonden.
* De JSON-syntaxis is afgeleid van de JavaScript-objectnotatiesyntaxis, maar de JSON-indeling is alleen tekst. Code voor het lezen en genereren van JSON-gegevens kan in elke programmeertaal worden geschreven.
Voorbeeld:
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}
JSON-gegevens worden geschreven als naam / waarde-paren, net als JavaScript-objecteigenschappen.
Een naam / waarde-paar bestaat uit een veldnaam (tussen dubbele aanhalingstekens), gevolgd door een dubbele punt, gevolgd door een waarde:
"firstName":"John"
JSON-objecten worden tussen accolades geschreven. Net als in JavaScript kunnen objecten meerdere naam / waarde-paren bevatten:
{"firstName":"John", "lastName":"Doe"}
JSON-arrays worden tussen vierkante haken geschreven. Net als in JavaScript kan een array objecten bevatten:
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
In het bovenstaande voorbeeld is het object "werknemers" een array. Het bevat drie objecten. Elk object is een record van een persoon (met een voornaam en een achternaam).
Een veelgebruikte mannier om JSON te gebruiken is om gegevens van een webserver te lezen en de gegevens op een webpagina weer te geven. Als voobeeld gebruiken we hier een string als invoer. Later laten we zien hoe we m.b.v. AJAX deze gegevevens van een webserver kunnen halen.
Maak eerst een JavaScript-string met de JSON-syntaxis:
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
Gebruik vervolgens de ingebouwde JavaScript-functie JSON.parse()
om de tekenreeks naar een JavaScript-object te converteren:
var obj = JSON.parse(text);
Gebruik ten slotte het nieuwe JavaScript-object op uw pagina:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
De voordelen van AJAX zijn:
Ajax = A synchrone J avascript A nd X ML.
AJAX is geen programmeertaal. AJAX gebruikt alleen een combinatie van:
XMLHttpRequest
object (om gegevens van een webserver op te vragen)AJAX is een misleidende naam. AJAX-applicaties kunnen XML gebruiken om gegevens te transporteren, maar is kan ook gerbruikt worden om platte tekst en JSON-tekst te transporteren.
Met AJAX kunnen webpagina's asynchroon worden bijgewerkt door achter de schermen gegevens uit te wisselen met een webserver. Dit betekent dat het mogelijk is om delen van een webpagina bij te werken, zonder de hele pagina opnieuw te laden.
Alle moderne browsers ondersteunen het XMLHttpRequest
object.
Voorbeeld:
var xhttp = new XMLHttpRequest();
LET OP: Om veiligheidsredenen staan moderne browsers geen toegang tussen domeinen toe. Dit betekent dat zowel de webpagina als het te laden bestand, zich op dezelfde server moet bevinden.
Om een verzoek naar een server te sturen, gebruik we de open()
en send()
methoden van het XMLHttpRequest
object:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Methode | Omschrijving |
---|---|
open(method, url, async) |
Het verzoek type: |
send() | Verzend het verzoek (voor GET) |
send(string) | Verzend het verzoek (voor POST) |
GET
is eenvoudiger en sneller dan POST
, en kan in de meeste gevallen worden gebruikt.
Gebruik altijd echter POST-verzoeken als:
Als u informatie met de GET
methode wilt verzenden , voeg u de informatie toe aan de URL:
Voorbeeld:
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
Om gegevens als een HTML-formulier te POSTEN, voeg u een HTTP-header toe met setRequestHeader()
. Specificeer de gegevens die u wilt verzenden in de send()
methode:
Voorbeeld:
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
De url-parameter van de open()
methode is een adres naar een bestand op een server:
xhttp.open("GET", "ajax_test.php", true);
Het bestand kan elk soort bestand zijn, zoals .txt en .xml, of serverscriptbestanden zoals .php (die acties op de server kunnen worden uitgevoerd voordat het antwoord wordt teruggestuurd).
Gebruik voor serververzoeken asynchroon verzenden. De async-parameter van de open()
- methode moet dan ingesteld worden op true:
xhttp.open("GET", "ajax_test.php", true);
Door asynchroon te verzenden, hoeft JavaScript niet te wachten op de reactie van de server, maar kan in plaats daarvan:
Synchrone XMLHttpRequest (async = false) wordt afgeraden, omdat JavaScript stopt met uitvoeren totdat de serverreactie gereed is. Als de server bezet of traag is, zal de applicatie hangen of stoppen.
Met het XMLHttpRequest
object kunt u een functie definiëren die moet worden uitgevoerd wanneer het verzoek een antwoord ontvangt. Als je dus een verzoek verstuurd gaat javascript door met de rest van de code. Op het moment dat het antwoord binnenkomt, wordt de functie aangeroepen die onreadystatechange
bevat.
De functie is gedefinieerd in de onreadystatechange
eigenschap van het XMLHttpRequest
object:
Voorbeeld:
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
De readyState
eigenschap bevat de status van de XMLHttpRequest.
De onreadystatechange
eigenschap definieert een functie die moet worden uitgevoerd wanneer de readyState verandert.
De status
eigenschap en de statusText
eigenschap hebben de status van het XMLHttpRequest-object.
Eigenschap | Omschrijving |
---|---|
onreadystatechange | De functie die wordt aangeroepen als er data binnekomt. |
readyState | De status van XMLHttpRequest: 0: verzoek niet geïnitialiseerd 1: verbinding met de server gemaakt 2: verzoek ontvangen 3: verzoek verwerken 4: verzoek klaar en antwoord beschikbaar |
status | Status code: 200: "OK" 403: "Forbidden" 404: "Page not found" Een complete lijst met HTTP codes: Http Messages Reference |
statusText | Bevat de tekst die bij de status hoort: (e.g. "OK" or "Not Found") |
De onreadystatechange
functie wordt elke keer aangeroepen als readyState verandert.
Wanneer readyState
4 is en de status code 200, dan is het antwoord klaar:
Voorbeeld:
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}