Ajax in JQuery, meravigliosamente semplice!

Come buona parte di voi sa, ma magari non tutti, AJAX è una tecnica di sviluppo, che si è sviluppata tramite un utilizzo di tecnologie già esistenti al fine di ottenere un nuovo paradigma di programmazione ed un sistema di comunicazione client-server efficiente e adatto allo svilupo di interfacce grafiche responsive anche in ambiente web.

Dall’introduzione di questa tecnologia ad oggi, lo sviluppo tecnologico ha fatto si che siano disponibili dei framework che ne consentano un utilizzo sicuro, in modo rapido e semplice. Il più noto (e forse anche il milgiore) è certamente JQuery, che mette a disposizione dele primitive attraverso l’operatore $ semplici da utilizzare ed estremamente pulite ed ordinate.

Eccone un esempio:

$.ajax({
  type: 'GET',
  url: '<strong>http://ws.mysite.com/doSomeThing</strong>',
  data: { <strong>postVar1: 'theValue1', postVar2: 'theValue2'</strong> },
  beforeSend:function()
  {
    // clessidra di loading in attesa dell'output della funzione
    $('#ajax-panel').html('<div><img src="<strong>/images/loading.gif</strong>" alt="Attendere prego..." /></div>');
  },
  success:function(data)
  {
    // OK: inserisco i dati nel div di destinazione
    $('#ajax-panel').empty();
    $('#ajax-panel').append('<strong><p>' + data + '</p></strong>');    
  },
  error:function(){
    // KO: segnalo l'errore
    $('#ajax-panel').html('<p><strong>Oops!</strong> Try that again in a few moments.</p>');
  }
});

Questo piccolo esempio usa un metodo GET HTTP per scaricare una porzione di documento ed inserirla in pagina. Ovviamente, possono essere utilizzati tutti gli altri metodi HTTP (ad esempio per interagire con un servizio RESTful) e i dati restituiti possono essere anche in formato JSON o XML, per utilizzarli all’interno di altre funzioni presenti in pagina.
Per ulteriori dettagli, potete fare riferimento a questa pagina.

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...