Categories: PHP

Imparare ad Utilizzare Ajax con PHP

Senza Ajax oggi i siti sono meno efficienti, la possibilità di scambiare dati in maniera asincrona con il server rende le pagine web simili alle applicazioni desktop e si evita di ricaricare continuamente i dati. Nella rete ci sono molte risorse che trattano di Ajax dal punto di vista sia teorico che pratico, per questo vi invito a studiarvi l’argomento facendo delle ricerche sul web. In questo articolo voglio proporvi soltanto un semplicissimo esempio pratico che possa mostrare com’è semplice utilizzare questa tecnica già abbastanza vecchia.
L’esempio che andremo a vedere e studiare è il più semplice possibile, abbiamo un controllo di input con un valore preimpostato ed un pulsante che consente la modifica della stringa all’interno della casella in modo asincrono, ricorrendo ad una pagina PHP che invia il testo modificato.

<?php

   // Pagina Modifica.php

   $strVal = $_GET['frase'];
   $strVal .= "X";

   echo $strVal.' ';

?>

Come potete notare si tratta di una pagina in cui viene scritto il testo modificato da un valore inviato come parametro utilizzando il GET che risulta essere il metodo più semplice con Ajax. Ora creiamo la pagina HTML con i controlli:

<html>
<head>
<title>Prova Ajax</title>

</script>

</head>
<body>

<input type="text" id="frase" title="Inserire una stringa"
         value="ProvAJA" size="30">
<input type="button" id="btn" value="Completa"
         onClick="ModifyValue()">

</body>
</html>

Penso non si abbia bisogno di ulteriori spiegazioni, da notare solamente il metodo “ModifyValue” che viene invocato alla pressione del tasto, andiamo quindi a vedere come si compone questo metodo in Javascript.

function ModifyValue()
{
   var strVal = document.getElementById("frase").value;
   ModificaStringa(strVal);
}

Viene presa la stringa nel controllo ed inviato al metodo “ModificaStringa”, vediamo allora questa funzione:

var xmlHttp;

function ModificaStringa(strVal)
{
   if (strVal.length > 0)
   {
      var url = "modifica.php?frase=" + strVal;
      xmlHttp = CreateXmlHttpObject(stateChanged)
      if (xmlHttp == null)
 return;

      xmlHttp.open("GET", url , true)
      xmlHttp.send(null)
   }
   else
 document.getElementById("frase").value = "Errore!";
}

Come si nota, in questa funzione viene creata la URL da inviare alla pagina PHP e quindi si crea un oggetto XMLHttpRequest che è quello che si occupa del trasferimento delle informazioni tra client ( parte in JavaScript ) e server ( parte in PHP ) in modo asincrono. La funzione per creare l’oggetto e quella che monitora l’esito della richiesta ( stateChanged ) è questa:

function CreateXmlHttpObject(handler)
{
   var objXmlHttp = null

   if (navigator.userAgent.indexOf("MSIE") >= 0)
   { 
 var strName = "Msxml2.XMLHTTP"
 if (navigator.appVersion.indexOf("MSIE 5.5") >= 0)
    strName = "Microsoft.XMLHTTP";

 try
 {
    objXmlHttp = new ActiveXObject(strName);
    objXmlHttp.onreadystatechange = handler;
 }
 catch(e)
 {
    alert("Errore: Il suo browser non supporta
                questo programma!");
    objXmlHttp = null;
 }
   }
   else
   {
 try
 {
    objXmlHttp = new XMLHttpRequest();
    objXmlHttp.onload = handler;
    objXmlHttp.onerror = handler;
 }
 catch(e)
 {
    alert("Errore: Il suo browser non supporta
                questo programma!");
    objXmlHttp = null;
 }
   }

   return objXmlHttp;
}

L’unica parte complicata di questa funzione è la diversità della creazione dell’oggetto sui vari browser, si tratta sempre di una funzione che gira lato client con tutti i problemi del caso. Come si nota, all’oggetto viene assegnato un “handler” che è la funzione da scrivere al momento della ricezione dei dati:

function stateChanged() 
{ 
   if (xmlHttp.readyState==4 || xmlHttp.readyState =="complete")
      document.getElementById("frase").value =
             xmlHttp.responseText;
}

Ecco tutto, non penso che si possa scrivere un esempio più semplice di questo. Da questo semplicissimo ed elementare esempio è possibile aggiungere man mano delle nuove caratteristiche, l’importante è aver compreso il concetto del funzionamento base di Ajax.