Blupixel IT Blog – Articoli e Tutorial Informatica e Programmazione

Blog ufficiale di Blupixel IT Srl

AJAX con jQuery

AJAX è l’acronimo di Asynchronous JavaScript and XML, ovvero esecuzione di javascript e XML per l’esecuzione asincrona di alcune operazioni.

Il funzionamento di AJAX è semplice:
- un javascript spedisce dei dati ad una pagina, interrogandola direttamente
- la pagina riceve i dati e crea la sua normale struttura in XML o HTML
- il javascript legge le parti della pagina che gli interessano ed alabora un risultato in base al loro contenuto

Costruire delle operazioni in AJAX diventa molto semplice usando jQuery.

Sarà sufficiente inserire nel file .js solitamente incluso una funzione circa come questa:

jQuery.getSomeValue=function(var1, var2, …){
    $.ajax({

    // metodo di invio dati
    type: “POST”,

    // pagina da interrogare e a cui spedire i dati
    url: “/ajax”,

    // Tipo di pagina restituita (html o xml)
    dataType: “html”,

    // Dati da spedire
    data: “action=getValue&param=”+var1,

    // cosa eseguire in caso di successo
    success: function(xml) {
        var app=$(xml).find(‘#res’);
        if (app){
            alert($(app).html());
        }
        }
    });
    return false;
}

Il codice crea in pratica una funzione chiamata in questo caso getSomeValue che accetta 1 o più variabili.
Il metodo di invio dati può essere POST o GET. Lo script spedisce i dati segnati in “data:” (nel nostro caso una variabile con nome “action” e valore “getValue” e una di nome “param” con valore “var1″), che sono separati dal simbolo &, alla pagina segnata nel parametro “url:”. In questo caso supponiamo che sullo stesso sito sia presente una pagina con indirizzo /ajax che possa ricevere i dati e restituire il risultato.

Una volta spediti i dati all’url, nè verrà costruita una pagina (in questo caso per comodità in html) da cui potremmo estrarre dei dati.
In questo caso, ad esempio, cerchiamo l’elemento nella pagina ritornata che ha id=”res”, e se viene trovato facciamo un alert dell’html che contiene.

Nella funzione success potrete estendere il funzionamento a seconda delle esigenze appendendo l’html ritornato all’interno della pagina o eseguendo operazioni complesse sulla base del risultato.

A presto

Your email address will not be published. Required fields are marked *

*

VfgSj

Please type the text above: