Ricerca Live AJAX PHP

AJAX può fornire agli utenti un'esperienza di ricerca più amichevole e interattiva.

Ricerca Live AJAX

Nel seguente esempio AJAX, mostreremo una ricerca in tempo reale.

La ricerca in tempo reale ha molti vantaggi rispetto alla ricerca tradizionale:

  • I risultati corrispondenti vengono visualizzati mentre si digita
  • I risultati vengono filtrati man mano che si continua a digitare
  • Se i risultati sono troppo pochi, puoi eliminare i caratteri per ottenere un intervallo più ampio

Cerca nella casella di testo qui sotto le pagine di CodeW3C.com

Questo esempio include quattro elementi:

  • Modulo HTML semplice
  • JavaScript
  • Pagina PHP
  • Documento XML

In questo esempio, i risultati si trovano in un documento XML (links.xml) e ne vengono forniti solo 8 per rendere l'esempio piccolo e semplice.

Modulo HTML

Questa è la pagina HTML. Contiene un modulo HTML semplice, lo stile CSS per questo modulo e il link al JavaScript:

<html>
<head>
<script src="livesearch.js"></script> 
<style type="text/css"> 
#livesearch
  { 
  margin:0px;
  width:194px; 
  }
#txt1
  { 
  margin:0px;
  } 
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)"
<div id="livesearch"></div>
</form>
</body>
</html>

Esempio di spiegazione - Modulo HTML

Come puoi vedere, la pagina HTML contiene un modulo HTML semplice, con una casella di testo chiamata "txt1".

Come funziona il modulo:

  1. Quando l'utente preme e rilascia un tasto sulla casella di testo, viene innescato un evento
  2. Quando viene innescato un evento, viene eseguita la funzione chiamata showResult()
  3. Sotto il modulo c'è un elemento <div> chiamato "livesearch" che serve come segnaposto per i dati restituiti da showResult()

JavaScript

Il codice JavaScript è memorizzato nel file "livesearch.js" collegato al documento HTML:

var xmlHttp
function showResult(str)
{
if (str.length==0)
 { 
 document.getElementById("livesearch").
 innerHTML="";
 document.getElementById("livesearch").
 style.border="0px";
 return
 }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Il browser non supporta le richieste HTTP")
 return
 }
var url="livesearch.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("livesearch").
 innerHTML=xmlHttp.responseText;
 document.getElementById("livesearch").
 style.border="1px solid #A5ACB2";
 } 
}
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:

GetXmlHttpObject con Richiesta AJAX PHP è identica all'esempio.

La funzione showResult()

La funzione viene eseguita ogni volta che si inserisce un carattere nel campo di testo.

Se non ci sono input nel campo di testo (str.length == 0), la funzione imposta il campo di ritorno a vuoto e rimuove qualsiasi bordo circostante.

Tuttavia, se ci sono input nel campo di testo, la funzione esegue:

  1. Definire l'url (nome del file) da inviare al server
  2. Aggiungere il parametro (q) con il contenuto della casella di input alla url
  3. Aggiungere un numero casuale per prevenire che il server utilizzi file di cache
  4. Chiamare la funzione GetXmlHttpObject per creare l'oggetto XMLHTTP e informare questa funzione di eseguire una funzione chiamata stateChanged quando si verifica un cambiamento
  5. Aprire l'oggetto XMLHTTP utilizzando l'URL fornito
  6. Inviare una richiesta HTTP al server

Funzione stateChanged()

Questa funzione viene eseguita ogni volta che cambia lo stato dell'oggetto XMLHTTP.

Quando lo stato diventa 4 (o "complete") viene utilizzato il testo della risposta per riempire il contenuto del segnaposto txtHint e viene impostato un bordo intorno al campo di ritorno.

Pagina PHP

La pagina server chiamata con il codice JavaScript è il file PHP chiamato "livesearch.php".

"livesearch.php" verifica il documento XML "links.xml" che contiene i titoli e gli URL delle pagine presenti su codew3c.com.

Questi codici cercano i titoli corrispondenti alla stringa di ricerca all'interno del file XML e restituiscono i risultati in HTML:

<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
 {
 $y=$x->item($i)->getElementsByTagName('title');
 $z=$x->item($i)->getElementsByTagName('url');
 if ($y->item(0)->nodeType==1)
  {
  //find a link matching the search text
  if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
   {
   if ($hint=="")
    {
    $hint="<a href='" . 
    $z->item(0)->childNodes->item(0)->nodeValue . 
    "' target='_blank'>" . 
    $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
    }
   else
    {
    $hint=$hint . "<br /><a href='" . 
    $z->item(0)->childNodes->item(0)->nodeValue . 
    "' target='_blank'>" . 
    $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
    }
   }
  }
 }
}
//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;
?>

Esempio di spiegazione:

Se viene trasmesso qualsiasi testo dal JavaScript (strlen($q) > 0), accade:

  1. Creare un oggetto XML DOM per il file "links.xml" PHP
  2. Eseguire la scansione di tutti gli elementi "title" (nodetypes = 1) per trovare il nome che corrisponde ai dati trasmessi dal JavaScript
  3. Trovato il link contenente il title corretto e impostato sulla variabile "$response". Se vengono trovate più corrispondenze, tutte le corrispondenze verranno aggiunte alla variabile
  4. Se non vengono trovati corrispondenze, la variabile $response viene impostata su "no suggestion"
  5. $result è l'output inviato al segnaposto "livesearch"