Introduction à XMLHttpRequest et PHP

Publié par Thanh le Mardi 25 jan 2005 à 02h01

Rangé dans PHP, marqué AJAX, PHP, Tutoriels, XML, XMLHttpRequest
Ce billet a été lu 1,662 fois et compte 31 commentaires

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.

^?View Code JAVASCRIPT

	<script type="text/javascript" src="function.js">
	</script>

^?View Code JAVASCRIPT

<script type="text/javascript">
		function loadData() {
			if (document.getElementById('foo').value.length &gt; 0) {
				sendData('foo='+ document.getElementById('foo').value, 'traitement.php', 'POST');
			}
			else {
				document.getElementById('contenu').innerHTML = '';
			}
		}
	</script>

Le formulaire va ressembler à ceci:

^?View Code HTML

		<form id="formulaire" action="index.php" method="post">
			<fieldset>
				<p>
					<label for="foo"&gt;Saisissez les chaines à rechercher&lt;/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

^?View Code PHP

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) &gt; 0) {
		echo "\n
ul>";
		while ($billet = mysql_fetch_object($rsListBillet)) {
			echo "\n
<li><a href="\">url_page . ".html\" title=\"" . stripslashes(htmlentities($billet-&gt;titre)) . "\"&gt;" . stripslashes(htmlentities($billet-&gt;titre)) . "</a> (" . billet-&gt;date_parution . ")</li>";
		}
		echo "\n</ul>";
	}
	else {
		echo "";
	}
}

Ne pas oublier

N’oubliez pas de tester le formulaire

31 commentaires à “ Introduction à XMLHttpRequest et PHP ”

#1 - Le Mardi 25 janvier 2005 à 7 h 45 min, Antoine dit :

Waw, ca tue
#2 - Le Mardi 25 janvier 2005 à 8 h 17 min, qwix dit :

Ha oui pas mal du tout ça
#3 - Le Mardi 25 janvier 2005 à 9 h 36 min, Sebou San dit :

c’est vraiment bien !
la RATP utilise ça pour les itineraires, non ?
#4 - Le Mardi 25 janvier 2005 à 9 h 43 min, solo dit :

sebou> je sais pas je suis Lyonnais :p
#5 - Le Mardi 25 janvier 2005 à 9 h 53 min, Xuxu dit :

en tous cas ca ouvre pas mal de porte.

Tellement que pour l’instant j’en vois pas ::mrgreen
#6 - Le Mardi 25 janvier 2005 à 13 h 38 min, snoop dit :

C’est épatant !
Mais tu le trouves où le temps ? Entre midi et deux ?
#7 - Le Mardi 25 janvier 2005 à 14 h 29 min, solo dit :

xuxu> On dit c’est la porte ouverte à toutes les fenêtres ^^

snoop> Tard dans la nuit, mais c’est réellement passionnant ^^

J’ai pas mal d’idées d’applications possible, je continuerai de faire quelques tutos
#8 - Le Mardi 25 janvier 2005 à 18 h 00 min, Yeca dit :

Excellent, ça tue bien.
#9 - Le Mercredi 26 janvier 2005 à 11 h 05 min, Talou dit :

Les contributions :
http://artis-tic.com/blog/?2004/07/08/94-le-truc-du-livesearch
http://artis-tic.com/blog/?2004/09/30/118-livewiki-une-experimentation-amusante-du-wiki-avec-xmlhttprequest
Je te renvoie la balle ;o)
#10 - Le Mercredi 26 janvier 2005 à 11 h 06 min, solo dit :

Thanks Talou
#11 - Le Vendredi 28 janvier 2005 à 16 h 10 min, [ NikO ] dit :

ca pourrait être sympa de se servir de cela pour faire un plug-ins à la recherche dans les blogs sous dotclear, celle ci étant un peu pauvre je trouve ..
#12 - Le Samedi 12 mars 2005 à 22 h 20 min, Thomas dit :

Niquel mais le souci c’est que dès que l’on tape un caractère spécial (é ou è par exemple) cela ne marche plus.

Dans l’exemple de http://www.sutekidane.net/labo/php/moteur-de-recherche/

