AJAX est une technologie qui permet d’apporter une plus grande richesse dans l’interface et l’ergonomie d’un site.
Si il est bon de ne pas en abuser au risque de dénaturer le document web, on peut se laisser aller à la tentation d’apporter quelques fonctionnalités intéressantes.
Celle que je vous propose ici consiste à intégrer un moteur de recherche à la manière d’un Google Suggest. Sauf qu’ici vous pourrez avoir un code lisible ^^
Je ne vais pas aborder le concept d’AJAX car certains en parlent déjà très bien. Je vous recommande d’ailleur de lire cet article (Anglophobe, s’abstenir).

PS: Ce billet remplace celui qui s’appelle désormais Introduction à XMLHttpRequest et PHP

Principe

Il faut réunir trois principes pour concevoir cet élément d’application. Tout d’abord nous avons besoin de Javascript et de XMLHttpRequest afin de pouvoir communiquer en arrière plan avec le serveur. Nous allons utiliser la classe XHRConnection pour nous faciliter la vie. Ensuite, il est nécessaire d’avoir un service web se chargera de construire le document XML que nous parserons avec l’API DOM. Enfin afin que l’effet visuel soit efficace nous devrons utiliser les CSS.

Le moteur comprendra une zone de résultat (balise ul) qui ne contiendra pas d’élément de liste. C’est cette liste que nous construirons selon le fichier XML généré et renvoyé par le serveur. Selon que la recherche soit prolifique ou non, la zone de résultat sera cachée ou montrée.

Payes ton code

Vous allez voir, c’est en fait très simple à mettre en place. Voici tout d’abord le formulaire :

<form id="formulaire" action="index.php" method="post">
	<fieldset>
	<p>
		<label for="foo">Saisissez les chaines à rechercher dans le champ de formulaire ci-desous :</label>
		<input type="text" name="foo" id="foo" value="" onkeyup="loadData();" />
	</p>
	<ul id="zoneResultats" style="visibility: hidden;"></ul>
	<p>
		Texte à placer pour tester que les réponses s'affichent par dessus... Lorem ipsum ...
	</p>
	</fieldset>
</form>

Voici le code javascript dont vous aurez besoin :

<script type="text/javascript">
// Déclaration de la fonction de Callback
// + ----------------------------------------------------------------------------------
// + afficherResultats
// + Affiche ou non le conteneur en fonction du résultat de la recherche
// + ----------------------------------------------------------------------------------
function afficherResultats(obj) {
	// Construction des noeuds
	var tabResult = obj.responseXML.getElementsByTagName('resultat');
	document.getElementById('zoneResultats').innerHTML = '';
	if (tabResult.length > 0) {
		// On définit la hauteur de la liste en fonction du nombre de rsultats et de la hauteur de ligne
		var hauteur = tabResult.length * 22; 
		with(document.getElementById('zoneResultats').style) {
			visibility = 'visible';
			height = hauteur + 'px';
		};
		for (var i = 0; i < tabResult.length; i++) {
			resultat = tabResult.item(i); 
			var egt = document.createElement('li');
			var lnk = document.createElement('a');
			var texte = document.createTextNode(resultat.getAttribute('titre'));
			lnk.appendChild(texte);
			lnk.setAttribute('href', resultat.getAttribute('url'));
			lnk.setAttribute('title', resultat.getAttribute('titre'));
			egt.appendChild(lnk);
			document.getElementById('zoneResultats').appendChild(egt);
		}
	}
	else {
		document.getElementById('zoneResultats').style.visibility = 'hidden';
	}
}
// Déclaration de la fonction qui lance la recherche
function loadData() {
	// Création de l'objet
	var XHR = new XHRConnection();
	XHR.appendData("foo", document.getElementById('foo').value);
	// On soumet la requête
	// Signification des paramètres:			
	// 	+ On indique à l'objet qu'il faut appeler le fichier search.php
	// 	+ On utilise la méthode POST, adaptée l'envoi d'information
	// 	+ On indique quelle fonction appeler lorsque l'opération a été effectuée
	XHR.sendAndLoad("search.php", "POST", afficherResultats);
}
	</script>

Coté serveur, nous avons ce petit script PHP :

[php]
header("Pragma: no-cache");
header("Expires: 0");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Content-type: application/xml");

if(!empty($_REQUEST["foo"])) {
$rqListBillet = "
SELECT *
FROM `blog_blabla`
WHERE `titre` like '" . $_REQUEST["foo"] . "%'
ORDER BY `date_parution` DESC";
$rsListBillet = mysql_query($rqListBillet);
$xml = "";
if (mysql_num_rows($rsListBillet) > 0) {
while ($billet = mysql_fetch_object($rsListBillet)) {
$xml .= "\ntitre) . "\" url=\"/blog/" . $billet->url_page . ".html\" />";
}

}
}
else {
$xml = "";
}
$xml .= "\n";
echo utf8_encode($xml);
[/php]

Pour la mise en page, veuillez vous référer au fichier suivant: styles.css.

N'oubliez pas de tester le formulaire, ça se passe ici