AJAX

OGIER Anthony

IR3 Groupe 2

Exposé de Système

Principe

Ne recharger que les parties nécessaires des applications web !

But

Vitesse

Réactivité

Ergonomie

Présentation

Historique

DHTML

Utilisation, dès fin 1990 (CGI / Server Side Includes)

Abréviation en 1997 (JavaScript dès 1996 par Microsoft et Netscape)

AJAX

Utilisation dès 2001

Abréviation conceptuelle / commerciale (18 février 2005 par Jesse James Garrett)

Fonctionnement

AJAX (Asynchronous JavaScript + Xml)

Standards présentation : XHTML / CSS

Affichage dynamique : DOM

Échange de données : XML / XSLT

Récupération asynchrone de données : XMLHttpRequest

JavaScript pour utiliser le tout

Concept (1)

Concept (2)

Concept (3)

JavaScript

Navigateur Web

Serveur Web

Appel de fonction

HTTP GET / POST

XML

DOM

Étape 1 : Lancement d'une requête HTTP (1)

Instancier l'objet XML over HTTP

IE : ActiveX XMLHTTP

Mozilla : Classe JavaScript : XMLHttpRequest

if (window.XMLHttpRequest) { // Mozilla, Safari,...

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {

http_request.overrideMimeType('text/xml');

}

} else if (window.ActiveXObject) { // IE

try {

http_request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

http_request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

Étape 1 : Lancement d'une requête HTTP (2)

Associer une fonction qui traitera la réponse

http_request.onreadystatechange = maFonctionAssociee;

http_request.onreadystatechange = function(){

// instructions de traitement de la réponse

};

ou

Étape 1 : Lancement d'une requête HTTP (3)

Lancer la requête

http_request.open('GET',

'http://www.example.org/some.file?arg1=value1&arg2=value2', true);

http_request.send(null);

http_request.open('POST', 'http://www.example.org/some.file', true);

http_request.send('arg1=value1&arg2=value2');

ou en POST :

Attention : La fonction open ne peut se faire que sur le même nom de domaine que la page courante !

Étape 2 : Gestion de la réponse du serveur (1)

La fonction associée à onreadystatechange

function maFonctionAssociee {

if (http_request.readyState == 4) {

// tout va bien, la réponse a été reçue

if (http_request.status == 200) {

// parfait !

} else {

// il y a eu un problème avec la requête,

// par exemple la réponse peut être un code

// 404 (Non trouvée)

// ou 500 (Erreur interne du serveur)

}

} else {

// pas encore prête

}

}

Étape 2 : Gestion de la réponse du serveur (2)

Traiter les données envoyées par le serveur

http_request.responseText -> Texte

http_request.responseXML -> XMLDocument

Étape 2 : Gestion de la réponse du serveur (3)

Mise à jour des champs de la page HTML grâce à DOM

<?xml version="1.0">

<person>

<firstName>Toto</firstName>

<lastName>Dupond</lastName>

</person>

var xmlDocument = http_request.responseXML;

var firstName = xmlDocument.getElementsByTagName('firstName')

.item(0).firstChild.data;

var lastName = xmlDocument.getElementsByTagName('lastName')

.item(0).firstChild.data;

document.getElementById('firstNameField').value = firstName;

document.getElementById('lastNameField').value = lastName;

Aller plus loin

Utilisation de framework : OpenRico http://openrico.org

En struts : StrutsLayout http://struts.application-servers.com

En JSP : AjaxTags http://ajaxtags.no-ip.info/

Ou AjaxAnyware : http://ajaxanywhere.sourceforge.net/index.html

Liens

Ajax : A New Approach to Web Applications http://www.adaptivepath.com/publications/essays/archives/000385.php

Site AjaxPatterns : http://www.ajaxpatterns.org/

Article Wikipedia : http://fr.wikipedia.org/wiki/AJAX

Article Framasoft : http://www.framasoft.net/article3991.html

Tutoriel Mozilla sur AJAX :http://developer.mozilla.org/fr/docs/AJAX:Premiers_pas

Article Wikipedia DHTML : http://fr.wikipedia.org/wiki/DHTML

Présentation AJAX

EPNE5314

2004-06-04T11:13:42