Voici les bases d’un petit moteur de recherche qui constitue un bon exercice pour s’initier à XmlHttpRequest.
Démonstration …
But de la recherche
Dans cet exemple, vous allez pouvoir rechercher les billets de ce blog par leur titre. En fonction des caractères saisis, une liste de billets commençant par les mêmes lettres sera affiché de manière dynamique, sans que la page soit rechargée. La soumission du formulaire se fait avec l’objet XmlHttpRequest et est effectuée à chaque fois que le contenu du champ de saisie est modifié.
Coté client
Il faut evidemment la fonction qui va bien et qui a été mise à disposition par Qwix dans son tutorial sur XmlHttpRequest. A cette dernière il faudra également ajouter une fonction supplémentaire qui sera appelée lorsque l’utilisateur aura saisit une chaine dans l’invite de recherche.
<script type="text/javascript" src="function.js">
</script> |
<script type="text/javascript">
function loadData() {
if (document.getElementById('foo').value.length > 0) {
sendData('foo='+ document.getElementById('foo').value, 'traitement.php', 'POST');
}
else {
document.getElementById('contenu').innerHTML = '';
}
}
</script> |
Le formulaire va ressembler à ceci:
<form id="formulaire" action="index.php" method="post"><input type="hidden" name="phpMyAdmin" value="f8aa7401db868c47ec1c5040c0d7b43d" />
<fieldset><input type="hidden" name="phpMyAdmin" value="f8aa7401db868c47ec1c5040c0d7b43d" />
<p>
<label for="foo">Saisissez les chaines à rechercher</label>
<input type="text" name="foo" id="foo" value="" onkeyup="loadData();" />
</p>
<!-- Zone pour l'affichage des résultats -->
<div id="contenu"></div>
</fieldset>
</form> |
Coté serveur
Un simple script PHP se contentant de faire une requête SQL et de d’afficher sous forme de liste les résultats retournés
header('Content-type: text/html') ;
if(!empty($_POST["foo"]))
{
$rqListBillet = "
SELECT *
FROM `blog_blabla`
WHERE `titre` like '" . $_POST["foo"] . "%'
ORDER BY `date_parution` DESC";
$rsListBillet = mysql_query($rqListBillet);
if (mysql_num_rows($rsListBillet) > 0) {
echo "\n
ul>";
while ($billet = mysql_fetch_object($rsListBillet)) {
echo "\n
<li><a href="\?phpMyAdmin=f8aa7401db868c47ec1c5040c0d7b43d">url_page . ".html\" title=\"" . stripslashes(htmlentities($billet->titre)) . "\">" . stripslashes(htmlentities($billet->titre)) . "</a> (" . billet->date_parution . ")</li>";
}
echo "\n</ul>";
}
else {
echo "";
}
} |
Ne pas oublier
