Het uitvoeren van AJAX-calls is tegenwoordig zo’n beetje een absolute must geworden. Het is superhandig om data op te halen en door javascript te laten verwerken. Met jQuery is het erg eenvoudig in tegenstelling tot native JavaScript. Vandaag ontdekte ik iets in de AJAX-functie van jQuery, waarvan ik me afvraag waarom ik dit nog niet eerder heb gezien: het synchroon uitvoeren een AJAX-call.

Hierbij wacht de verdere executie van javascript op het resultaat van de AJAX-call. Dit is bijzonder geschikt voor formulier-validatie. Om een AJAX-functie synchroon uit te laten voeren, hoef je je alleen de async-optie mee te geven met de waarde false.

In het onderstaande voorbeeld zie je de functie checkUsernameAvailability. De functie geeft de waarde van available pas terug als de AJAX-call afgerond is.

function checkUsernameAvailability() {
 var available = false;
 $.ajax({
        type: "POST",
        url: '/ajax/checkUsernameAvailability',
        data: { username: $('input[name=username]').val() },
        success: function (data) {
             if (data.available === true) {
             available = true;
             }
        },
        dataType: 'json',
        async: false
        });
return available; 
}
Reacties