Tutorial PHP

AJAX e PHP

Corso online PHP Corso online per imparare il PHP da zero ed creare siti Web dinamici. Assistenza del docente ed attestato di partecipazione finale.

AJAX è l'acronimo di Asynchronous Java Script and XML ed è un sistema di accesso a script lato server (in questo caso PHP) attraverso una chiamata HTTP esercitata da Javascript e l'oggetto XmlHttpRequest, conosciuto semplicemente anche come XMLHTTP.

La chiamata HTTP lavora in background in modo da rendere apparentemente uno script lato server accessibile come uno script lato client, con la stessa velocità e senza ricaricare la pagina.

La "magia" avviene grazie al fatto che un elemento HTML (ad esempio un form) attiva una funzione Javascript che, attraverso la creazione di un oggetto XmlHttpRequest, attiva uno script lato server che si connette al database, ad un file XML o fa quel che deve fare, esegue quel che deve eseguire e restituisce un output.

In questo momento non è importante cosa faccia lo script PHP ma è importante capire come gestire AJAX nell'ambito di un'applicazione Web.

Allo scopo faremo un semplice esempio, classico di qualsiasi articolo o manuale, online o cartaceo, che introduce a livello pratico alla programmazione con AJAX: creeremo un modulo HTML, composto da una sola casella di testo, nella quale, digitando delle lettere (nell'esempio useremo solo A, B, C e D), compariranno i dati presenti che iniziano per quella lettera; aggiungendo ulteriori lettere, andremo ulteriormente a scremare i dati in funzione della loro struttura lessicale.

Come base dati utilizzeremo un semplice array.

Iniziamo a costruire il file ajax.html corredandolo del seguente codice:

<script type="text/javascript" src="ajax.js"></script>

<form> 
Cerca un nome:<br>
<input type="text" onkeyup="XmlHttpRequest(this.value)">
</form>

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

Segue il codice Javascript:

var objXmlHttp;

function XmlHttpRequest(MyString)
{
 if (MyString.length > 0)
 {
  var url = "ajax.php?nome=" + MyString.toUpperCase();
  objXmlHttp = GetBrowser(StateChange);
  objXmlHttp.open("GET", url, true);
  objXmlHttp.send(null);
 }
 else
 {
  document.getElementById("OutPut").innerHTML = "";
 } 
}

function StateChange()
{
 if (objXmlHttp.readyState == 4)
 {
  var OP = document.getElementById("OutPut");
  OP.innerHTML = objXmlHttp.responseText;
 }
}

function GetBrowser(BrowserName)
{
 if (navigator.userAgent.indexOf("MSIE") != (-1))
 {
  var XmlClassName = "Msxml2.XMLHTTP";
  if (navigator.appVersion.indexOf("MSIE 5.5") != (-1));
  {
   XmlClassName = "Microsoft.XMLHTTP";
  } 
  try
  {
   OggettoobjXmlHttp = new ActiveXObject(XmlClassName);
   OggettoobjXmlHttp.onreadystatechange = BrowserName;
   return OggettoobjXmlHttp;
  }
  catch(e)
  {
   alert("Errore: l'ActiveX non verrà eseguito!");
  }
 }
 else if (navigator.userAgent.indexOf("Mozilla") != (-1))
 {
  OggettoobjXmlHttp = new XMLHttpRequest();
  OggettoobjXmlHttp.onload = BrowserName;
  OggettoobjXmlHttp.onerror = BrowserName;
  return OggettoobjXmlHttp;
 }
 else
 {
  alert("L'esempio non funziona con altri browser!");
 }
}

Il codice è molto articolato ed espleta varia funzioni: crea l'oggetto XMLHTTP ed effettua la chiamata al file PHP passando i parametri del caso e, in fine, effettua una serie di controlli prettamente legati alla compatibilità con i vari browser.

La riga importante è la seguente:

var url = "ajax.php?nome=" + MyString.toUpperCase();

essendo quella in cui viene costruito il richiamo al file PHP.

Creiamo adesso il codice del file ajax.php:

<?
$nomi[0] = "Alessandro";
$nomi[1] = "Alessio";
$nomi[2] = "Andrea";
$nomi[3] = "Anna";
$nomi[4] = "Armando";
$nomi[5] = "Biagio";
$nomi[6] = "Bruno";
$nomi[7] = "Brunella";
$nomi[8] = "Carlo";
$nomi[9] = "Claudio";
$nomi[10] = "Ciro";
$nomi[11] = "Davide";
$nomi[12] = "Dario";
$nomi[13] = "Diego";

$nome = $_GET["nome"];

if (strlen($nome) != 0)
{
 $stampa = "";
 for ($i = 0; $i < count($nomi); $i++)
 {

  // SCRIVERE QUESTA ISTRUZIONE SU UNA SOLA RIGA!!!
  if (strtoupper($nome) ==
  strtoupper(substr($nomi[$i], 0, strlen($nome))))

  {
   if ($stampa == "")
   {
 $stampa = $nomi[$i];
   }
   else
   {
 $stampa .= ", " . $nomi[$i];
   }
  }
 } 
} 

if ($stampa == "")
{
 echo "Nessun risultato!";
}
else
{
 echo $stampa;
}
?>

Il file PHP genera l'array coi nomi a disposizione, ovvero la base dati dell'applicazione, dopo di che effettua una serie di controlli sulle stringhe onde individuare le occorrenze richieste e le restituisce a video.

Scritto in data 18/04/2008

Segnalalo ad un Amico | Aggiungilo ai Preferiti

Appunti PHP per categoria