AJAX (XMLHttpRequest)

Transcriptie

1 AJAX (XMLHttpRequest) Ajax is hot. De meesten die met webdesign bezig zijn hebben er wel al van gehoord, veronderstel ik. Voor diegenen die er nog niet van hoorden, of nog niet mee werkten volgt hier een tutorialke. Introductie Aan de basis van de ajax techniek ligt het XMLHttpRequest object, wat oorpronkelijk door Microsoft ontwikkeld werd (Lees: enkel voor de MS Internet Explorer browsers). De kracht en de mogelijkheden die dit object brengt, zorgde er echter voor dat er al vlug een implementatie volgde voor andere browsers en het een standaard werd (W3C). (linker figuur) Typisch communiceer je met de server (en database) via een post of postback, waarbij telkens je volledige webpagina moet herladen worden. (rechter figuur) Ajax echter biedt de mogelijkheid om te communiceren met de server zonder de pagina te moeten posten, en om dynamisch specifieke gedeelten van een webpagina te wijzigen met gegevens gehaald van de server (of van een andere bron). Daarenboven kan je zowel tekst (string) data als xml objecten opvragen.

2 Het XMLHttpRequest object instantiëren Het XMLHttpRequest object is in meerdere vormen beschikbaar, zowel als client-side als server-side control. Noot In deze tutorial heb ik het over de client-side (javascript) versie van het object. Voor het.net Framework is er een gelijkaardige functionaliteit beschikbaar in de vorm van de op HttpWebRequest en HttpWebResponse objecten, zoek op MSDN voor meer info. Internet Explorer Voor het Microsoft (IE) platform is het XMLHttpRequest object een ActiveX control, die als volgt te instantiëren is: Oudere versie van XMLHttpRequest: <script language= javascript type= text/javascript > var httpreq = new ActiveXObject("Microsoft.XMLHTTP"); </script> Nieuwere versie: <script language= javascript type= text/javascript > var httpreq = new ActiveXObject("Msxml2.XMLHTTP"); </script> Natuurlijk, 2 verschillende versies, hoe kies ik welke? Vrij simpel eigenlijk, als volgt zorg je ervoor dat automatisch de correcte versie van het object geïnstantieerd wordt: Var req; req = new ActiveXObject("Msxml2.XMLHTTP"); req = new ActiveXObject("Microsoft.XMLHTTP");

3 Overige browsers Zoals eerder aangehaald is het XMLHttpRequest object een W3C gespecifieerd object. De overige browsers die zowat de W3C richtlijnen volgen (mozilla, firefox, etc.) kunnen dus ook gebruik maken van XMLHttpRequest, als volgt: req = new XMLHttpRequest(); Cross-browser support We brengen bovenstaande code samen, ook implementeren we een controle als het XMLHttpRequest object wel degelijk beschikbaar is voor de client zijn browser. var if(window.xmlhttprequest) // standaard XMLHttpRequest object req = new XMLHttpRequest(); else if(window.activexobject) // IE/Windows ActiveX versie req = new ActiveXObject("Msxml2.XMLHTTP"); req = new ActiveXObject("Microsoft.XMLHTTP");

4 Het XMLHttpRequest object gebruiken Met een object zijn we natuurlijk niks, tenzij het enkele methoden en/of properties beschikbaar stelt. Voor deze tutorial ga ik slechts in op de belangrijkste methoden en properties die het object beschikbaar stelt, eens je vertrouwd bent met de basics kan je je bijvoorbeeld op en verder verdiepen in de mogelijkheden van het object. Volgende methoden en properties zijn van belang voor ons: Methoden Properties open Onreadystatechange (callback handler) send ReadyState responsetext responsexml status De methode open Met de methode open kunnen we specifiëren op welke locatie we gegevens wensen op te halen, dit is een url (querystring parameters zijn mogelijk). XMLHttpRequest.open(sMethod, surl [, basync] [, suser] [, spassword]) smethode: De eerste parameter omvat de wijze waarop we gegevens opvragen, over het algeleen zal dit de string POST of GET zijn. surl: Als tweede parameter volgt de url string waar we gegevens wensen op te vragen. basync (optioneel): De derde parameter is vrij belangrijk, hiermee specifiëren indien we asynchroon of synchroon de gegevens wensen op te halen. False: Wanneer je kiest voor synchroon (false), dan zal alle verdere uitvoering van javascript code geblokeerd worden totdat we onze gewenste gegevens ontvingen. Dit is dus over het algemeen niet wat we willen voor het dynamisch updaten van onze webpagina. True: Wanneer je kiest voor asynchroon (true), dan kan je andere code uitvoeren terwijl de gegevens opgehaald worden. Asynschroon ophalen van gegevens betekent wel dat we een callback functie nodig hebben (via de onreadystatechange handler), die de verkregen gegevens verwerkt, eens we de opgevraagde gegevens ontvingen. Als je geen basync parameter specifieert is de default true. User & Password: De overige 2 parameters spreken voor zich. Als er authenticatie nodig is om de url aan te spreken, dan kan je hier je gebruikersnaam en paswoord opgeven.

