PHP ja AJAX Live Search

AJAX tarjoaa käyttäjille ystävällisemmän ja interaktiivisemman hakukokemuksen.

AJAX Live Search

Tässä AJAX-esimerkissä näytämme reaaliaikaisen haun toiminnan.

Reaaliaikainen hakutoiminto on perinteiseen hakutoimintaan verrattuna monella tapaa etuinen:

  • Tuloksia näytetään, kun syötetään tietoja
  • Tuloksia suodattaa, kun jatketaan syöttämistä
  • Jos tuloksia on liian vähän, poista merkkejä saadaksesi laajemman hakualueen

Hae CodeW3C.com-sivuja seuraavasta tekstikentästä

Tämä esimerkki sisältää neljä elementtiä:

  • Yksinkertainen HTML-lomake
  • JavaScript
  • PHP-sivu
  • XML-dokumentti

Tässä esimerkissä tulokset ovat XML-dokumentissa (links.xml) sisällä. Jotta tämä esimerkki olisi pieni ja yksinkertainen, tarjoamme vain 8 tulosta.

HTML-lomake

Tämä on HTML-sivu. Se sisältää yksinkertaisen HTML-lomakkeen, siihen liittyvät CSS-tyylit sekä JavaScriptiin osoittavan linkin:

<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>

Esimerkki selitys - HTML-lomake

Kuten näet, HTML-sivu sisältää yksinkertaisen HTML-lomakkeen, jossa tekstikentän nimi on "txt1".

Lomake toimii seuraavasti:

  1. Kun käyttäjä painaa ja vapauttaa näppäintä tekstikentässä, käynnistyy tapahtuma
  2. Kun tapahtuma käynnistyy, suoritetaan nimeltään showResult()-funktiota
  3. Lomakkeen alla on nimeltään "livesearch"-div-elementti. Se toimii showResult()-funktiolla palautetun datan paikkavarana

JavaScript

JavaScript-koodi tallennetaan HTML-dokumenttiin liitettyyn "livesearch.js"-tiedostoon:

var xmlHttp
function showResult(str)
{
if (str.length==0)
 { 
 document.getElementById("livesearch").
 innerHTML="";
 document.getElementById("livesearch").
 style.border="0px";
 palauta;
 }
xmlHttp=GetXmlHttpObject()
if (xmlHttp == null)
 {
 alert("Selain ei tue HTTP-pyynnön suorittamista");
 palauta;
 }
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");
  }
 }
palauta xmlHttp;
}

Esimerkki selityksestä:

GetXmlHttpObject ja PHP ja AJAX pyynnöt esimerkki on sama.

showResult() -funktio

Funktio suoritetaan aina, kun tekstikenttään syötetään merkki.

Jos tekstikentässä ei ole syötettä (str.length == 0), funktio asettaa palautuskentän tyhjäksi ja poistaa ympärillä olevat minkä tahansa reunaviivat.

Kuitenkin, jos tekstikentässä on syötettä, funktio suorittaa:

  1. Määritellään lähetettävä palvelimelle osoite (tiedostonimi)
  2. Lisätään parametri (q), joka sisältää syötteen, osoitteeseen (url)
  3. Lisätään satunnainen luku estääksesi palvelimen käytön välimuistitiedostoa
  4. Kutsutaan GetXmlHttpObject-funktiota luodaksesi XMLHTTP-objektin ja ilmoitetaan tälle funktiolle, että se suorittaa nimeltä stateChanged funktio, kun tapahtuu muutos
  5. Avaa XMLHTTP-objekti annetulla url:llä
  6. Lähetä HTTP-pyyntö palvelimelle

stateChanged() -funktio

Tämä funktio suoritetaan aina, kun XMLHTTP-objektin tila muuttuu.

Kun tila muuttuu 4:ksi (tai "complete") asetukselle, vastausviestiä käytetään täyttämään txtHint-tyhjennys symbolin sisältö ja asetetaan reunaviiva palautus kenttään ympärille.

PHP-sivu

Palvelin sivu, jota JavaScript-koodi kutsuu, on nimeltään "livesearch.php" PHP-tiedosto.

"livesearch.php" -tiedostossa oleva koodi tarkistaa XML-tiedoston "links.xml". Tämä tiedosto sisältää codew3c.com-sivuston joitakin sivujen otsikoita ja URL-osoitteita.

Nämä koodit etsivät XML-tiedostosta otsikoita, jotka vastaavat hakusanaa, ja palauttavat tulokset HTML-muodossa:

<?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>";
    }
   }
  }
 }
}
// Aseta ulostulo "ei ehdotusta", jos vihjettä ei löydy
// tai oikeisiin arvoihin
if ($hint == "")
 {
 $response="ei ehdotusta";
 }
else
 {
 $response=$hint;
 }
// Tulosta vastaus
echo $response;
?>

Esimerkki selityksestä:

Jos JavaScriptistä on lähetetty mitään tekstiä (strlen($q) > 0), tapahtuu seuraava:

  1. PHP luo "links.xml"-tiedoston XML DOM-objekti
  2. Vieritetään kaikki "title"-elementit (nodetypes = 1), jotta löydetään vastaava JavaScriptin lähettämä data
  3. Löydetään linkki, joka sisältää oikean otsikon, ja se asetetaan "$response"-muuttujaan. Jos löydetään useita vastaavia, kaikki vastaavat lisätään muuttujaan
  4. Jos vastausta ei löydy, $response-muuttujaa asetetaan "ei ehdotusta"
  5. $result on lähetetty "livesearch"-korvikkeelle olevaan ulostuloon