jQuery en Ajax

jQuery maakt een hoop dingen een stuk makkelijker. Zo ook het gebruik van Ajax. jQuery heeft een aantal functies ingebouwd om hier makkelijk mee om te gaan, namelijk $.ajax, $.post en $.get. Tevens zijn er een aantal hulp functies.

$.post

Met $.post is het eenvoudig om een POST request te doen. Echter is deze beperkt in de mogelijkheden. Een request sturen is zeer eenvoudig:

  1. $.post('/pad/naar/bestand', {
  2.   variabele1: 'inhoud',
  3.   variabele2: 'var2inhoud'
  4. });

Dit is al genoeg om een pagina aan te roepen, echter kun je niks met de data die de server terug stuurt. Die kun je eenvoudig opvangen door een extra functie toe te kennen. Als argument wordt de data die is teruggestuurd van de server aangenomen.

  1. $.post('/pad/naar/bestand', { var1: 'inhoud' }, function (data) {
  2.   alert( data );
  3. });

Op deze manier verschijnt de opgevraagde data in een popup op het scherm. Uiteraard kun je deze data bijvoorbeeld ook wegschrijven in een div element.

$.get

De $.get functie werkt bijna hetzelfde als de $.post functie, met als enigste verschil dat er een GET request gedaan kan worden. Alle variabelen moeten dus in de URL gezet worden.

  1. // Dit is de simpelste variant, hier wordt enkel de URL aangeroepen en verder niks
  2. $.get('/pad/naar/bestand');

Je kunt ervoor kiezen om de parameter achter de URL zelf in te vullen. Echter kan jQuery dit ook voor je doen:

  1. $.get('/pad/naar/bestand', { var1: 'inhoud1', var2: 'inhoud2' });
  2. // jQuery zal automatisch de goede URL aanmaken en oproepen, in dit geval dus:
  3. // /pad/naar/bestand?var1=inhoud1&var2=inhoud2

Ook de $.get functie heeft een callback functie, waarin de data van de server verwerkt kan worden:

  1. $.get('/pad/naar/bestand', { var1: 'inhoud1', var2: 'inhoud2' }, function (data) {
  2.   alert( data );
  3. });

Dit voorbeeld zal een popup geven met daarin de reactie van de server.

$.ajax

De ingebouwde Ajax functie biedt veel meer functies dan de overige functies. De bovengenoemde functies zijn dan ook niet meer dat een verkorting van deze functie. Hetzelfde effect als de $.get functie kan op deze manier bereikt worden:

  1. $.ajax({
  2.   url: '/pad/naar/bestand?var1=inhoud1&var2=inhoud2',
  3.   data: {
  4.     var1: 'inhoud1',
  5.     var2: 'inhoud2'
  6.   }
  7.   success: function (data) {
  8.     alert( data);
  9.   }
  10. });

De jQuery bevat veel meer dan dat. Ik heb hier een kleine opsomming gemaakt:

beforeSend

Deze functie wordt aangeroepen voordat het bestand op de server wordt aangeroepen. In deze functie kun je er bijvoorbeeld voor zorgen dat er een laadbalk getoond wordt.

data

De data die naar de server verzonden moet worden. Wanneer een object wordt opgegeven zal deze naar een string geconverteerd worden

error

Wanneer er iets mis gaat tijdens de verbinding naar de server wordt deze functie aangeroepen. Wanneer een niet bestaande pagina of wanneer de server niet bereikt kan worden bijvoorbeeld

success

Wanneer een Ajax request succesvol is verlopen wordt deze functie aangeroepen. De terug gegeven data van de server wordt in deze functie als argument geplaatst.

type

Post of Get.

Praktijkvoorbeeld

In dit voorbeeld roep ik deze URL op:
http://www.noobtutorials.nl/voorbeelden/jquery-en-ajax/voorbeeld.php

  1. $( function () {
  2.         $(".example").click( function () {
  3.                 $.ajax({
  4.                         url: 'http://www.noobtutorials.nl/voorbeelden/jquery-en-ajax/voorbeeld.php',
  5.                         beforeSend: function (data) {
  6.                                 $(".example").after("<img src='/voorbeelden/jquery-en-ajax/loader.gif' id='loader'>");
  7.                         },
  8.                         success: function (data) {
  9.                                 $("img#loader").remove();
  10.                                 alert(data);
  11.                         }
  12.                 });
  13.         });
  14. });
Klik hier voor het voorbeeld

JSON

JSON is een javascript object. Het mooie daarvan is is dat je veel data eenvoudig kunt versturen en via Javascript kan verwerken. Daarnaast biedt PHP ook een functie om een PHP array om te zetten in een JSON object. Dat kan eenvoudig gedaan worden met de functie json_encode.

In het volgende voorbeeld selecteer ik een aantal gebruikers uit een database, en plaats die in een array. Vervolgens wordt deze array omgezet in een JSON object en op het scherm geprint. Vervolgens wordt deze verwerk met behulp van jQuery.

  1. $query = mysql_query("select id, naam from gebruikers");
  2.  
  3. while($row = mysql_fetch_array($query)) {
  4.   $output[] = $row;
  5. }
  6. echo json_encode($output);

In jQuery ziet dit er dan zo uit:

  1. $(".example2").click( function () {
  2.         $.ajax({
  3.                 url: 'http://www.noobtutorials.nl/voorbeelden/jquery-en-ajax/json-voorbeeld.php',
  4.                 dataType: 'json',
  5.                 beforeSend: function (data) {
  6.                         $(".example2").after("<img src='/voorbeelden/jquery-en-ajax/loader.gif' id='loader'>");
  7.                 },
  8.                 success: function (data) {
  9.                         var output = '';
  10.                         $("img#loader").remove();
  11.                        
  12.                         $.each(data, function (key, value) {
  13.                                 output += 'key: ' + value.id + ', value: ' + value.naam + '<br>';
  14.                         })
  15.                        
  16.                         $(".data").html( output );
  17.                 }
  18.         });
  19. });
Klik hier voor het voorbeeld

Mocht je nog vragen hebben naar aanleiding van deze tutorial, stel ze dan gerust via het contact formulier