Aangezien ajax toch wel heer erg in is, is het misschien intressant om hier een artikel over te schrijven.
Bij deze deel 1: introductie aan de ajax technologie.

Wat is ajax?
Ajax is een "fancy" woord voor XMLHTTP requests
Het is de afkorting voor: Asynchronous JavaScript and XML (asynchronous zien we later wel)
Het is een technology die al relatief lang bestaat, maar sinds kort heel erg in de mode is.
AJAX laat een web applicatie toe data te zenden en ontvangen via een XML HTTP request.
Het belangrijke en leuke eraan is dat dit zonder het vernieuwen van de pagina gebeurt.
Zo ontstaan er oneindig veel nieuwe mogelijkheden:

• Bij een registratie formulier direct kijken of de gekozen naam al bestaat.
• Zoekresultaten weergeven terwijl je typt.
• Vlugge moderatie.
• ...

Hoe werkt het?
Het is gebaseerd op 2 talen: javascript & xml.
Javascript doet het meeste werk en zonder dat is er ook geen ajax.
XML is eigenlijk optioneel, het is gewoon het formaat dat gebruikt wordt om te communiceren. In principe kan je ook werken zonder het aanroepen van een xml bestand, maar dan verlies je heel wat functionaliteit en moet je zelf een parser schrijven.
Een derde element die kan gebruikt worden is een servside-scripting taal, zoals er zijn: php,asp,jsp,... dit is echter als je dynamische dingen wilt gaan doen, met databases werken, ...

Hoe ga ik te werk?
K, hier een voorbeeld van een ajax applicatie. Voor IE verschilt dit echter van andere browsers.
Eerst en vooral moeten we dus een XMLHTTP request initialiseren.
dit doen we met dit stukje code:

Code:

IE = (window.ActiveXObject)? true : false
if(IE){
 Request = new ActiveXObject("Microsoft.XMLHTTP")
} else {
 Request = new XMLHttpRequest()
}

voor IE dus: Request = new ActiveXObject("Microsoft.XMLHTTP")
voor andere browsers: Request = new XMLHttpRequest()

Vervolgens moeten we een een status verandering opzetten. Dit controleert de status van een XML request (geladen, mislukt of klaar voor gebruik.)
dit doen we zo:

Code:

Request.onreadystatechange = collectData

Straks ga ik hier verder op in, maar eerst gaan we de request zelf aanmaken.
dit kan met dit stukje code:

Code:

Request.open(methode,locatie,async,username,paswoord)

En hier zien we terug de asynchronous staan, wel dit is een parameter die bepaalt of het script moet blijven draaien tijdens de request, of moet worden gesloten tot de request is geladen. Dit laatste kan echter voor problemen zorgen, dus ik raad aan om het op 'true' te zetten.
bij methode gebruiken we hier meestal GET en de locatie is dus het xml bestand. Username en paswoord moeten worden opgegeven als de locatie file beveiligd is (.htaccess).
Dit gebruiken we voor deze tutorial:

Code:

Request.open("GET", "data.xml", true)

Dan moeten we nog de request verzenden:

Code:

Request.send('')

Merk op dat send leeg is, laat het zo, want sommige browsers doen moeilijk als het niet opgegeven is.

Vervolgens gebruiken gaan we de collectdata functie afwerken:

Code:

function collectData(){
        if(Request.readyState == 4){
            if(Request.status == 200){
            // Hier komt de uitvoering van code.
            }
        }
    }

readystate == 4 wil zeggen dat het xml bestand geladen is.
request.status == 200 wil zeggen dat de pagina status 'Ok' is.

Dit is nu dus de totale functie:

Code:

function requestData(Location,Handler){
    IE = (window.ActiveXObject)? true : false

        if(IE){
        Request = new ActiveXObject("Microsoft.XMLHTTP")
        } else {
        Request = new XMLHttpRequest()
        }
        function CollectData() {
           if(Request.readyState == 4){
              if(Request.status == 200){
                 // Hier komt de uitvoering van code.
              }
           }
        }
        if(Request){
        Request.onreadystatechange = collectData()
        Request.open("GET", "data.xml", true)
        Request.send('')
        }
    }

zo, dit was het voor nu.

Updates:
12-02-2006: voorbeeldbestand (php-xml-js) bijgevoegd.

Zeer interessante topic, ik wist om eerlijk te zijn totaal niet wat Ajax was maar dit heeft me al een stuk verder geholpen.

Nu rest me uiteraard eerst en vooral nog XML te leren ;)

oh, zit daar maar niet om in, xml is enorm simpel (toch hoe we het hier gebruiken).

voorbeeld:

Code:

<?xml version="1.0" encoding="iso-8859-1" ?>
<data>
<username>Sebastian Kerckhof</username>
<userid>2</userid>
</data>

zo ziet xml er beetje uit.

Ik heb er een tijdje geleden een boek over gekocht, na de hele theorie gelezen te hebben snap ik om eerlijk te zijn nog steeds niet wat het voordeel is van XML, waarom ik het dus zou gebruiken. Wat zijn de voordelen van XML t.o.v. PHP en (x)HTML samen te gebruiken.

