Vous êtes sur la page 1sur 15

Chapitre 1

Ajax

Enseignants :
Wassim Msallem
Matire :
Web 2.0
Classe :
3me Anne

Technologies Web 2.0 1


Plan du cours

1- Dfinition
2- Utilitaires
3- Comparaison avec le web traditionnel
4- Fonctionnement

Technologies Web 2.0 2


1- Dfinition

Asynchronous JavaScript And XML

Ajax permet de modifier partiellement la page


affiche par le navigateur pour la mettre
jour sans avoir recharger la page entire.

Technologies Web 2.0 3


2- Utilitaires

Ajax est une technique qui fait usage des lments


suivants:
HTML.
CSS (Cascading Style-Sheet)
JavaScript:
- L'objet XMLHttpRequest lit des donnes ou
fichiers sur le serveur de faon asynchrone.
- Si besoin, DOMparser intgre un document
XML.
PHP

Technologies Web 2.0 4


3- Comparaison avec le web
traditionnel

Technologies Web 2.0 5


3- Comparaison avec le web
traditionnel

Technologies Web 2.0 6


4- Fonctionnement

Technologies Web 2.0 7


4- Fonctionnement

Les vnements provoquent l'appel des fonctions


associes aux lments de la page.
L'interaction avec l'utilisateur se fait partir des
formulaires ou boutons html.
Ces fonctions JavaScript identifient les lments
de la page grce au DOM et communiquent avec
le serveur par l'objet XMLHttpRequest

Technologies Web 2.0 8


4- Fonctionnement

Pour recueillir des informations sur le serveur cet


objet dispose de deux mthodes:
open: tablit une connexion.
send: envoie une requte au serveur.
Les donnes fournies par le serveur seront
rcupres dans les champs de l'objet
XMLHttpRequest:
responseXml pour un fichier XML ou
responseText pour un fichier de texte brut

Technologies Web 2.0 9


4- Fonctionnement
L'objet XMLHttpRequest
Attributs
Attributs Valeurs possibles
readyState 0: non initialis.
1: connexion tablie.
2: requte reue.
3: rponse en cours.
4: termin.

Status 200 est ok


404 si la page n'est pas trouve.

responseText contient les donnes charges dans une chane de


caractres.
responseXml contient les donnes charges sous forme xml, les
mthodes de DOM servent les extraire.
Onreadystatechange proprit active par un vnement de changement
d'tat. On lui assigne une fonction.
Technologies Web 2.0 10
4- Fonctionnement
L'objet XMLHttpRequest
Mthodes

Mthodes Paramtres
open(mode, url, mode: type de requte, GET ou POST
boolean) url: l'endroit ou trouver les donnes, un fichier avec
son chemin sur le disque.
boolean: true (asynchrone) / false (synchrone).

send("chaine") null pour une commande GET.

Technologies Web 2.0 11


4- Fonctionnement
Construire une requte
1re tape : crer une instance avec les diffrents navigateurs

if (window.XMLHttpRequest) // Objet standard


{
xhr = new XMLHttpRequest(); // Firefox, Safari, ...
}
else if (window.ActiveXObject) // Internet Explorer
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
Technologies Web 2.0 12
4- Fonctionnement
Construire une requte
2me tape : attendre la rponse

xhr.onreadystatechange = function()
{

// instructions de traitement de la rponse

};

Technologies Web 2.0 13


4- Fonctionnement
Construire une requte
2me tape : ajouter des controles

xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
// Reu, OK
}
Else
{
// Attendre...
}
};
Technologies Web 2.0 14
4- Fonctionnement
Construire une requte

3me tape : Envoi de la requte

xhr.open('GET', fichier.xml', true);


xhr.send(null);

Technologies Web 2.0 15