AJAX

AJAX (asynchroon javascript and xml) en een klein beetje Javascript events.

Gesponsorde koppelingen

Inhoudsopgave

  1. Introductie/verklaring van het buzz-word
  2. Javascript Events
  3. Javascript Events (overbodige extra's)
  4. Het XMLHTTPRequest object - het object aanmaken
  5. Het XMLHTTPRequest object - het object zijn parame
  6. Het XMLHTTPRequest object - de cliff-hanger verkla
  7. De afhandeling van de vraag
  8. De 4 manieren van het schrijven van data
  9. Manier 1: Gewone HTML
  10. Manier 2: Platte tekst
  11. Manier 3: Als XML
  12. Manier 4: JSON

 

44 reacties op 'AJAX'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppeling

Barman
Barman
5 jaar geleden
 
0 +1 -0 -1
Ik zal het script zeker bekijken, want ik was al van start gegaan met AJAX.
Legolas
Legolas
5 jaar geleden
 
0 +1 -0 -1
die tweede a staat voor and :P asynchronious javascript and xml
Woopie100
Woopie100
5 jaar geleden
 
0 +1 -0 -1
VET !!!! :P
Jelmer was het mssn zat om mij telkens uitleg te geven:P
DANK JE WEL JELMER !!!! _o_
Kasper Isgek
Kasper Isgek
5 jaar geleden
 
0 +1 -0 -1
Hehe, je hebt er goed aan gedaan eindelijk een tut er over te schrijven Jelmer!

Edit: jep, 't is een goeie tutorial! Erg diepgaand en interessant voor de AJAX-leek zoals ik :)
Jan Koehoorn
Jan Koehoorn
5 jaar geleden
 
0 +1 -0 -1
Mooie tut Jelmer, bedankt!
Willem Jan
Willem Jan
5 jaar geleden
 
0 +1 -0 -1
De degelijke tutorials schieten de grond uit! Eerst Jan zijn MySQL datum/tijd functies, en nu Jelmer zijn AJAX tutorial... Nog meer redenen om hier te blijven komen :D
Han eev
Han eev
5 jaar geleden
 
0 +1 -0 -1
COOL, Hier hebben we echt wat aan ;)
Bedankt Jelmer =)
Barman
Barman
5 jaar geleden
 
0 +1 -0 -1
Alleen jammer dat mijn kerstvakantie hieraan ten onder gaat :D
Sebastiaan
Sebastiaan
5 jaar geleden
 
0 +1 -0 -1
Ja, hahaha de mijne ook! AJAX lijkt me op het eerste gezicht niet makkelijk :)
Steff an
Steff an
5 jaar geleden
 
0 +1 -0 -1
Quote:
Ja, hahaha de mijne ook! AJAX lijkt me op het eerste gezicht niet makkelijk :)


Het Ajax gedeelte van het ophalen van de data niet, maar het toepassen in een document vind ik persoonlijk lastiger.

@Jelmer bedankt!
Jelmer rrrr
Jelmer rrrr
5 jaar geleden
 
0 +1 -0 -1
Ja, wat kennis van Javascript is toch wel handig. AJAX zelf is vrij invoudig, en voor diegenen die het niet met mij eens zijn, hoop ik dat deze tutorial ze op andere gedachten kan brengen ;-)

beadnkt voor de reacties zover!
Sebastiaan
Sebastiaan
5 jaar geleden
 
0 +1 -0 -1
Quote:
invoudig
Invouding nog wel! Dan moet het wel lukken ;)
Rolf
Rolf
5 jaar geleden
 
0 +1 -0 -1
FF een reactie'tje op dat JSON. eval() is een functie die de code die hij inslikt uitvoert:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<?
<script type="text/javascript">
response = "datDing = 'Goeiemorguh'";  // datDing = 'Goeiemorguh' moet uitgevoerd worden
eval(response);
alert(datDing);   // en inderdaad, de variabele "datDing" is nu gevult met de string "Goeiemorguh";
</script>
?>


Het idee achter eval is dat je de code dynamisch kunt genereren:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<?
<script type="text/javascript">
var tijd = "morguh";
response = "datDing = 'Goeie" + tijd + "'";
eval(response);
alert(datDing);
</script>
?>


En zo kun je de var 'response' natuurlijk vervangen door hetgene dat de server via ajax heeft gegeven

Verder is het een heel relaxte tut, echt precies wat ik weten wilde :)
Legolas
Legolas
5 jaar geleden
 
0 +1 -0 -1
wat dacht je van:

datDing = 'Goeie' + tijd;
Jelmer rrrr
Jelmer rrrr
5 jaar geleden
 
