JSON en AJAX

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.

Wat is JSON?

* 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-syntaxisregels

JSON-gegevens - een naam en een waarde

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

JSON-objecten worden tussen accolades geschreven. Net als in JavaScript kunnen objecten meerdere naam / waarde-paren bevatten:

{"firstName":"John", "lastName":"Doe"}

 

JSON-arrays

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 JSON-tekst converteren naar een JavaScript-object

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>

AJAX

De voordelen van AJAX zijn:

Wat is AJAX?

Ajax = A synchrone J avascript A nd X ML.
AJAX is geen programmeertaal. AJAX gebruikt alleen een combinatie van:

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.

Het XMLHttpRequest-object

Alle moderne browsers ondersteunen het XMLHttpRequestobject.

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.

Stuur een verzoek naar een server

Om een ​​verzoek naar een server te sturen, gebruik we de open() en send() methoden van het XMLHttpRequestobject:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Methode Omschrijving
open(method, url, async)

Het verzoek type:
method: het soort verzoek GET or POST
url: de URL van het bestand
async: true (asynchroon) of false (synchroon)

send() Verzend het verzoek (voor GET)
send(string) Verzend het verzoek (voor POST)

 

GET or POST

GETis eenvoudiger en sneller dan POST, en kan in de meeste gevallen worden gebruikt.

Gebruik altijd echter POST-verzoeken als:

GET verzoeken

Als u informatie met de GETmethode wilt verzenden , voeg u de informatie toe aan de URL:

Voorbeeld:

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();

POST-verzoeken

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 - een bestand op een server

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).

Asynchroon - true or false?

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.

Onreadystatechange

Met het XMLHttpRequestobject 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 onreadystatechangebevat.

De functie is gedefinieerd in de onreadystatechangeeigenschap van het XMLHttpRequestobject:

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 readyStateeigenschap bevat de status van de XMLHttpRequest.

De onreadystatechangeeigenschap definieert een functie die moet worden uitgevoerd wanneer de readyState verandert.

De statuseigenschap en de statusTexteigenschap 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 onreadystatechangefunctie 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();
}