Quand on tape “Cr” on a une réponse “Créer..”, cependant si on tape “Cré”, plus aucune réponse. J’ai essayé de résoudre le pb, mais je n’y suis pas arrivé, si qq’un voit ce qui ne va pas…
#13 - Le Mardi 5 avril 2005 à 16 h 50 min, Dj ThuG dit :

Hello!
En faisant un petit test de mon côté, et pour répondre à Thomas, le problème vient du fait que les données sont envoyées en UTF-8 ainsi si l’on tape “té” le script php reçoit lui “tÃ©”…
Reste plus qu’à trouver si l’on peut modifier l’encodage utilisé pour l’envoi via une méthode de XmlHttpRequest..
Sinon lors du traitement il suffit d’utiliser utf8_decode() sur chaque donnée réceptionnée.. On pourrait même faire une boucle sur $_GET et $_POST et y appliquer utf8_decode pour les éléments qui ne sont pas des array !

^^
#14 - Le Mardi 5 avril 2005 à 17 h 39 min, Dj ThuG dit :

Pour revenir sur le problème précédent;
en utilisant la fonction js escape() sur les données à envoyer, il n’est plus nécessaire d’utiliser utf8_decode() sur le script de traitement !

sendData( ‘keyword=’+ [b]escape( [/b]document.getElementById(’keyword’).value[b] )[/b], ‘traitement.php’, ‘POST’ );[/b]
#15 - Le Mardi 5 avril 2005 à 17 h 50 min, solo dit :

Merci à toi pour l’info
#16 - Le Mardi 26 avril 2005 à 10 h 44 min, Mathey Thomas dit :

Tiens chez moi (opera 7.54) rien ne se passe…
#17 - Le Vendredi 1 juillet 2005 à 0 h 06 min, Pouille dit :

c’est genial comme truc
mais faites gaffe ça passe pas partout
il faut necessairement une solution de repli, car les vieilles versoin d’opera, konqueror et safari notament ne supportent pas l’objet xmlthttprequest (il ne faut pas oulier non plus que certains desactivent le javascript)
son utilisation apporte un reel plus, mais l’alternative classique doit etre presente …
sinon Have Fun !!
#18 - Le Vendredi 1 juillet 2005 à 0 h 46 min, solo dit :

@Pouille

Tout à fait
#19 - Le Samedi 23 juillet 2005 à 17 h 47 min, julien dit :

Salut , le live search est eppatant !!

mais , j ai essayer de l implementer a partir d une base de donne mysql ,
comme ca les resultat apparaissent a l ecran en fonction de ce qui est tape,

Je n est aucune idee comment commencer ,

Si vous pouviez me donner un cuop de main ,
ca serait super , merci

Julien

julienmassillia@gmail.com
#20 - Le Samedi 23 juillet 2005 à 22 h 42 min, solo dit :

Bonjour, je te propose de nous montrer ce que tu as déjà fait sur le forum d’intégration Media-Box: http://dream.media-box.net

On sera ravi de t’aider
#21 - Le Jeudi 4 août 2005 à 17 h 06 min, Tonio dit :

Jôôôli
Et tout facile, en plus, mis en place en 2 mins….
Mârci bien
#22 - Le Mercredi 24 août 2005 à 4 h 24 min, Nico dit :

Merci je viens de passer 2 heures a trouver cette solution
#23 - Le Vendredi 28 octobre 2005 à 11 h 36 min, Oximoron dit :

Salut,

Enfin un exemple comme je le cherchais. Merci à toi.

J’aimerais savoir s’il n’est pas possible de mettre les objets de chaque ligne de résultat dans un array (d’objets), le renvoyer à la page web et seulement dans celle-ci récupérer toutes les données.
exemple:

Coté php:
$ret = array();
while($iteml=mysql_fetch_object($alll)) {
$ret .= $iteml;
}
echo $ret;

Côé Js:
function maj_data() {
if (texte = file(”../classes/class_filtres_ajax.php” )) {
Que faire avec la variable ‘texte’ pour récupérer toutes les données de chaque objet?
}

function file(fichier) {
if(window.XMLHttpRequest)
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject)
xhr_object = new ActiveXObject(”Microsoft.XMLHTTP” );
else
return(false);
xhr_object.open(”GET”, fichier, false);
xhr_object.send(null);

if(xhr_object.readyState == 4) return(xhr_object.responseText);
else return(false);
}

Oximoron
#24 - Le Vendredi 28 octobre 2005 à 11 h 51 min, Thanh dit :