Mooi stukje tekst Sebastian ! Hopelijk komt er snel meer te staan :-)

Origineel gepost door Ewald Vanderveken

Ik heb er een tijdje geleden een boek over gekocht, na de hele theorie gelezen te hebben snap ik om eerlijk te zijn nog steeds niet wat het voordeel is van XML, waarom ik het dus zou gebruiken. Wat zijn de voordelen van XML t.o.v. PHP en (x)HTML samen te gebruiken.

XML zorgt ervoor dat alle gegevens in eenzelfde stijl worden behandeld. Als programma A zijn data levert volgens XML, dan kan programma B daar zonder veel moeite mee overweg. Dit zorgt ervoor dat verschillende programma's/systemen veel makkelijker kunnen communiceren met elkaar...

Wel, php, xhtml en xml zijn 3 totaal verschillende dingen.
xml wordt eigenlijk voornamelijk gebruikt als een soort connectiemiddel, om gegevens door te sturen tussen verschillende dingen, vb php & flash, ajax, ...
Xml is eigenlijk heel simpel hoe het hier gebruikt wordt.
Je bepaalt alles zelf, de tags, variabelen, ...
Mss dat ik later nog wel een xml tutorial schrijf.

Ik heb mezelf er de laatste weken ook in verdiept en vind het een prachtig iets.
Bij mijn volgende grote project zal ik dan ook zeker meer Ajax gaan gebruiken.

XML is dus eigenlijk vooral goed voor andere dingen dan websites zoals bepaalde applicaties? Want als je ervoor zorgt dat je website helemaal correct in XHTML en CSS is, dan wordt hij hoe dan ook toch steeds goed weergegeven.

Het ligt aan mij hoor, maar ik krijg het principe van XML er gewoon echt niet in :). Met bovenstaand voorbeeld (over AJAX) begrijp ik wel waarvoor het handig kan zijn, maar heb je misschien nog andere praktische voorbeelden die enkel mogelijk zijn met XML?

kijk, ewald, ze zeggen dat xhtml een tussenstap van html naar xml is, maar zo zie ik het niet.
Xhtml is iets heel anders.
xhtml en css zijn opmaaktalen voor de layout van je site.

XML daarentegen wordt gebruikt om te communiceren tussen verschillende talen, met 1 uniforme taal.
met xml geef je dus infeite je gegevens mee van de ene taal naar de andere.
Bijvoorbeeld tussen flash en php of javascript en asp.
Want in javascript kun je geen php gebruiken, maar wat als je dan data uit een database wilt verwerken met javascript?
Dan kun je door php de data in xml laten zetten en dit kan javascript wel verwerken.
Php stuurt dus de data in xml formaat, en javascript kan xml lezen, idem voor flash en andere nog zoveel meer toepassingen.

1 erg groot nadeel, de afkorting is ook een voetbal club waar ik GEEN fan van ben :)

Nu begin ik het te begrijpen. Bedankt hiervoor Sebastian, bij verdere vragen weet ik waar ik moet zijn ;)

Update: voorbeeldbestand (ajax.zip) bijgevoegd met php-xml-js.

XML is eigenlijk een beschrijvende taal, je kan het (zoals gezegd) zien als een taal om data door te geven tussen applicaties of apparaten. In principe zou een koelkast XML data kunnen ontvangen en interpreteren met de software die op de computerchip zit. (wanneer het een hightech koelkast betreft, wat eigenlijk al een hele tijd op de markt is)

Voordeel is ook dat je de data die binnen een bepaalde (eigengekozen) structuur zit kan omzetten naar een nieuwe structuur, transformeren zoals dat dan heet via XSLT. Omdat je de tags etc zelf kan kiezen vind je XML in ontzettend veel zaken terug, zoals configuratie bestanden - muziekplaylists - flatbases (textuele databases) - ...

Eens je doorhebt hoe het werkt en hoe breed de toepassingen zijn is XML zeer eenvoudig te gebruiken, maar je doet er goed aan minstens een basis DOM (document object model) en/of XPATH op te doen, om er goed mee te kunnen werken en de data binnen de node-structuur vlot te kunnen benaderen.

Ajax is leuk verzonnen, vooral als term, maar geen nieuwe technologie.
Ik maak er op mijn website al gebruik van - vooral voor berekeningen d.m.v. PHP.

Websites worden er helaas vooral 'zwaarder' van, d.w.z. veel extra code en een vaak onlogischere opbouw. Maar het belangrijkste... zolang er mensen zijn die Javascript of alle ActiveX uitschakelen zal er altijd een alternatief moeten worden geleverd. En dat maakt het implementeren van Ajax een erg tijdrovende bezigheid.

Ja, dat ajax al langer bestaat, staat in de tutorial.
Maar zoals je zegt is er soms een onlogische opbouw en veel extra code.
Dit is echter wat je ook veel ziet met flash sites, mensen willen opeens alles in flash of ajax, je moet echter goed uitkiezen waarvoor je het gebruikt en indien het goed gekozen is, is ajax zeer nuttig.
Om veel extra code te besparen kun je ook een algemene ajax handler maken hé...