Leanpub: Publish Early, Publish Often

2. Inleiding tot AJAX.

Alle moderne websites maken tegenwoordig gebruik van AJAX. Denk maar aan Gmail, Google Drive, Facebook en Twitter.

In tegenstelling tot een klassieke webpagina worden bij AJAX-gestuurde pagina’s delen van de pagina ververst zonder de volledige webpagina opnieuw in te laden. De pagina’s worden hierdoor veel interactiever en intuïtiever. De gebruiker krijgt meer het gevoel dat hij in een desktopapplicatie werkt dan op een website. Websites die hoofdzakelijk gebruik maken van AJAX noemt men ook wel Rich Internet Applicaties of RIA’s.

AJAX is geen technologie op zich, maar een algemene term voor het ontwerpen van interactieve pagina’s waarbij gegevens uit een extern bestand worden opgehaald en vervolgens dynamisch worden getoond. Het grote voordeel van AJAX t.o.v. uitsluitend klassieke webpagina’s is dat alle gegevens dynamisch in de browser worden geladen. Alle interactiviteit (sorteren, filteren, …) gebeurt dus volledig binnen de browser zonder dat er een nieuwe connectie met de server nodig is.

De communicatie binnen een klassieke website gebeurt als volgt:

De browser laadt een pagina.
De gebruiker klikt op een link.
De browser vraagt een volledig nieuwe pagina op.
De webserver stuurt de nieuwe pagina naar de browser.
De browser toont de nieuwe pagina.

De communicatie met een AJAX-pagina verloopt als volgt:

De browser laadt een pagina.
De gebruiker klikt op een link.
De JavaScript engine verwerkt de aanvraag en stuurt de aanvraag in de achtergrond door naar een externe pagina.
De JavaScript engine ontvangt de gegevens en past het DOM aan.
De browser toont de nieuwe gegevens en hoeft daarvoor niet de volledige pagina te herladen.

Omdat de browser minder met de webserver communiceert en omdat de verwerking volledig lokaal gebeurt, krijgen we een zeer snelle respons en een snelle pagina update.

In dit hoofdstuk geven we een korte inleiding tot AJAX en verduidelijken we enkele begrippen. De oefeningen komen in de twee volgende hoofdstukken aan bod.

Een volledig overzicht van alle AJAX-methodes vindt u hier:
http://api.jquery.com/category/ajax/

2.1 Historiek.

De techniek om asynchroon gegevens op te halen, bestaat al meer dan 20 jaar. In 1998 ontwikkelde Microsoft een systeem om via een ActiveX control gegevens in de achtergrond op te halen. Enkele jaren later implementeerden alle andere browsers een gelijkaardig principe, maar nu gebaseerd op het gestandaardiseerde XMLHttpRequest protocol (kortweg XHR).

Google was het eerste bedrijf dat XHR op grote schaal in zijn toepassingen ging verwerken. In de beginjaren kwamen de externe gegevens uitsluitend uit een XML-document. Zo is de term AJAX ontstaan. AJAX was het acroniem voor Asynchronous JavaScript And XML.

Ondertussen is de omschrijving van AJAX al achterhaald. Via AJAX kunnen we niet enkel XML importeren, maar eveneens tekst, HTML, JSON en JavaScript.

Het is niet zo evident om op een universele manier AJAX te verwerken. De ene browser gebruikt XHR, de andere ActiveX. Gelukkig hoeven wij ons hier geen zorgen over te maken. jQuery zorgt immers voor een correcte verwerking in de verschillende browsers.

2.2 Wat is XML?

XML is het acroniem voor eXtensible Markup Language. Net zoals HTML, beschrijft XML de datastructuur van gegevens, niet de opmaak. Een XML-document is, net zoals HTML, opgebouwd met tags (nodes in het XML jargon) en attributen.

Neem als voorbeeld een adresboek in de vorm van een XML-document.

XML begint steeds met de header of proloog. De proloog bevat informatie over de document encoding en de XML versie. Dit is ondermeer belangrijk voor het programma dat de XML-code gaat verwerken (de XML-parser). Na de proloog volgt de rootnode adresboek.
Ons adresboek bevat twee personen. Elke persoon staat beschreven in een eigen adresnode met als attribuut een uniek id. Binnen de adresnode komen de childnodes: voornaam, naam en email.

