Richiesta AJAX PHP

Richiesta AJAX

In questo esempio AJAX, mostreremo come la pagina web comunica con un server web online quando l'utente inserisce dati in un modulo web.

Inserisci il nome nel riquadro di testo seguente:

Suggerimenti:

Questo esempio include tre pagine:

  • Un modulo HTML semplice
  • Un pezzo di JavaScript
  • Una pagina PHP

Modulo HTML

Questo è un modulo HTML. Contiene un modulo HTML semplice e un collegamento al JavaScript:

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
Nome:
<input type="text" id="txt1"
onkeyup="showHint(this.value)"
</form>
<p>Suggerimenti: <span id="txtHint"></span></p>
</body>
</html>

Esempio di spiegazione - Modulo HTML

Come vedete, la pagina HTML superiore contiene un modulo HTML semplice con un campo di input chiamato "txt1".

Ecco come funziona questo modulo:

  1. Quando l'utente preme e rilascia una tastiera nel campo di input, viene attivato un evento
  2. Quando l'evento viene attivato, viene eseguita la funzione chiamata showHint()
  3. Sotto il modulo c'è un <span> chiamato "txtHint". Serve come segnaposto per i dati restituiti dalla funzione showHint().

JavaScript

Il codice JavaScript è memorizzato nel file "clienthint.js", che è collegato al documento HTML:

var xmlHttp
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert("Il browser non supporta la richiesta HTTP")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Esempio di spiegazione:

Funzione showHint()

Ogni volta che si inserisce un carattere nell'area di input, la funzione viene eseguita una volta.

Se c'è del contenuto nella casella di testo (str.length > 0), la funzione esegue così:

  1. Definisci l'URL (nome del file) da inviare al server
  2. Aggiungi il parametro (q) contenente il contenuto dell'area di input a questo URL
  3. Aggiungi un numero casuale per evitare che il server utilizzi il file di cache
  4. Chiamare la funzione GetXmlHttpObject per creare l'oggetto XMLHTTP e informare l'oggetto di eseguire la funzione chiamata stateChanged quando viene attivato l'evento
  5. Apri questa oggetto XMLHTTP utilizzando l'URL fornito
  6. Invia una richiesta HTTP al server

Se il campo di input è vuoto, la funzione svuota semplicemente il contenuto del segnaposto txtHint.

Funzione stateChanged()

Quando lo stato dell'oggetto XMLHTTP cambia, si esegue questa funzione.

Quando lo stato diventa 4 (o "complete"), riempi il segnaposto txtHint con il testo di risposta.

Funzione GetXmlHttpObject()

Le applicazioni AJAX possono essere eseguite solo nei browser web che supportano completamente XML.

Il codice chiama la funzione GetXmlHttpObject().

La funzione ha lo scopo di risolvere il problema di creare diversi oggetti XMLHTTP per diversi browser.

Questo è stato spiegato nella sezione precedente.

Pagina PHP

La pagina server chiamata "gethint.php" è una pagina server semplice chiamata con JavaScript.

"Il codice in gethint.php" verifica l'array dei nomi e restituisce i nomi corrispondenti al client:

<?php
//riempi l'array con i nomi
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//ottieni il parametro q dall'URL
$q=$_GET["q"];
//cerca tutti gli indizi dall'array se la lunghezza di q è maggiore di 0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}
//Set output to "no suggestion" if no hint were found
//Or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//Output the response
echo $response;
?>

Se esiste un testo trasmesso da JavaScript (strlen($q) > 0), allora:

  1. Trovare nomi che corrispondono ai caratteri trasmessi da JavaScript
  2. Se si trovano più nomi, includere tutti i nomi nella stringa di risposta
  3. Se non si trova alcun nome corrispondente, impostare la risposta a "no suggestion"
  4. Se si trova uno o più nomi, impostare la risposta a questi nomi
  5. Inviare la risposta a "txtHint" come segnaposto