0 +1 -0 -1
De JSON manier was nieuw voor mij, maar is net iets uitgebreider dan Rolf zegt. Naja, het werkt inderdaad als een soort serialize() bekend uit PHP.

Voorbeeld van code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{"books":[{"book":
        {
        "title":"JavaScript, the Definitive Guide",
        "publisher":"O'Reilly",
        "author":"David Flanagan",
        "cover":"/images/cover_defguide.jpg",
        "blurb":"Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
        }
    },
    {"book":
        {
        "title":"DOM Scripting",
        "publisher":"Friends of Ed",
        "author":"Jeremy Keith",
        "cover":"/images/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":"/images/cover_utopia.jpg",
        "blurb":"Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
        }
    }
]}
bron: http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html

Meer leesvoer:
http://www.crockford.com/JSON/index.html
http://en.wikipedia.org/wiki/JSON
Rolf
Rolf
5 jaar geleden
 
0 +1 -0 -1
@Jelmer Idd het is een stuk uitgebreider, maar wat ik liet zien was de kern van het idee :p
Jelmer rrrr
Jelmer rrrr
5 jaar geleden
 
0 +1 -0 -1
@Rolf: inderdaad.

Er is met JSON trouwens nog een andere manier dan met XMLHTTPREquest om data binnen te trekken. Je kan ook een door PHP gegenereerd JS-bestand includen, gewoon een <script src=""/> tag aanmaken. Nadeel is naar mijn mening dat de eerste A een beetje wegvalt...
Rolf
Rolf
5 jaar geleden
 
0 +1 -0 -1
Yup da klopt zo maken ze bijvoorbeeld ook dynamische tellers op de statische .html-pagina's van Freewebs, en zo'n dynamisch gegenereerd .js ziet er dan uit als
document.write("<img src='counter98530.jpg'></img>");
maar je kunt het ook gebruiken om dynamisch gegevens door te zenden.. het is idd alleen lang niet zo snel en flexibel als bijv. xml via XMLHTTPRequest
Steff an
Steff an
5 jaar geleden
 
0 +1 -0 -1
Even commentaar op 'Het XMLHTTPRequest object - de cliff-hanger verklappen'

Jij zegt dat je 'get' kan veranderen in 'post' en zo op een post kan doen, alleen moet je dan ook nog de header hier voor zetten:
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Jelmer rrrr
Jelmer rrrr
5 jaar geleden
 
0 +1 -0 -1
Dat zou wel eens nodig kunnen zijn inderdaad. (Mijn prototype.js doet het ook, had het alleen nog niet gezien. prototype.js is trouwens echt een aanrader voor iedereen die te lui is om kilometers functies te schrijven en dingen uit te zoeken.)

Trouwens, als je dan toch bezig bent, in het geval van POST, moet je eigenlijk ook even deze meesturen:
xmlhttp.setRequestHeader('Connection', 'close');
Dat voorkomt problemen (bugs) in Mozilla.

Ik zal het even opnemen in het artikel. Dankje Stefan
Steff an
Steff an
5 jaar geleden
 
0 +1 -0 -1
test
Steff an
Steff an
5 jaar geleden
 
0 +1 -0 -1
Quote:
Ik zal het even opnemen in het artikel. Dankje Stefan


Het is SteFFan! met dubbel 'f'.


ps. waarom komen de tutorial reacties niet in de "Laatste reacties" lijst?
Sebastiaan
Sebastiaan
5 jaar geleden
 
0 +1 -0 -1
Weet ik ook niet, wel irri :|
Steff an
Steff an
5 jaar geleden
 
0 +1 -0 -1
Ja best wel!
Jason de Ridder
Jason de Ridder
5 jaar geleden
 
0 +1 -0 -1
mooie uitgebreide tut :-) Ik ga denk beginnem met JSON :-P
K i p
K i p
4 jaar geleden
 
0 +1 -0 -1
bij #Javascript Events (overbodige extra's) merkte ik dat AJAX wordt ingeleid door
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<? ?>


maar, dat zijn shorttags ofzo

Net als voor php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<? ?>
kan, maar netter
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<?php ?>
is. Wat is bij AJAX de nettere versie?
Legolas
Legolas
4 jaar geleden
 
0 +1 -0 -1
javascript hoort tussen script tags, waarschijnlijk heeft jelmer die er gedumpt voor de highlighting
Eric Cartman
Eric Cartman
4 jaar geleden
 
0 +1 -0 -1
Dat is alleen gedaan om de syntax-highlighting (die voor beide bijna hetzelfde is) aan te zetten. Toch Jelmer?
Rob
Rob
4 jaar geleden
 
0 +1 -0 -1
AJAX.. Jaja... Wel toevallig :P
Eris
Eris
4 jaar geleden
 
