jQuery Ajax: utilizzare il framework jQuery per le richieste Ajax

jQuery consente di effettuare richieste Ajax in maniera molto semplice: vediamo con un esempio come sfruttare la potenza del framework jQuery per effettuare chiamate Ajax:

Scarichiamo la libreria jQuery

Andiamo nel sito ufficiale del porgetto e facciamo il download della versione Minified. A questo punto includiamola nel nostro script lato client

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>

Prepariamo lo script lato server (esempio in PHP)

<?php

  (int)$id = $_GET["id"];

  if ($id==1) echo "Rosso";

  if ($id==2) echo "Giallo";

  if ($id==3) echo "Verde";

  if ($id!=1 && $id!=2 && $id!=3) 

    echo "id non valido!";

?>

Salviamo il file con il nome test_ajax.php

jQuery Ajax

Nel nostro script lato client avremo:

<script type="text/javascript">

  $.ajax({

    type: "GET",

    url: "test_ajax.php",

    data: "id=1",

    success: function(response){

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

    }

  });

</script>

Il valore dell'id passato allo script PHP si trova in data. La risposta testuale fornita dal file PHP è contenuta nel parametro response e la visualizziamo nel div output tramite la riga:

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

Nel nostro esempio otteremo ovviamente come risposta "Rosso". Modificando il valore dell'id in data avremo le altre risposte.
Chiaramente sarebbe più utile passare il valore dell'id tramite un form o altro ma per far capire il funzionamento di base questo non era necessario. Quello che risulta evidente è la semplicità con cui si possono effettuare chiamate ajax attraverso jQuery e le potenzialità di questo framework.