jQuery & AJAX
1. Ajax en jQuery
2. $.ajax();
3. $.post();
4. $.get();
4. .load();
6. Slot
1. Ajax en jQuery
In deze tutorial ga ik er vanuit dat iedereen weet wat Ajax is en waarvoor het precies gebruikt wordt. Als je nog totaal onbekend bent met het fenomeen Ajax, kun je best deze tutorial eens lezen. Persoonlijk vind ik jQuery heel handig om Ajax-requests aan te roepen. Het gebeurt op een eenvoudig manier zonder een extra script in te laden als je jQuery al ergens anders gebruikt in je website. In totaal bevat jQuery een vijftal manier om Ajax-calls te maken. Ik zal je hier wegwijs proberen maken.
Voor we kunnen beginnen met deze tutorial moeten we jQuery aanroepen in onze pagina. (Je kan het jQuery-framework downloaden op deze pagina.)
<head>
<script type="text/javascript" src="path-jquery-file.js"></script>
</head> |
In deze tutorial ga ik enkel requests in combinatie met PHP behandelen. Ajax gaat natuurlijk veel verder dan dat, je kan ook data uit XML, JSON, ... halen of gewone HTML pagina's op halen.
 top
2. $.ajax();
De eerste methode die ik wil bespreken is de $.ajax() methode.
Dit is de als het ware de "moederfunctie" in jQuery. Laten we de functie illustreren met een voorbeeld.
$.ajax({
type: "POST",
url: "pagina.php",
cache: false,
data: "id=12&voornaam=marcel&achternaam=verbeke",
success: function (html) {
$("div#ajax-response").html(html);
}
error: function (request, error)
{
alert ("FOUT:" + error);
}
complete: function () {
alert ("Script is volledig uitgevoerdi");
}
}); |
1. TYPE: Hier gaan we zeggen welk type request er moet gebeuren. Een POST-request of een GET-request. Het grootste verschil tussen de twee is dat je met POST normaal gezien veel grotere brokken informatie kunt doorsturen dan met GET.
2. URL: welk PHP-bestand moet er aangeroepen worden?
3. CACHE: Dwingt de browser om de ajax-response op te slaan in zijn cache. Zet dit uit als je response dynamisch is zoals bv het geval bij Gmail, waar er constant op nieuwe emails gecontroleerd wordt.
3. DATA: Hier geef je de informatie mee met je AJAX-Request. Deze zul je in je PHP-file dan terug kunnen gebruiken. Kan ook JSON-formaat zijn.
4. SUCCESS: Hier zeg je wat er moet gebeuren als je request is uitgevoerd. Dit kan om het even wat zijn. In mijn voorbeeld gaan we bv nieuw stuk HTML genereren in ons PHP-bestand en dit zal dan weergegeven worden in DIV met id="ajax-response".
5. ERROR: Wat moet er gebeuren als er zich een fout heeft voortgedaan? Dit kan handig zijn bij het debuggen.
6. COMPLETE: Wat moet er gebeuren als de volledige request is uitgevoerd ongeacht fouten?
Gebruik deze functie als je gebruik wilt maken van de ERROR-functie die ingebouwd is om een boodschap weer te geven als er zich een fout heeft voortgedaan. Eigenlijk kun je de $.ajax(); in elk mogelijk geval gebruiken!
top
3. $.post();
De volgende methode die ik graag met jullie had doorgenomen is $.post();. Hiermee kun je enkel POST-requests maken. Een voorbeeld zal alles duidelijk maken.
var data = 'id=12&voornaam=marcel';//Kan bv ook uit JSON bestaan, hier een gewone data-string (zoals in een URL).
$.post (
'pagina.php',
data,
function (html) {
("div#ajax-response).html(html); //Zelfde principe als bij $.ajax();
},
'html' //Uit welke type van data bestaat je response? Kan ook bv XML, JSON zijn.
); |
Als je simpelweg een POST-call wilt maken, gebruik dan deze methode. Het nadeel is wel dat je niet kunt werken met fouten zoals bij $.ajax(); wel het geval is.
top
4. $.get();
Met $.get();-methode kun je enkel GET-requests maken. Voor de rest is alles analoog met d $.post();
var data = 'id=12&voornaam=marcel'; //Kan bv ook uit JSON bestaan.
$.get (
'pagina.php',
data,
function (html) {
("div#ajax-response).html(html); //Zelfde principe als bij $.ajax();
},
'html' //Uit welke type van data bestaat je response? Kan ook bv XML, JSON zijn.
); |
top
5. .load();
Nog een iets dat ik jullie wil uitleggen is de .load(). Hiermee kun je enkel een stukje HTML inladen.
var url = 'pagina.php';
$("#ajax-response").load(url); |
6. Slot
Dit was mijn eerste tutorial voor Sitemasters. Ik hoop dat mijn informatie correct was en duidelijk uitgelegd is. Opmerking zijn altijd welkom.
Meer info vind je op http://www.jquery.org
|