5 De methode send De methode send start de uitvoering van onze vraag. XMLHttpRequest.send( [varbody]) De optionele parameter varbody geeft de mogelijkheid om name value pairs mee te geven, of om andere data door te sturen (zoals xml). De onreadystatechange event handler Bij asynschroon ophalen van gegevens, hebben we nood aan een callback methode, die de events die verkregen worden van het XMLHttpRequest object verwerkt, en uiteindelijk ook de verkregen gegevens kan verwerken. XMLHttpRequest.onreadystatechange(vHandler) [ = vhandler ] De property readystate Deze property geeft de huidige status van je aanvraag weer, en kan 5 waardes bevatten. [ nstate = ] XMLHttpRequest.readyState nstate Integer. 0 The object has been created, but not initialized (the open method has not been called). 1 The object has been created, but the send method has not been called. 2 The send method has been called, but the status and headers are not yet available. 3 Some data has been received. Calling the responsebody and responsetext properties at this state to obtain partial results will return an error, because status and response headers are not fully available. 4 All the data has been received, and the complete data is available. De property status Deze geeft een HTTP status code terug, bijvoorbeeld 401 voor toegang niet toegestaan, of 200 voor success. [ nstatus = ] XMLHttpRequest.status

6 De properties responsetext en responsexml Ten laatste hebben we nog deze 2 properties, die het resultaat van je aanvraag teruggeven. Indien je tekst opvroeg, dan kan je die tekst opvragen met responsetext, als je een XML object opvroeg, dan is dit beschikbaar via de responsexml property. Leuk is dat je ook XHTML kan opvragen. De XHTML is dan via beide properties beschikbaar omdat XHTML een XML opmaak heeft, zo heb je de keuze hoe je de gegevens wil verwerken (als DOM object of als string). Zo kan je bijvoorbeeld een XHTML table layout genereren op de server, deze via een XMLHttpRequest object opvragen, ondertussen een loading boodschap weergeven en de table na het ontvangen van de gegevens via responsetext in een DIV weergeven. Omdat XHTML XML compatibel is, kan je ook diezelfde table overlopen als een DOM Document via de responsexml property. [ sbody = ] XMLHttpRequest.responseText [ obody = ] XMLHttpRequest.responseXML ( vervolgt op volgende pagina )

7 Een demo applicatie Standaard Ajax script Nu brengen we alles wat we tot nu toe zagen samen, en maken we een simpel voorbeeld applicatie. 1. Het script (copy-paste in een Ajax.js document, of evetueel in een script tag in de head van het Ajax.html document zie lager). Let op de document.getelementbyid code in het javascript, dewelke een loading boodschap en de opgevraagde data in het HTML DIV element zal weergeven. var req; function processreqchange() if (req.readystate == 4) if (req.status == 200) var restext = req.responsetext; document.getelementbyid('contentbox').innerhtml = restext; else alert("error:\n" + req.statustext); function loadxmldoc(url) document.getelementbyid('contentbox').innerhtml = "Loading..."; if(window.xmlhttprequest) req = new XMLHttpRequest(); else if(window.activexobject) req = new ActiveXObject("Msxml2.XMLHTTP"); req = new ActiveXObject("Microsoft.XMLHTTP"); if(req) req.onreadystatechange = processreqchange; req.open("get", url, true); req.send("");

8 2. Start een ASP.NET project en voeg een webform pagina AjaxData.aspx toe. Page Language="C#" AutoEventWireup="true" CodeFile="AjaxData.aspx.cs" Inherits="AjaxData" %> <?xml version="1.0" encoding="utf-8"?> Zwier zowat alles uit de HTML code van de aspx pagina en editeer die als in het kader. Nu hebben we een ASP.NET pagina die een XML document teruggeeft in plaats van gegenereerde HTML. 3. Voeg volgende code in de Page_Load event handler: protected void Page_Load(object sender, EventArgs e) if (Request.Params["data"]!= null) switch (Convert.ToString(Request.Params["data"])) case "table": Response.Write("<table border='1'><tr><td style='width:200px;height:100px;'>hello table</td></tr></table>"); break; case "form": Response.Write("<input type='text' id='txt'></input><br/><button type='submit'>submit</button>"); break; 4. Voeg een Ajax.html pagina toe, hier volgt de HTML code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" > <head> <title>untitled Page</title> <script language="javascript" type="text/javascript" src="ajax.js"></script> </head> <body> <button id="btntable" onclick="loadxmldoc('ajaxdata.aspx?data=table');">haal table op</button><br /> <button id="btnform" onclick="loadxmldoc('ajaxdata.aspx?data=form');">haal form op</button><br /> <div id="contentbox" style="border:1px solid black; width:300px; height:200px;"> Geen data </div> </body> </html>

9 En daar heb je het, je allereerste ajax applicatie is een feit. Een heel simpele start, maar de mogelijkheden zijn enorm. Veel plezier! K.