AJAX peut être utilisé pour créer des recherches plus conviviales et interactives.
AJAX Live Search
L'exemple suivant démontrera une recherche en direct, où vous obtenez des résultats de recherche pendant que vous tapez.
Live Search a de nombreux avantages par rapport à la recherche traditionnelle:
- Les résultats sont présentés que vous tapez
- Réduire les résultats que vous continuez à taper
- Si les résultats deviennent trop étroites, supprimer des caractères pour voir un résultat plus large
Rechercher une page w3ii dans le champ de saisie ci-dessous:
Les résultats dans l'exemple ci - dessus se trouvent dans un fichier XML ( links.xml ) . Pour cet exemple, petite et simple, seulement six résultats sont disponibles.
Exemple Explained - La page HTML
Quand un utilisateur saisit un caractère dans le champ de saisie ci - dessus, la fonction " showResult() " est exécutée. La fonction est déclenchée par le "onkeyup" l' événement:
<html>
<head>
<script>
function showResult(str)
{
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
explication du code source:
Si le champ de saisie est vide (str.length==0) , la fonction efface le contenu de l'espace réservé Livesearch et quitte la fonction.
Si le champ d'entrée est vide, la showResult() fonction exécute ce qui suit:
- Créer un objet XMLHttpRequest
- Créer la fonction à exécuter lorsque la réponse du serveur est prêt
- Envoyez la demande hors d'un fichier sur le serveur
- Notez qu'un paramètre (q) est ajoutée à l'URL (avec le contenu du champ d'entrée)
Le fichier PHP
La page sur le serveur appelé par le JavaScript ci - dessus est un fichier PHP appelé "livesearch.php" .
Le code source dans "livesearch.php" recherche un fichier XML pour les titres correspondant à la chaîne de recherche et renvoie le résultat:
<?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 was found
// or to the correct values
if ($hint=="") {
$response="no suggestion";
}
else {
$response=$hint;
}
//output the response
echo $response;
?>
En cas de texte envoyé par le JavaScript ( strlen($q) > 0), ce qui suit se produit:
- Charger un fichier XML dans un nouvel objet DOM XML
- Boucle à travers tous les éléments <title> pour trouver des correspondances du texte envoyé par le JavaScript
- Définit l'URL correcte et le titre dans la "$response" variable. Si plus d'une correspondance est trouvée, tous les matches sont ajoutés à la variable
- Si aucune correspondance ne trouve, la variable de réponse $ est réglé sur "no suggestion"