Ricerca Live AJAX PHP
- Pagina precedente responseXML AJAX
- Pagina successiva Reader AJAX RSS
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:
- Quando l'utente preme e rilascia un tasto sulla casella di testo, viene innescato un evento
- Quando viene innescato un evento, viene eseguita la funzione chiamata showResult()
- 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:
- Definire l'url (nome del file) da inviare al server
- Aggiungere il parametro (q) con il contenuto della casella di input alla url
- Aggiungere un numero casuale per prevenire che il server utilizzi file di cache
- Chiamare la funzione GetXmlHttpObject per creare l'oggetto XMLHTTP e informare questa funzione di eseguire una funzione chiamata stateChanged quando si verifica un cambiamento
- Aprire l'oggetto XMLHTTP utilizzando l'URL fornito
- 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:
- Creare un oggetto XML DOM per il file "links.xml" PHP
- Eseguire la scansione di tutti gli elementi "title" (nodetypes = 1) per trovare il nome che corrisponde ai dati trasmessi dal JavaScript
- Trovato il link contenente il title corretto e impostato sulla variabile "$response". Se vengono trovate più corrispondenze, tutte le corrispondenze verranno aggiunte alla variabile
- Se non vengono trovati corrispondenze, la variabile $response viene impostata su "no suggestion"
- $result è l'output inviato al segnaposto "livesearch"
- Pagina precedente responseXML AJAX
- Pagina successiva Reader AJAX RSS