Cours informatique

Programmation Web Avanc´e e AJAX
Thierry Hamon
Bureau H202 - Institut Galil´e e T´l. : 33 1.48.38.35.53 e Bureau 150 – LIM&BIO – EA 3969 Universit´ Paris 13 - UFR L´onard de Vinci e e 74, rue Marcel Cachin, F-93017 Bobigny cedex T´l. : 33 1.48.38.73.07, Fax. : 33 1.48.38.73.55 e thierry.hamon@univ-paris13.fr http://www-limbio.smbh.univ-paris13.fr/membres/hamon/

1/26

AsynchronousJavascript And XML (AJAX)
Introduction

Introduit en 2005 par Jesse James Garrett Applications Web avec interface utilisateur D´portation d’une partie des traitements li´s ` l’interface du e e a code cot´ client e
R´duction des ressources utilis´es cot´ serveur e e e Economie de bande passante

Exemple d’application Web AJAX :
Google Mail, Maps, Earth, etc. Liste de suggestions automatiquesTraitement de texte

2/26

Asynchronous Javascript And XML (AJAX)
Introduction

Regroupe un ensemble de technologie Web utilis´es e conjointement (HTML, CSS, DOM, Javascript, XMLHttpRequest, XML) Permet la r´cup´ration de donn´es sur le serveur de mani`re e e e e asynchrone, sans interf´rer avec les donn´es dans la page e e courante (utilisation de l’objet XMLHttpRequest) Utilise comme formatd’´change, XML, des fichiers textes et e aussi JSON

3/26

Asynchronous Javascript And XML (AJAX)
Introduction

Deux composants (Application Web Classique) : Serveur (impl´mentation JAVA ou PHP par exemple) e
Contrˆle g´n´ral de l’application o e e Propose des ressources statiques : Mod`le du document, e biblioth`que de scripts, feuilles de style e Traitement dynamique des donn´es e Compositiondynamique de l’interface

Client (impl´mentation Javascript par exemple) e
Gestion des ´v`nements utilisateur e e Composition dynamique de l’interface

Dialogue : HTTP, (X)HTML

4/26

Asynchronous Javascript And XML (AJAX)
Introduction

Deux composants (Application Web AJAX) : Serveur (impl´mentation JAVA ou PHP par exemple) e
Contrˆle g´n´ral de l’application o e e Propose desressources statiques : Mod`le du document, e biblioth`que de scripts, feuilles de style e Traitement dynamique des donn´es e

Client (impl´mentation Javascript par exemple) e
Contrˆle d´l´gu´s en fonction du type de vue o ee e Gestion des ´v`nements utilisateur e e Composition dynamique de l’interface Traitement des donn´es re¸ues e c

Dialogue : HTTP, XML, JSON

4/26

Fonctionnement
Sch´mae

Source: http: //www.codeproject.com/KB/showcase/FarPointAJAX.aspx

5/26

Fonctionnement
Illustration

1

Requˆte asynchrone au serveur dans une fonction JavaScript, e d´clench´e par un ´v´nement e e e e Transfert asynchrone de donn´es en XML e Traitement dynamique du cˆt´ client pour affichage inclusion oe au document HTML, transformation XSLT, etc. Requˆte asynchrone sur un documentXML en utilisant un e objet XMLHttpRequest (Mozilla) ou un contrˆle ActiveX o XMLHTTP (IE) Puis communication AJAX

2 3

4

5

6/26

Fonctionnement
Communication AJAX

Client : Envoi de la requˆte : e
Cr´ation de l’objet requˆte (XMLHttpRequest) e e Sp´cification des ´l´ments de la requˆte (URL, m´thode, e ee e e headers HTTP, param`tres) e Association d’un gestionnaire d’´v´nementse e Envoi de l’objet

R´ception de la r´ponse : e e
A chaque modification de l’´tat de la requˆte : tester si dans e e l’´tat ready e Traitement des donn´es re¸ues (Ajout ` l’interface, e c a transformation XSL)

7/26

Fonctionnement
Communication AJAX

Serveur : D´finition des actions ` r´aliser lors de la r´ception d’une e a e e requˆte asynchrone AJAX e

8/26

Objet XMLHttpRequestAPI utilis´e e par JavaScript et d’autres langages de scripts pour transf´rer des donn´es au format XML, texte ou JSON e e entre le client (navigateur) et le serveur Web de mani`re asynchrone g´n´ralement. Mais possibilit´ e e e e d’utilisation synchrone Cr´ation de l’objet XMLHttpRequest : m´thode ActiveXObject e e (IE) et objet Javascript XMLHttpRequest

9/26

Exemples de code...