jQuery e ajax

jQuery e più in particolare la tecnologia AJAX fanno da padroni nell’era del web 2.0. La sensazione di avere dinamicità nelle pagine piace molto più rispetto all’obsoleto protocollo “botta e risposta” a cui siamo stati abituati in tutti questi anni. I metodi .post() e .ajax() di jQuery permettono di reperire informazioni dagli script lato server senza abbandonare la pagina, per questo, ha senso parlare di real-time data retrieving.

Qui di seguito portiamo l’esempio con una pagina di prova, che richiede l’elaborazione di una semplice somma algebrica ad uno script php e ne stampa a schermo il risultato restituito.

File somma.php:

<?php
 
$a = $_POST['A'];
$b = $_POST['B'];
 
echo intval($a+$b);
 
?>

Pagina esempio.html:

<html>
<head>
<title>jQuery and POST method for real time data retrieving</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
 
<script type="text/javascript" language="javascript">
 
send_data();
 
function send_data(){
 
// Utilizziamo il metodo .post() di jQuery per inviare una richiesta di tipo POST allo script PHP.
 
$.post("some.php", { A: $('#input1').val(), B: $('#input2').val() },
   function(data) {
     $('#output').html("Risultato processato dallo script PHP: " + data);
   });
 
   setTimeout("send_data()", 3000); //cicliamo la funzione ogni 3 secondi (passiamo ogni 3 secondi i valori dei campi che verranno processati dallo script php)
}
 
/*
 
// Eventualmente possiamo usare piuttosto che il metodo .post(), il metodo .ajax()
$.ajax({
  type: "POST",
  url: "some.php",
  data: {A: $('#input1').val(), B: $('#input2').val()}
}).done(function( data ) {
  $('#output').html("Risultato processato dallo script PHP: " + data);
});
 
*/
 
</script>
</head>
 
<body>
<center>
 
<input type="text" id="input1" /> + <input type="text" id="input2" />
<br/><br/>
<div id="output"></div>
 
</center>
</body>
 
 
</html>