salut Oximoron,

je te conseillerai de créer un fichier XML via PHP et grâce aux méthodes DOM tu pourras facilement traiter les données reçues.

Tu peux t’orienter vers cette classe: http://xhrconnection.sutekidane.net/exemples/charger-un-fichier-xml/

Pour les méthodes DOM, je te renvois à cet exemple:
http://www.sutekidane.net/blog/creer-un-moteur-de-recherche-avec-xmlhttprequest-et-php.html

la fonction afficherResultats() te montre comment parcourir un objet DOM.

Bon courage et au besoin tu peux poster ton code ici:
http://dreamweaver.media-box.net

Les modérateurs se feront un plaisir de t’aider
#25 - Le Vendredi 28 octobre 2005 à 12 h 22 min, Oximoron dit :

Salut Thanh,

Un grand merci pour ton aide.

Je vais aller étudier tout cela.

A+

Oximoron
#26 - Le Dimanche 8 janvier 2006 à 13 h 53 min, BenXbox dit :

Salut,
Voila j’utilise le XHRConnection V1.3 et j’ai un probléme avec les caractéres spéciaux, voici ce qu’il me fait :
http://www.tchatteurs.net/enligne.php

Merci d’avance.
#27 - Le Lundi 9 janvier 2006 à 11 h 02 min, Thanh dit :

Bonjour,

je me permets de te rediriger vers le forum Media-Box. Postes là bas ton code et je regarderais.

http://dreamweaver.media-box.net
#28 - Le Vendredi 13 janvier 2006 à 9 h 57 min, Abdel dit :

Bonjour

Avant tout je voudrais vous féliciter pour l’ensemble de votre Blog et des éléments qui s’y trouvent. Votre site est très bien fait que ce soit sur le plan ergonomique, graphique et fonctionnel. Donc Bravo pour ce travail remarquable.

En suite je vous félicite pour ce script très pratique, qui a mon avis est bon exemple pour prendre en main la technologie AJAX, en tout cas, sa m’a ouvert des portes.

Je voudrais juste vous posez une question :
Dans votre script (pas l’actuel mais celui d’avant) dans la fonction function.js vous utilisez le code suivant

——————————————————————————
if (document.getElementById(’foo’).value.length > 0) {
sendData(’foo=’+ document.getElementById(’foo’).value, ’search.php’, ‘POST’);
}
else {
document.getElementById(’contenu’).innerHTML = ”;
}
}
————————————-
Comment faire si je voulais passer deux paramètres via la fonction sendData() ??

J’ai essayé la chose suivante :
—————————————
if (document.getElementById(’foo’).value.length > 0) {
sendData(’foo=’+ document.getElementById(’foo’).value+’&param2=’+ document.getElementById(’param2′).value, ’search.php’, ‘POST’);
}
else {
document.getElementById(’contenu’).innerHTML = ”;
}
}———————
Bien sur j’ai mis dans le formulaire de recherche un champ caché qui a comme nom et id « param2 »

Mais ça ne marche pas. Si toute fois vous pouvez m’aidez à résoudre ce petit problème !!
(Encore une fois cette fraction de code est issue de votre premier script et pas de celui qui est sur le site actuellement)
Cordialement
#29 - Le Vendredi 13 janvier 2006 à 10 h 19 min, Thanh dit :

Bonjour Abdel,

pour passer plusieurs variables en paramètres il suffit d’utiliser autant que nécessaire la fonction

appendData(nom_du_parametre, valeur_du_parametre);

donc il suffit de récupérer lors de la requête le contenu du champ caché :

appendData(’param2′, document.getElementById(’param2′).value);

au besoin, venez poster votre code sur le forum d’entraide http://dreamweaver.media-box.net
#30 - Le Lundi 16 janvier 2006 à 23 h 49 min, Abdel dit :

ça marche !
Merci beaucoup pour votre aide et encore bravo !
#31 - Le Jeudi 9 février 2006 à 10 h 57 min, JaH_LiveS dit :

Terrible ! Hier je me prenais la tête sur la manière de faire la liaison entre le DOM et PHP…
Puis le hasard (nommé Google) a voulu que je me retrouve ici.

Merci pour tous tes posts qui m’ont permis de me former à l’AJAX en une soirée.