$.ajax()

De methode $.ajax() is de meest uitgebreide maar tevens ook de moeilijkste AJAX methode. Alle voorgaande methodes zijn een vereenvoudigde afleiding van $.ajax(). Een aantal eigenschappen die we in voorgaande methodes gebruiken (zoals bijvoorbeeld foutafhandeling) zijn in deze methode rechtstreeks geïntegreerd.

Response: Tekst, HTML, JavaScript, JSON, JSONP en XML. Syntax: $.ajax(settings)

• Settings:

  Een set van naam/waarde eigenschappen om de methode te configureren. In totaal zijn er meer dan dertig eigenschappen. Voor een volledig overzicht, zie: http://api.jquery.com/jQuery.ajax/

De belangrijkste settings zijn:

• url:

  De URL van de op te halen pagina.

• dataType:

  Het datatype (text, html, script, json, jsonp of xml) dat we verwachten terug te krijgen van de server.

• data:

  De data die we als filter mee sturen.

• type:

  Verzend de extra parameters via GET of POST (default is GET).

• beforeSend():

  deze callback functie wordt uitgevoerd net voor de gegevens worden opgehaald. Dit is de ideale plaats om een preloader te tonen.

• success():

  na het inlezen van de externe gegevens wordt deze callback functie uitgevoerd. U kan deze functie vergelijken met de callback uit voorgaande AJAX-methodes.

• error():

  deze callback functie wordt uitgevoerd indien er zich een fout voordoet.

Voor de meeste toepassingen komt u al een heel eind met de vijf voorheen besproken methodes. Bij wijze van voorbeeld gaan we één van de voorgaande toepassingen volledig herschrijven met de methode $.ajax().

★ Open ajaxLokaal/ajax.html. ★ Bekijk de broncode en test het resultaat in een browser.

$.ajax({
    url: 'data/bloemen2.json', 
    dataType: 'json',  
    success: function(data) {
        $('#aantal').text(data.length);
        $.each(data, function(index, value) {
            $("#bloemenlijst").append('<li><a href="' + this.url + '">'
                + this.titel + '</a></li>\n\t');
        });
    },
    error: function(jqXhr, textStatus, error) {
        alert( "error\n" + error );
    }
});

Deze toepassing reageert net hetzelfde als json2.html. De code binnen de callback functie van $.getJSON() verhuist naar de callback van success.