Introduction à AJAX et interaction avec PHP
Date de publication : 15/09/2006
Par Gaël Donat (Site) (Blog)

Cet article aborde en douceur les concepts inhérents à AJAX.

I. Introduction
I-A. Remerciements
I-B. Prémbule : qu’est-ce qu’AJAX ?
I-C. Fonctionnement
II. AJAX pas à pas
II-A. Sans A et sans X => Javascript
II-B. Juste sans le X => Asynchronous Javascript
II-C. Levrai, l’unique AJAX
III. Les choses qui nous facilitent la vie
III-A. Interaction avec le serveur : AJAX + PHP
III-B. Attendre c’est bien, le savoir c’est mieux !
IV. Conclusion
IV-A. Épilogue
IV-B. Liens

I. Introduction

I-A. Remerciements
Un grand merci à Denis Cabasson et Guillaume Rossolini pour leurs conseils avisés, leur rapidité et leur patience pendant la relecture.I-B. Prémbule : qu’est-ce qu’AJAX ?
On parle beaucoup d’AJAX en ce moment dans le buzzword Web 2.0. En effet la technologie Web entière est basée sur le modèle de l’aller retour : pour une requête serveur, vous avez un retour qui se traduit par un rafraîchissement des données (la page Web affichée).

Ce modèle de fonctionnement est fiable car existant depuis très longtemps mais il pose aussi desproblèmes d’interaction homme machine et de performances.

D’un point de vue utilisateur, le rafraîchissement de toute la page au moindre clic est synonyme de temps d’attente et de scintillement qui n’est pas toujours du meilleur effet dans une application professionnelle.

Du point de vue des performances, à la moindre modification, vous rechargez une page entière avec toutes ses balisesHTML, ce qui génère un trafic important.

La technologie AJAX n’est pas nouvelle en soi. A signifie Asynchronous (Asynchrone), JA pour Javascript et X pour XML. La nouveauté d’AJAX est bel et bien de tirer parti des trois outils pour faire des applications dynamiques.

Les puristes ne vont sûrement pas aimer ce que je vais dire, mais on peut tout à fait faire de l’AJAX au sens large sansforcément faire de l’asynchrone ni du XML. Nous allons détailler les différentes possibilités fournies par AJAX dans ce document puis nous verrons comment interfacer tout cela avec PHP et une base MySQL.

I-C. Fonctionnement
AJAX est basé sur l’objet XMLHttpRequest qui permet de faire une requête via Javascript à un serveur HTTP. Le but est donc, comme dans le « Web 1.0 », de faire une requête auserveur et d’en attendre le retour. Cependant, dans notre cas, le navigateur du client n’est pas nécessairement rafraîchi et tout est transparent pour l’utilisateur.

II. AJAX pas à pas

II-A. Sans A et sans X => Javascript
Dans un premier temps, nous allons aborder AJAX sans parler de dialogue asynchrone ni de XML, on va laisser ces barbarismes pour plus tard dans l’article et donc, pourl’instant, nous allons parler d’AJAX synchrone en mode texte.

Synchrone signifie ici que nous attendons que le serveur réponde à notre requête avant de rendre la main à l’utilisateur. Évidemment, si le serveur met du temps à répondre, le navigateur va sembler figé : nous verrons plus tard comment contourner cela.

Je vous propose tout de suite un exemple sur la manière de procéder.

L’exemplese trouve ici

Nous avons trois fichier, un fichier .html qui contient notre code, un fichier .js qui contient notre code assurant la fonctionnalité AJAX et un fichier texte tout simple qui contient ce que nous allons recevoir du serveur.
index1.html

Exemple 1

Cliquez-moi !

reponse.txt

Bonjour Monde

ajax1.js

function ajax()
{
var xhr=null;

if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xhr = new ActiveXObject(« Microsoft.XMLHTTP »);
}
//on appelle le fichier reponse.txt
xhr.open(« GET », « http://gael-donat.developpez.com/web/intro-ajax/reponse.txt », false);
xhr.send(null);

alert(xhr.responseText);
}

La création de l’objet xhr…