Uit het vorige hoofdstuk weet je dat je met behulp van Ajax op asynchrone manier informatie van de server kan ontvangen: je ontvangt informatie terwijl de pagina op het scherm blijft staan.
In enkele kleine voorbeelden heb je geleerd dat het antwoord van de server in een formaat naar keuze kan worden teruggestuurd, en dat je deze informatie moet kunnen ontleden met behulp van Javascript.
In dit hoofdstuk bekijken we drie responsetypes: HTML, XML en JSON. HTML en XML ken je reeds, JSON staat voor JavaScript Object Notation en is een compacte manier om gegevens naar de client terug te sturen, die in Javascript vlot kunnen worden begrepen.
We maken in dit hoofdstuk een aantal eenvoudige testjes, merk op dat de inhoud die we via Ajax opvragen nog steeds statisch is: we vragen een hardgecodeerd bestand op. Het is uiteindelijk de bedoeling de response-informatie dynamisch te laten aanmaken met een server-side techniek zoals asp.net.
HTML-response
Een vaak gebruikte manier om Ajax toe te passen is een HTML-antwoord naar de client terugsturen. Daar een webpagina is opgebouwd uit HTML lijkt dit een voor de hand liggende oplossing.
books.html
<div class="book">
<h3>JavaScript, the Definitive Guide</h3>
<p class="moreInfo">By David Flanagan, O'Reilly</p>
<img src="/images/cover_defguide.jpg" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="book">
<h3>DOM Scripting</h3>
<p class="moreInfo">By Jeremy Keith, Friends of Ed</p>
<img src="/images/cover_domscripting.jpg" />
<p>Praesent et diam a ligula facilisis venenatis.</p>
</div>
<div class="book">
<h3>HTML Utopia: Modern Web Design using JavaScript & DOM</h3>
<p class="moreInfo">By Stuart Langridge, Sitepoint</p>
<img src="/images/cover_utopia.jpg" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
bookshtml.html
<html>
<head>
<title>Boeken - html</title>
<LINK href="boeken.css" rel="stylesheet" type="text/css">
<script>
function toonDetails()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="books.html"
url=url+"?sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
if(xmlHttp.status == 200)
{
document.getElementById("boeken").innerHTML=xmlHttp.responseText
}
else
{
alert("Probleem met het request!");alert(xmlHttp.status);
}
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
</script>
</head>
<body>
<span style="cursor:pointer;color:green" onclick="toonDetails()">Toon</span> boekgegevens
<div style="border:solid;border-width:1px 0px 1px 0px;width:400px" id="boeken"></div>
</body>
</html>
XML-response
books.xml
<books>
<book>
<title>JavaScript, the Definitive Guide</title>
<publisher>O'Reilly</publisher>
<author>David Flanagan</author>
<cover src="defguide.gif" />
<blurb>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</blurb>
</book>
<book>
<title>DOM Scripting</title>
<publisher>Friends of Ed</publisher>
<author>Jeremy Keith</author>
<cover src="domscripting.jpg" />
<blurb>Praesent et diam a ligula facilisis venenatis.</blurb>
</book>
<book>
<title>DHTML Utopia: Modern Web Design using JavaScript & DOM</title>
<publisher>Sitepoint</publisher>
<author>Stuart Langridge</author>
<cover src="utopia.gif" />
<blurb>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</blurb>
</book>
</books>
booksxml.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Boeken - XML</title>
<LINK href="boeken.css" rel="stylesheet" type="text/css">
<script>
function toonDetails()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="books.xml"
url=url+"?sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function setDataXML(req)
{
var books = req.responseXML.getElementsByTagName('book');
for (var i=0;i<books.length;i++)
{
var x = document.createElement('div');
x.className = 'book';
var y = document.createElement('h3');
y.appendChild(document.createTextNode(getNodeValue(books[i],'title')));
x.appendChild(y);
var z = document.createElement('p');
z.className = 'moreInfo';
z.appendChild(document.createTextNode('By ' + getNodeValue(books[i],'author') + ', ' + getNodeValue(books[i],'publisher')));
x.appendChild(z);
var a = document.createElement('img');
a.src = books[i].getElementsByTagName('cover')[0].getAttribute('src');
x.appendChild(a);
var b = document.createElement('p');
b.appendChild(document.createTextNode(getNodeValue(books[i],'blurb')));
x.appendChild(b);
document.getElementById('boeken').appendChild(x);
}
}
function getNodeValue(obj,tag)
{
return obj.getElementsByTagName(tag)[0].firstChild.nodeValue;
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
if(xmlHttp.status == 200)
{
setDataXML(xmlHttp)
}
else
{
alert("Probleem met het request!");alert(xmlHttp.status);
}
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
</script>
</head>
<body>
<span style="cursor:pointer;color:green" onclick="toonDetails()">Toon</span> boekgegevens
<div style="border:solid;border-width:1px 0px 1px 0px;width:400px" id="boeken"></div>
</body>
</html>
Het inlezen van XML in Javascript kan omslachtig zijn, en een goede kennis van de XML-Dom vereisen.
Een groot deel van het werk wordt hier gedaan om de inhoud aan de huidige webpagina toe te voegen door dynamisch elementen te maken.
JSON: Javascript Object Notation - response
Hier leveren we als response een tekstreeks (string) terug aan de browser. Deze string wordt opgebouwd volgens de regels voor Javascript Object Notation (JSON).
JSON is een compacte manier om in Javascript objecten voor te stellen. Een JSON-string kan in Javascript heel eenvoudig weer omgezet worden in een object met behulp van de methode eval().
books.js: de JSON-string
{"books":[{"book":
{
"title":"JavaScript, the Definitive Guide",
"publisher":"O'Reilly",
"author":"David Flanagan",
"cover":"defguide.gif",
"blurb":"Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
}
},
{"book":
{
"title":"DOM Scripting",
"publisher":"Friends of Ed",
"author":"Jeremy Keith",
"cover":"domscripting.jpg",
"blurb":"Praesent et diam a ligula facilisis venenatis."
}
},
{"book":
{
"title":"DHTML Utopia: Modern Web Design using JavaScript & DOM",
"publisher":"Sitepoint",
"author":"Stuart Langridge",
"cover":"utopia.gif",
"blurb":"Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
}
}
]}
booksjson.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Boeken - JSON</title>
<LINK href="boeken.css" rel="stylesheet" type="text/css">
<script>
function toonDetails()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="books.js"
url=url+"?sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function setDataJSON(req)
{
var data = eval('(' + req.responseText + ')');
for (var i=0;i<data.books.length;i++)
{
var x = document.createElement('div');
x.className = 'book';
var y = document.createElement('h3');
y.appendChild(document.createTextNode(data.books[i].book.title));
x.appendChild(y);
var z = document.createElement('p');
z.className = 'moreInfo';
z.appendChild(document.createTextNode('By ' + data.books[i].book.author + ', ' + data.books[i].book.publisher));
x.appendChild(z);
var a = document.createElement('img');
a.src = data.books[i].book.cover;
x.appendChild(a);
var b = document.createElement('p');
b.appendChild(document.createTextNode(data.books[i].book.blurb));
x.appendChild(b);
document.getElementById('boeken').appendChild(x);
}
}
function getNodeValue(obj,tag)
{
return obj.getElementsByTagName(tag)[0].firstChild.nodeValue;
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
if(xmlHttp.status == 200)
{
setDataJSON(xmlHttp)
}
else
{
alert("Probleem met het request!");alert(xmlHttp.status);
}
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
</script>
</head>
<body>
<span style="cursor:pointer;color:green" onclick="toonDetails()">Toon</span> boekgegevens
<div style="border:solid;border-width:1px 0px 1px 0px;width:400px" id="boeken"></div>
</body>
</html>
Je merkt dat het aanspreken van eigenschappen uit het object gemaakt uit de JSON-string heel wat eenvoudiger is dan het parsen van de XML-string in het vorige voorbeeld.
Kiezen tussen de verschillende formaten
Zoals je merkt kan je met Ajax kiezen welk formaat je gebruikt om gegevens tussen server en client te transfereren.
We hebben in deze lessenreeks ondertussen 4 formaten gebruikt om gegevens op de client te ontvangen: tekst, HTML, XML en JSON.
In onderstaande tabel vind je een overzicht van de voor- en nadelen van de verschillende technieken:
Formaat
Voordelen
Nadelen
Tekst
Heel eenvoudig aan te maken
Heel compacte bestanden
Niet-dynamisch, door het ontbreken van een objectmodel kan je de infomatie niet op een eenvoudige manier ontleden.
(X)HTML
Past perfect binnen de bouw van de webpagina
Server-side scripts om HTML te genereren kunnen behoorlijk complex worden.
XML
Behoorlijk eenvoudige bestandsindeling, leesbaar door "gewone" mensen.
Algemeen erkend bestandsformaat, zodat ontwikkelaars zich snel in het systeem zullen kunnen inwerken.
Javascript-instructies om XML-bestanden te verwerken kunnen behoorlijk complex worden. Tenzij we wachten tot E4X algemeen door browsers ondersteund wordt.
JSON
Formaat speciaal ontwikkeld voor gebruik in Javascript.
Kan het probleem dat scripts enkel op de bronserver kunnen aangeroepen worden omzeilen.
Heel strikte, moeilijk leesbare syntax
De keuze voor een formaat hangt in grote mate af van de specifieke eisen voor een welbepaald project. Wens je te werken met de algemeen hangbare gebruiksregels voor Ajax, kies dan voor XML: de x in ajax geeft aan dat eigenlijk XML wordt gebruikt.
Wil je echter eenvoud in je Javascript-code en ben je bereid een inspanning te leveren om JSON te beheersen, dan is het zeker de moeite waard.