0 +1 -0 -1
Jip / Legolas jullie geven het goede antwoord :)
Jelmer rrrr
Jelmer rrrr
4 jaar geleden
 
1 +1 -0 -1
Uit de eerste pagina:
Quote:
Af en toe zijn er php-tags gebruikt om de javascript-code op de vrolijken. Denk zo: korte tags betekent javascript, normale, nette en lange tags zijn ook daadwerkelijk PHP. En bij mijn doctype van m'n XML-voorbeeld gaan we de mist even in :-)

^^,
K i p
K i p
4 jaar geleden
 
0 +1 -0 -1
whaha oke bedankt:-)
Jelmer rrrr
Jelmer rrrr
4 jaar geleden
 
0 +1 -0 -1
Helaas kan ik geen pagina's toevoegen, maar indien ik het wel kon wil ik toch nog even devolgende links aan jullie voorleggen. Het is echt een enorme hype tegenwoordig om toolkits en frameworks te maken, en zeker in combinatie met XHR. Dus daarom is het misschien toch nuttig om niet gewoon vanaf de grond te beginnen, maar vast een voorsprong te pakken door een kant-en-klare lading functies in gebruik te nemen.

Zelf gebruik ik prototype erg veel. Simpelweg omdat er allemaal nuttige dingen inzitten en het leven aanzienlijk lichter maakt :) Helaas is het originele project niet al te best gedocumenteerd, maar dit artikel helpt je aardig verder met de meest nuttige features. Prototype doet het overigens heel erg goed samen met script.aculo.us, een lading effecten en drag&drop functies. Een heel mooi voorbeeld van een erg sterke implementatie in een framework van deze twee toolkits is ruby on rails. Bij mijn weten zijn Cake en Prado de PHP frameworks die er het dichtst bij in de buurt komen. Zie ook Sajax. Ik geloof dat er zelfs een Pear package is die vergelijkbare functionaliteit biedt.

Andere koek is de Dojo toolkit. Deze is zo uitgebreid dat het je de mogelijkheden biedt om hele interfaces ermee te bouwen. Naast allemaal XHR functies (dojo.io.bind) (ook cross-site schijnt) zijn er ook nog een hele lading functies voor effecten (vergelijkbaar met script.aculo.us), widgets (kalenders e.d.), flash support voor opslag van veel data aan de client-side (soort overgrote cookies), drag&drop, buttons etc. etc. Uiteraard heeft het alle functionaliteit die Prototype heeft ook in zich. Dit is bij mijn weten verreweg de meest complete open-source javascript bibliotheek die er te krijgen is op het moment.

Mochikit is een beetje wat Dojo is, maar dan heel erg veel lichter. Mochikit heeft een beetje XHR, een beetje effecten, een beetje drag&drop, en interpreter enz. Eigenlijk alleen de basis-functies die je echt nodig hebt bij het maken van een website die voldoet aan het ajax-buzzword. Het voordeel is dat Mochikit licht is. Het downloaden van enorme JS-bestanden zoals bij script.aculo.us & dojo is niet van toepassing.

Nog even het vermelden waard is Rico. Het is een beetje vergelijkbaar met Mochikit. Het heeft al zijn voor- en nadelen. Het heeft alleen een andere programmeerstyle en wat andere functies.
K i p
K i p
4 jaar geleden
 
0 +1 -0 -1
Serieus chille tutorial!!! :-O

Doet me erg denken aan Flash en loadVars();
Jos
Jos
4 jaar geleden
 
0 +1 -0 -1
Misschien ook een handige tip voor mensen die met cached pagina's zitten
te worstelen:

Als je de query van de url uniek maakt, wordt de pagina nooit uit de cache gehaald, b.v. :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<?
var uniek = (new Date()*Math.random());
var teOpenenPagina = 'http://hoi.nl/index.php?uniekequery=' + uniek;
?>


P.s.

Ik zie ook nog allemaal frameworks voorbij vliegen, kwou dan toch
ook nog even jQuery onder de aandacht brengen :-)
Koen Koen
Koen Koen
4 jaar geleden
 
0 +1 -0 -1
Hey

ik ben nu een beetje met ajax bezig en alles werkt goed eindelijk :d
Ik nu nu alleen niet dat mensen mijn php pagina's kunnen bekijken en ik vond hier een manier hoe dat kon.
Door dit te gebruiken:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
XMLHTTPObject.setRequestHeader("X_USERAGENT", "MijnAjaxApplicatie");


Ik vraag me alleen af waar ik deze zin moet plaatsen? Ik heb het al op een paar plekken geprobeerd maar steeds geeft hij een error ....

