> For the complete documentation index, see [llms.txt](https://1itf.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1itf.gitbook.io/jquery/10-ajax-zonder-server-side-scripting/usd.ajax.md).

# $.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()`.

{% hint style="success" %}
★ Open **ajaxLokaal/ajax.html**.\
★ Bekijk de broncode en test het resultaat in een browser.
{% endhint %}

```javascript
$.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`.