Nello sviluppo di un applicativo web nasce il bisogno di poter realizzare un”elaborazione e mostrare i risultati nella pagina web senza dover necessariamente riaggiornare la pagina, il tutto in modo dinamico.

Per questo scopo, con l’avvento del javascript, nasce la tecnologia AJAX: una tecnica di sviluppo software per la realizzazione di pagine interattive. AJAX significa Asynchronous Javascript and XML, ovvero chiamata in formato XML asincrona. In poche parole riusciamo, tramite un”oggetto (XMLHttprequest) a trasmettere dei dati in GET o in POST a un URL e a prenderne il risultato per iniettarlo nel DOM o per altri scopi.

La cosa buona è che qualche anno fa per eseguire una richiesta XMLHttpRequest era abbastanza complicato e ci volevano righe e righe di codice, mentre ora grazie a JQuery possiamo gestire l’oggetto AJAX in modo funzionale e veloce. Vediamo insieme come farlo.

Innanzitutto per istanziare un oggetto ajax basta scrivere $.ajax. Per operare poi con esso all”interno sono implementate varie funzioni che tornano utili al nostro scopo. Facciamo un esempio:

var result;
$.ajax({
   type: ''GET'',//GET o POST a seconda della chiamata che vogliamo fare
   url: "http://www.sitoprova.it/ajax.php", //url dello script PHP sul nostro server
   data: {mex:"1"}, //dati che passiamo allo script
   success: function (risp) {\

      $(''#div'').innerHTML = risp;
   },
   error: function (error) {
      alert(error);//funzione di gestione dell''errore
   }
});

In questo caso si eseguirà una chiamata AJAX allo script ajax.php fatto, ad esempio, in questo modo:

<?php
   $mex=$_GET[''mex''];//$_GET o $_POST a seconda della chiamata AJAX che facciamo
   if($mex == 1){
      $mex = "CIAO";
   }
   echo $mex;
?>

Eseguita questa chiamata si eseguirà la funzione dichiarata nel success dell”oggetto ajax e verrà assegnato il valore in output dello script PHP (CIAO) a un div dichiarato nell”html in questo modo, ad esempio:

<div id="div"></div>

Il risultato è che avremo un div in HTML che conterrà la scritta CIAO. Nello script PHP possiamo fare qualsiasi computazione, anche prendere dei dati da un database e mostrarli sempre tramite chiamata AJAX con il formato JSON sostituendo l”echo nel PHP, in questo modo:

//in var ci saranno i dati presi da una query a un database
$var = array(''idutente' => "1", "nome"=>"Renzo");
echo json_encode($var);

Fatto questo il codice nella funzione del success diventerà:

$.ajax({
   type: ''GET'',
   url: "http://www.sitoprova.it/ajax.php",
   success: function (risp) {
      result = JSON.parse(risp);
      $(''#div'').innerHTML = ''Idutente: '' + result.idutente + ''Nome: '' + result.nome;
   },
   error: function (error) {
      alert(error);
   }
});

In questo modo stamperemo l’id utente e il nome in un div HTML.