<?xml version="1.0" encoding="UTF-8"?>
<adresboek>
    <adres id="1">
        <voornaam>Lorem</voornaam>
        <naam>Ipsum</naam>
        <email>lorem@example.com</email>
    </adres>
    <adres id="2">
        <voornaam>Morbi</voornaam>
        <naam>Dui</naam>
        <email>morbi@example.com</email>
    </adres>
    <adres id="3"> ... </adres>
</adresboek>

Een goed gestructureerd XML-document is zelfbeschrijvend. Dit wil zeggen dat nodenamen iets vertellen over de inhoud van de node.

Als het document voldoet aan alle syntaxregels van XML, noemt men dit well-formed (of goed gevormd). Een well-formed document kan door de meeste parsers, zoals een webbrowser, correct verwerkt worden.

Een well-formed document kan u makkelijk in Firefox of in Chrome testen. Open het XML-document in de browsers. Als de boomstructuur verschijnt, is het document well-formed en zijn de gegevens te verwerken via jQuery.

Indien het document fouten bevat, is het niet well-formed en krijgt u dit te zien:

In een XML-document dat uitsluitend voor eigen gebruik is ontworpen, kan u de nodenamen vrij kiezen. In een universeel, gestandaardiseerd XML-document zoals RSS, ATOM en XHTML ligt de naamgeving vast.

Om de correctheid van het document te controleren, maakt men gebruik van een DTD of van een XML Schema.

Een DTD of XML schema documenteert als het ware het XML-bestand. Hierin wordt ondermeer beschreven welke nodes in het XML-document moeten/mogen voorkomen en welke inhoud de nodes bevatten (tekst, enkel getallen, …). Aan de hand van dit controlebestand kan de parser de XML-nodes zowel op syntax als op inhoud valideren.

Een well-formed XML-bestand dat ook nog voldoet aan de bijbehorende DTD of Schema, noemt men een valid XML-bestand.

2.3 Wat is JSON?

JSON is het acroniem voor JavaScript Object Notation. JSON beschrijft, net zoals XML, de datastructuur van gegevens. JSON is een onderdeel van JavaScript, en is bijgevolg relatief eenvoudig in het DOM te verwerken.

De eenvoud van JSON heeft geleid tot een grote populariteit ervan, met name als een alternatief voor XML. Binnen JSON staan gegevens gestructureerd in de vorm van een JavaScriptobject of als een JavaScript array.

Ziehier een JSON equivalent van ons XML adresboek.

{
    "adresboek":[
        {
            "id":1,
            "voornaam":"Lorem",
            "naam":"Ipsum", 
            "email":"lorem@example.com"
        },
        {
            "id":2,
            "voornaam":"Morbi",
            "naam":"Dui", 
            "email":"morbi@example.com"
        },
        {
            ...
        }
    ]
}

Goed: “voornaam”:”Lorem”
Fout: voornaam : “Lorem”
Fout: ‘voornaam’ : “Lorem”
Fout: ‘voornaam’ : ‘Lorem’

2.4 Requests filteren met GET en POST.

Het is perfect mogelijk om gegevens (HTML, JSON, XML, …) te verwerken uit een volledig statisch document. Het wordt natuurlijk nog interessanter indien we de gegevens dynamisch vanuit een database kunnen genereren. Vanuit een statische pagina is de response altijd hetzelfde. Op een dynamische pagina is de response afhankelijk van een filter of parameter. Het filteren gebeurt meestal vanuit een formulier.

Neem bijvoorbeeld de zoekfunctie van Google. De response is afhankelijk van de zoekterm die u in het formulier invult.

Zoals u weet, kan u een formulier verzenden via GET of via POST.

2.4.1 Formulier verzenden met de GET-methode.

GET plakt alle formuliervelden achter de URL. Alle zoekmachines gebruiken GET.

Zoek via Google op jquery tutorials en bekijk de URL.

De structuur van de URL met een GET-request is als volgt:
action?naam1=waarde1&naam2=waarde2&naam3=waarde3

