Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Ajax
Webdesign

Een beginnershandleiding voor AJAX met jQuery

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called AJAX for Front-End Designers.
An Example of AJAX With Vanilla JavaScript
How to Use jQuery’s “ajax” Function

Dutch (Nederlands) translation by Martine Reyners (you can also view the original English article)

In het eerste artikel van deze reeks bespraken we de basis van AJAX. In het tweede artikel keken we naar een werkend voorbeeld waarbij gebruik gemaakt werd van vanilla JavaScript.

In deze tutorial overlopen we enkele AJAX-gerelateerde functies en methods van jQuery. We zullen dieper ingaan op de .load() method en de generieke ajax-functie.

Het gebruik van de .load() method

De jQuery .load() method is een simpele, maar krachtige method om data te bekomen. Hieronder kan je de syntax zien:

De volgende tabel toont de mogelijke parameters:

Parameter Beschrijving Required (verplicht)
url Een string die de URL bevat waarnaar het request verzonden wordt. Ja
data De data (in de vorm van een string of een object) die verzonden worden naar de server met het request. Neen
complete Een callback functie die wordt uitgevoerd wanneer het request afgehandeld is, met of zonder succes. Neen

Hier zijn de parameters van de callback functie:

Parameter Omschrijving
responseText De data die uit het request uitgelezen worden.
textStatus Een string die de staat van het request categoriseert.
jqXHR Het jQuery XMLHttpRequest (jqXHR) object, dat een uitbreiding is op het ingebouwde XMLHttpRequest (XHR) object, ondersteund door de browser.

De volgende lijst vat de mogelijke waarden van de textStatus parameter samen:

Om beter te begrijpen hoe de .load() method werkt, bekijken we nog eens het voorbeeld dat we besproken hebben in de vorige tutorial.

Kijk nog eens naar deze duidelijke HTML-structuur:

Dat ziet er zo uit:

Example

Onthoud dat we de inhoud van het #bio element willen bijwerken met de antwoorddata, van zodra er op de knop geklikt wordt.

Hier is de jQuery code die we nodig hebben:

Indien we ervan uitgaan dat het request succesvol is (i.e. indien textStatus ==  'success' of == 'notmodified', dan ziet het uiteindelijke resultaat er zo uit: 

success_jQuery

Bekijk ook de volgende afbeelding die een succesvol request weergeeft:

Javascript_jQuery_Objects

De linkerkolom op deze afbeelding laat het XHR-object zien zoals weergegeven in de console van de browser indien we JavaScript zouden gebruiken (zie vorige tutorial) om het request te doen. De rechterkolom toont daarentegen het jqXHR-object zoals het geprint wordt indien we de .load() method gebruiken.

Indien het request niet succesvol is, zou er echter een bericht zoals hieronder moeten verschijnen. Om dit te doen, bekijken we de waarde van de textStatus parameter en laten we een foutmelding verschijnen:

error_jQuery

Opmerking: Als je het voorbeeld locaal op je pc uittest (en er de Bio.txt file opslaat); dan zal de foutmelding waarschijnlijk verschillend zijn.  Het is bijvoorbeeld mogelijk dat je het volgende resultaat ziet verschijnen:

error_locale_jQuery

Tenslotte is het ook de moeite waard te vermelden dat de .load() method standaard de HTTP GET method gebruikt, tenzij we data als een object naar de server verzenden. Alleen dan wordt de POST  method gebruikt.

Zie de Codepen demo hieronder in dit verband:

Laten we nu het bestandsformaat wijzigen van het bestand dat we van de server opgevraagd hebben. In dit concrete voorbeeld zal de gewenste data meegegeven worden in het Bio.html  bestand in plaats van het Bio.txt bestand. Ook de moeite om te vermelden: het doelbestand bevat twee paragrafen.

Indien we ervan uitgaan dat we enkel de eerste paragraaf willen laden, dan moeten we de oorspronkelijke code als volgt wijzigen:

Dat ziet er zo uit:

success_jQuery_trim

En hier is de Codepen demo:

Conclusie

In deze tutorial, liet ik zien hoe je AJAX met jQuery kan gebruiken. Om het interessanter te maken, hebben we ook enkele praktische voorbeelden uitgewerkt. In de laatste tutorial van deze reeks zullen we afsluiten met een iets complexer voorbeeld.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.