Ik gebruik prototype 1.4.0 en mijn ajax tests zijn hier te vinden: http://www.theschoolcriminals.com/ajax/
Kan iemand mij helpen en vertellen waar ik die zin moet plaatsen?

Alvast bedankt!
Jelmer rrrr
Jelmer rrrr
4 jaar geleden
 
0 +1 -0 -1
Prototype stuurt zelf al een header genaamd 'X-Requested-With' mee. Ikzelf controleer daar altijd op:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
   echo 'Ajax!';
}
?>
Rudie
rudie
3 jaar geleden
 
0 +1 -0 -1
Ik denk dat je met [red]..[/red] steeds N.B. bedoelt, want de hele tutorial is van jou, dus alles moet tussen [red] en [/red].
Boeiend :)

Edit:
[quote]Manier 1: Gewone HTML
Deze heb ik al hierboven in mijn voorgaande voorbeelden gebruikt, omdat deze de makkelijkste methode is.

Maar daarbij ook de smerigste. Je stuurt namelijk allemaal zooi op die de browser ook prima zelf kan: de opmaak. Een antwoord wordt daardoor vele malen groter en minder abstract. Die abstractie is makkelijk bij het maken van meerdere applicaties, of het aanpassen van het uiterlijk. Heb je die abstractie niet, dan moet je dus ook je PHP-bestanden allemaal aanpassen.[/quote]
En dan is natuurlijk de vraag, waar leg je je abstractie neer, by PHP, of bij JavaScript. Ik zou het wel weten, PHP. Dus je stuurt opmaak mee, want dat moet je javascript niet laten doen...
Jelmer rrrr
Jelmer rrrr
3 jaar geleden
 
0 +1 -0 -1
t vercetti schreef op 26.03.2007 12:26:
En dan is natuurlijk de vraag, waar leg je je abstractie neer, by PHP, of bij JavaScript. Ik zou het wel weten, PHP. Dus je stuurt opmaak mee, want dat moet je javascript niet laten doen...

Ligt eraan. Je elimineert dan daarmee ook meteen de manier om een andere client dan jouw Javascript code als client toegang te bieden. Even een flash-versie maken zal dan aanzienlijk lastiger worden.

Daarnaast wordt je transmissie groter. Het idee van XMLHTTP is dat je zo min mogelijk opnieuw hoeft te laden, althans, dat is wat ik er onder versta.

En je bent direct gebonden aan je opmaak. Ik gebruik zelf vaak dezelfde 'informatiestroom' op meerdere plekken, in andere opmaak. In jouw situatie zou ik voor iedere plek een apart deel in PHP moeten schrijven.

Aan de andere kant heb je ook weer gelijk. Ik heb zelf eens geprobeerd om een website een beetje als een X-server te maken, dus dat je eigenlijk alles kan programmeren in PHP, en dat PHP als het ware de rest zelf wel bedenkt. Als dit goed werkt kan je veel sneller webapplicaties maken dan waneer je Javascript en PHP als apart neemt en is het vrij simpel om tegelijkertijd, met dezelfde bron, een niet-javascript versie beschikbaar te stellen. Nadeel is wel dat het veel meer van je server eist (server-side state!) en dat je de flexibiliteit van Javascript mist.

Maar waarom zou jij niet de opmaak door Javascript laten doen?
Herjan Treurniet
Herjan Treurniet
3 jaar geleden
 
0 +1 -0 -1
Geweldige tutorial :D Ik heb nu een mooie, zelfgebouwde chatbox.
Sander
Sander
3 jaar geleden
 
0 +1 -0 -1
Onderstaande URL is een link naar een tutorial op W3Schools en kan ook een interessante tutorial zijn voor veel mensen. Vind hem zelf nog wat duidelijker.

http://www.w3schools.com/ajax/default.asp
Emmanuel Delay
Emmanuel Delay
3 jaar geleden
 
0 +1 -0 -1
Voor wie wil weten hoe je een JSON object in php aanmaakt en doorstuurt:

heel simpel eigenlijk.

bv.
(php)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?
$m_object = new klassenaam(...);
...
Echo '{"objectnaam":'.json_encode($m_object).'}';
?>

Die echo kan je dan in javascript direct gebruiken als object.


de respons:
(javascript)
...
if(http.readyState == 4)
{
var m_object = eval('(' + http.responseText + ')');
var objectje = m_object.objectnaam;
...
}

die var objectje kan je in javascript dus gebruiken. Het zal de zelfde properties hebben als $m_object.

methodes en constructors worden uiteraard niet meegestuurd.
K i p
K i p
4 maanden geleden
 
0 +1 -0 -1
Deze helpt me steeds opnieuw :-)

Om te reageren heb je een account nodig en je moet ingelogd zijn.

  • Labels
  • Geen tags toegevoegd.