AJAX. Asynchronous Javascript And XML

Transcriptie

1 AJAX Asynchronous Javascript And XML

2 AJAX (spreek uit: eɪdʒæks) AJAX is een manier om interactieve webapplicaties te ontwikkelen door een combinatie van de volgende technieken te gebruiken: HTML en CSS voor de presentatie volgens de standaarden van het W3C Het Document Object Model voor het dynamisch tonen van informatie en voor interactie. XML, XSLT en JSON (JavaScript Object Notation)voor de opslag, aanpassing en transport van gegevens. Het XMLHttpRequest object voor asynchrone communicatie met de back-end server. JavaScript om alles aan elkaar te binden. 2

3 AJAX 3

4 AJAX Om de voorbeelden te kunnen uitvoeren moet je eerst een webserver die PHP ondersteunt installeren. Het meest eenvoudige is de wamp-server ( WAMP = Windows Apache MySQL PHP Deze is al geïnstalleerd op de pc s op school. Na installatie zal je een map wamp hebben met daarin een map www. De voorbeelden moet je daar onder plaatsen. Als de wampserver is opgestart, kan je daar de voorbeelden runnen. Geef in je browser het volgende in: en klik op de juiste map. 4

5 Waarom AJAX Door gebruik te maken van XMLHttpRequest hoeft de webpagina niet opnieuw ververst te worden om nieuwe inhoud te krijgen. Google Suggest stelt bijvoorbeeld bij elke toetsaanslag een nieuwe reeks zoektermen voor zonder dat men de pagina hoeft te herladen. Zo'n pagina is te vergelijken met een applicatie die in de browser draait: 5

6 Werking AJAX Voorbeeld: Rob s Rock n Roll Memorabilia 6

7 Werking AJAX Klikken op een afbeelding zorgt ervoor dat een functie getdetails wordt uitgevoerd. Deze functie geeft de afbeelding weer in het detailgedeelte van de pagina. Verder wordt ook een request object aangemaakt. Dit request object zal aan de server vragen naar de beschrijving van het item. De client (browser) stuurt dit object asynchroon naar de server in de achtergrond. De server antwoordt op dit request. Enkel het gedeelte van de pagina dat verandert, wordt aangepast (niet de volledige pagina wordt opnieuw gecreëerd) 7

8 Werking AJAX Voordelen: Asynchrone requests zorgen ervoor dat meer dan 1 ding tezelfdertijd kan gebeuren (opvragen details en afbeeldingen). Requests van browsers worden sneller uitgevoerd. Enkel het gedeelte van de pagina dat verandert wordt aangepast. Server verkeer is beperkt. De gebruiker kan verder werken terwijl de pagina wordt aangepast. 8

9 Werking AJAX: de code. De initpage functie zal - de thumbnail images initialiseren - het onclick event koppelen aan de afbeeldingen function initpage() { // find the thumbnails on the page thumbs = document.getelementbyid("thumbnailpane").getelementsbytagname("img"); // set the handler for each image for (var i = 0; i < thumbs.length; i++) { image = thumbs[i]; // create the onclick function image.onclick = function() { // find the image name detailurl = 'images/' + this.title + '-detail.jpg'; document.getelementbyid("itemdetail").src = detailurl; getdetails(this.title); 9

10 Werking AJAX: de code. De getdetails functie zal - een request object vragen aan de createrequest functie - het request eventueel asynchroon naar de server zenden - het antwoord van de server eventueel verwerken function getdetails(itemname) { request = createrequest(); if (request == null) { alert("unable to create request"); return; var url= "getdetails.php?imageid=" + escape(itemname); request.open("get", url, true); request.onreadystatechange = displaydetails; request.send(null); 10

11 Werking AJAX: de code. De createrequest functie zal - een request object trachten aan te maken - en blijven trachten aan te maken indien niet gelukt voor dit type browser (IE5-6) - het request object returnen function createrequest() { try { request = new XMLHttpRequest(); catch (tryms) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); catch (otherms) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); catch (failed) { request = null; return request; 11

12 Werking AJAX: de code. Request object configureren - url opbouwen: server-script die het request zal behandelen (escape() is om speciale karakters te verwijderen) - open method geeft aan hoe we met de server willen connecteren (methode, url, asynchroon of niet). - onreadystatechange event listener: koppelt een callback functie aan dit event. Deze functie zal uitgevoerd worden van zodra de server op het request geantwoord heeft. - send method verstuurt het request naar de server. function getdetails(itemname) { request = createrequest(); if (request == null) { alert("unable to create request"); return; var url= "getdetails.php?imageid=" + escape(itemname); request.open("get", url, true); request.onreadystatechange = displaydetails; request.send(); 12

13 Werking AJAX: de code. displaydetails functie zal - de readystate en de request status controleren. - zal de geretourneerde waarde van de server (request.responsetext) weergeven. function displaydetails() { if (request.readystate == 4) { if (request.status == 200) { detaildiv = document.getelementbyid("description"); while (detaildiv.firstchild)detaildiv.removechild(detaildiv.firstchild); var par = document.createelement("p"); var partext = document.createtextnode(request.responsetext); par.appendchild(partext); detaildiv.appendchild(par); 13

14 AJAX: XMLHttpRequest object Properties van het request object: readystate: bevat de status van het object: 0: request not initialized 1: server connection established 2: request received by server 3: processing request by server 4: request finished and response is ready status: geeft de http status die door de server is teruggegeven: 200: "OK" 404: Page not found onreadystatechange: koppelt een callback functie, deze wordt uitgevoerd elke keer als de readystate van waarde wijzigt. responsetext: de server geeft de data terug als string. responsexml: de server geeft de data terug als xml. 14

15 AJAX: JSON requests en responses We hernemen het voorbeeld maar willen meer informatie per afbeelding tonen. De server zal behalve een beschrijving, ook de prijs en een lijst van hyperlinks per afbeelding aan de client terugzenden. Dit kan op verschillende manieren. De server kan de gegevens teruggeven als xml, csv, json of als een stuk xhtml. We behandelen hier enkel als JSON (JavaScript Object Notation). 15

16 AJAX: JSON JSON staat voor JavaScript Object Notation en is een deelverzameling van de programmeertaal JavaScript. Het wordt gebruikt voor het uitwisselen van datastructuren, met name in webapplicaties die asynchroon gegevens ophalen van de webserver zoals AJAX. De eenvoud van JSON heeft geleid tot een grote populariteit ervan, met name als een alternatief voor XML. Omdat gegevens worden uitgewisseld in de vorm van JavaScript-expressies, kunnen de gegevens worden ingelezen in een JavaScript-applicatie door simpelweg de JSONexpressie te evalueren of te parsen naar objecten (JSON.parse()). Bron: 16

17 AJAX: JSON - types JSON's basic types zijn: Number (double precision floating-point format) String (double-quoted Unicode with backslash escaping) Boolean (true or false) Array (an ordered sequence of values, comma-separated and enclosed in square brackets ([]). The values don't need to have the same type.) Object (an unordered collection of key:value pairs, comma-separated and enclosed in curly braces ({); the key must be a string) Null 17

18 AJAX: JSON - voorbeeld { "firstname": "John", "lastname": "Smith", "age": 25, "student": true, "address": { "streetaddress": "21 2nd Street", "city": "New York", "state": "NY", "postalcode": "10021", "phonenumber": [ { "type": "home", "number": " ", { "type": "fax", "number": " " ] Dit is het object in JSON dat informatie bevat over een persoon. Het object heeft string fields voor first name en last name, een getal voor age, een boolean voor student, bevat een object voor het address van de persoon, en een lijst(een array) van telefoonnummer objecten. 18

19 AJAX: JSON requests en responses De code wijzigt aan de server-side, er wordt geen tekst meer teruggegeven, maar een JSON formaat. Firebug > Net > inschakelen XHR geeft XMLHttpRequest eigenschappen 19

20 AJAX: JSON requests en responses Aan de client-side (JS) wijzigt enkel de functie displaydetails(): function displaydetails() { if (request.readystate == 4) { if (request.status == 200) { var detaildiv = document.getelementbyid("description"); //parse JSON-text into an object. Dit kan ook op deze manier: var itemdetails = eval ('('+request.responsetext+')'); var itemdetails = JSON.parse(request.responseText); // Remove existing item details (if any) JSON omzetten nr JavaScript waarde while (detaildiv.firstchild)detaildiv.removechild(detaildiv.firstchild); // Add new item details Eigenschappen overlopen for (var property in itemdetails) { var propertyvalue = itemdetails[property]; if (!isarray(propertyvalue)) { 1 of meerdere waarden var p = document.createelement("p"); p.appendchild( document.createtextnode(property + ": " + propertyvalue)); detaildiv.appendchild(p); 20

21 else { AJAX: JSON requests en responses Vervolg. var p = document.createelement("p"); Bij meerdere, lijst maken p.appendchild(document.createtextnode(property + ":")); var list = document.createelement("ul"); for (var i=0; i<propertyvalue.length; i++) { var li = document.createelement("li"); if (property == "urls"){ var url = propertyvalue[i]; var a = document.createelement("a"); a.setattribute("href", url); a.appendchild(document.createtextnode(url)); li.appendchild(a); else{ li.appendchild(document.createtextnode(propertyvalue[i])); list.appendchild(li); 21

22 AJAX: JSON requests en responses Vervolg. detaildiv.appendchild(p); detaildiv.appendchild(list); 22

23 AJAX: JSON code voorbeeld Code: zie voorbeeld. 23