Action is de URL van de pagina die het formulier zal verwerken. Van elk formulierveld wordt zowel de naam van het veld als de waarde in het veld aan de URL toegevoegd. Alle velden zijn gescheiden door een &-teken.

Omdat GET de waarde of de inhoud van elk object zichtbaar maakt in de URL, kan u deze methode bijvoorbeeld niet gebruiken op een loginpagina. Het paswoord mag immers niet zichtbaar zijn in de URL. De lengte van de URL is ook beperkt tot enkele honderden karakters (browserafhankelijk).

2.4.2 Formulier verzenden met de POST-methode.

De tweede methode, POST, geeft de gegevens via de header door. De gegevens zijn nu niet zichtbaar in de URL. Het aantal karakters dat kan worden doorgestuurd, is vrijwel onbeperkt.

2.4.3 GET-methode zonder formulier.

Omdat de GET-methode alle parameters achter de URL plaatst, is het perfect mogelijk om de parameters dadelijk in een link te verwerken. Dit wordt vaak gebruikt in een master/detail relatie.

De masterpagina toont een beknopt overzicht van alle items. Elk item heeft een link naar de detailpagina en stuurt in de URL een unieke identificatiecode mee.

Neem als voorbeeld de startpagina van Campinia Media.

Elke link “Lees verder” verwijst naar dezelfde detailpagina:
http://www.campiniamedia.be/fondslijst_detail.asp?ISBN=xxxxxx

De parameter ISBN filtert de juiste gegevens uit de database en toont de gedetailleerde informatie over het gevraagde boek.

2.5 Zes soorten AJAX requests.

De methode $.ajax() is een jQuery’s low-level AJAX implementatie. Dit is tevens de meest uitgebreide, maar ook moeilijkste methode.

Gelukkig zijn er ook nog vijf afgeleide methodes met minder toeters en bellen, maar wel veel eenvoudiger te begrijpen en te gebruiken. Onderstaande tabel geeft een overzicht van de verschillende methodes met hun mogelijkheden en beperkingen.

Zonder webserver kan u enkel koppelen met statische bestanden. Om gegevens uit een database te verwerken, zal u altijd een server-side script moeten gebruiken en bent u natuurlijk wel verplicht om een webserver te gebruiken.

Omdat niet iedereen vertrouwd is met server-side scripts (PHP, ASP.NET, …) gaan we de oefeningen dadelijk opsplitsen over twee verschillende hoofdstukken.

2.6 Same origin policy.

Uit veiligheidsredenen bevatten alle browsers enkele beperkingen. Eén van deze beperkingen is de same origin policy. Of, met andere woorden, alle gegevens die u via AJAX ophaalt, moeten afkomstig zijn van hetzelfde domein. Hetzelfde domein betekent meer specifiek: dezelfde server, zelfde protocol, zelfde domeinnaam en dezelfde poort. Het is bijvoorbeeld niet mogelijk dat een webpagina op domeinA gegevens ophaalt uit domeinB.

Er zijn echter twee uitzonderingen. Het ophalen van externe JavaScripts en gegevens in JSONP formaat (let op de P achteraan) zijn wel toegestaan.

JSONP staat voor “JSON with Padding”. Wanneer de webserver van domeinB zodanig staat geconfigureerd dat deze toelaat dat andere gebruikers zijn gegevens in JSON-formaat mogen ophalen, spreekt men van JSONP. De structuur van een JSON-bestand en van een JSONP-bestand is identiek.

Onderstaande afbeelding toont de AJAX mogelijkheden/beperkingen, rekening houdend met de same origin policy.

2.7 Cross-site scripting.

Indien u over een webserver beschikt, kan u de same origin policy makkelijk omzeilen. Op de webserver plaatst u een proxyscript. Dit proxyscript haalt de inhoud van een externe pagina (html, XML, JSON, …) op en toont dit in zijn eigen pagina.

In plaats van in een AJAX request te verwijzen naar de externe pagina, verwijst u nu naar de proxypagina. Voor de browser lijkt het alsof de gegevens afkomstig zijn van het eigen domein. Op deze manier kunnen we dus alle externe gegevens perfect via AJAX verwerken. Hierover later meer.