jQuery Ajax

La funzione principale per inviare richieste AJAX è il metodo statico $.ajax(). Dati i molti aspetti della chiamata che possono essere personalizzati, la funzione accetta un unico oggetto JavaScript con i parametri di base ed altri necessari per sovrascrivere i valori di default.

Parametri di base

• url: l'indirizzo al quale inviare la chiamata
• success: funzione da lanciare se la richiesta ha successo. Accetta come argomenti i dati restituiti dal server (interpretati di default come html o xml) e lo stato della chiamata
• error: funzione lanciata in caso di errore. Accetta un riferimento alla chiamata XMLHttpRequest, il suo stato ed eventuali errori notificati

Con questi tre parametri è possibile impostare una prima semplice chiamata AJAX di esempio:

$.ajax({
    url : "mioserver.html",
    success : function (data,stato) {
        $("#risultati").html(data);
        $("#statoChiamata").text(stato);
    },
    error : function (richiesta,stato,errori) {
        alert("E' evvenuto un errore. Il stato della chiamata: "+stato);
    }
});

Nell'esempio precedente, se la chiamata ha successo i dati verranno inseriti all'interno di specifici elementi DOM, altrimenti verrà mostrato un messaggio di errore.

Parametri opzionali e valori predefiniti

Oltre alla possibilità di impostare come opzione di $.ajax() tutti gli eventi locali visti in precedenza, è anche possibile personalizzare ulteriormente la chiamata AJAX relativamente ai dati inviati, la modalità di invio e il tipo di valori restituiti (tra parentesi i valori predefiniti):

• async (true): definisce se la chiamata deve essere asincrona o sincrona (nel
  cui caso bloccherà la pagina fino alla fine della chiamata)
• cache (true): se impostato su false forza la il browser a ricaricare ogni volta i dati del server anche se non sono cambiati
• contentType ("application/x-www-form-urlencoded"): il tipo di contenuto inviato al server
• data: un oggetto {chiave : valore, chiave2 : valore} oppure una stringa "chiave=valore&chiave2=valore2" contenente dei dati da inviare al server
• dataType ("html" o "xml"): il tipo di dati restituiti dal server. Oltre a html, xml e text, accetta script (script JavaScript), json e jsonp (oggetti JavaScript da server locali e remoti)
• global (true): se impostato su false gli eventi AJAX globali non verranno lanciati durante questa richiesta
• ifModified (false): permette che la richiesta sia considerata conclusa con successo (eventi success e ajaxSuccess) solo se i dati restituiti sono diversi da quelli ricavati da una precedente chiamata dello stesso tipo
• jsonp: sovrascrive il valore callback in una strigna di richesta jsonp. Così con {jsonp:'onJsonPLoad'} verrà aggiunta alla stringa passata al server "onJsonPLoad=?"
• username: nome utente se richiesto dal server
• password: password se richiesta dal server
• processData (true): se impostato su false i dati inviati al server non saranno pre-processati ma inviati direttamente
• scriptCharset: forza il charset utilizzato nella richiesta AJAX per i dataType script e jsonp
• timeout: un numero indicante i millisecondi dopo i quali la richiesta viene considerata scaduta
• type ("GET"): il tipo di richiesta da effettuare. Accetta GET o POST
• xhr: una funzione per personalizzare l'oggetto XMLHttpRequest nel caso non si volesse utilizzare ActiveXObject per Internet Explorer o XMLHttpRequest per gli altri browser

Conoscendo questi parametri sarà quindi possibile richiedere dei dati in formato JSON da inserire in una tabella HTML (esempio):

$.ajax({
    url : 'dati.php',
    data : 'primariga=0&ultimariga=10', //le prime 10 righe    
    dataType : 'json', //restituisce un oggetto JSON
    complete: function (righe,stato) {
        for (i=0; i < righe.length; i++) {
        		var riga = righe[i];
				$("<tr/>")
        		.append("<td>"+riga.colonna1+"</td><td>"+riga.colonna2+"</td>")
        		.appendTo("#tabella");
		  }

    }
});

Ecco questo script in azione.