Mattepuffo.com

Se avete letto questo articolo su AJAX avete visto come sia possibile creare codice cross-borwser e in parte riutilizzabile per effettuare chiamate AJAX attraverso Javascript e PHP.

Se vedete però il codice scritto non è proprio poco per delle semplici chiamate.

Se già utilizzate jQuery per altre cose vale di sicuro la pena usare le funzioni AJAX integrate.

Questo soprattutto perchè possiamo scrivere codice cross-browser con molte meno righe.

E non è poco....

Una descrizione delle API AJAX di jQuery le trovate qua.

Le opzioni più utili e importanti sono:

• type -> indica il tipo di richiesta (GET o POST)
• dataType -> il tipo di risposta che ci aspettiamo (HTML, XML, JSON.....)
• url -> del file lato server da interrogare
• data -> eventuali valori da passare in querystring
• success -> cosa fare in caso di richiesta eseguita con successo

Io ho messo su una funzione che poi richiamo tramite link:

<a href="javascript:creaStorico('2012-02-20 14:22:17')">2012-02-20 14:22:17</a>

Richiamo la funzione creaStorico passandogli una data.

Quindi, dop aver incluso jQuery nella pagina, possiamo usare uno script del genere:

function creaStorico(data) {
    $.ajax({
        type: "GET",
        dataType: "html",
        url: "lib/crea_storico.php",
        data: "data_ordine=" + data,
        success: function(response) {
            $("div#storico").html(response);
        }
    });
}

Come vedete all'url passo anche un valore in GET; il valore lo passo alla funzione tramite il link.

La riga

$("#storico").html(response);

indica la risposta deve essere iniettata dentro a un div che ha quell'ID.

Dentro la pagina lib/crea_storico.php ho delle funzioni che eseguono delle query prendendo il parametro passato in GET come clausola.

Queste funzioni creano la pagina con i dati che mi servono, e questi dati vengono iniettati dentro al div.

Notate con quante poche righe abbiamo ottenuto lo stesso risultato del link postato a inizio pagina.