Cours - Ajax - 2017

Virtuoworks
AJAX 2017
AJAX
Objectif :
Comprendre les principes de l’AJAX et découvrir
un framework existant
1/24
AJAX contact@virtuoworks.com
Virtuoworks
AJAX 2017
Sommaire
Introduction ..................................................................................... 3
I. Rappels ......................................................................... 5
a. Langages de description : HTML et XML .................................... 5

b. Langages script client : « DOM » et JavaScript .......................... 7
II. L’AJAX .......................................................................12
a. Synchrone et Asynchrone ..................................................... 12

b. Méthode AJAX : script client moyen ....................................... 17
c. Méthode AJAX utilisant JSON : script client lourd ..................... 19
III. Les « frameworks » AJAX .......................................22
a. jQuery ................................................................................ 22
b. Autres « frameworks » ......................................................... 23
Conclusion ..................................................................................... 23
2/24
Virtuoworks
AJAX 2017
Introduction
On distingue deux types de sites Internet, les sites statiques et les sites
dynamiques.
Un site statique est hébergé sur un poste serveur. Il s’affiche sur le poste
client sur le navigateur Internet (Internet Explorer, Mozilla Firefox, Safari,
etc.). L’information affichée est la même pour tous les clients qui consultent
le site. Chaque page du site est créée par le développeur.
Les technologies employées pour le développement d’un site statique sont

les langages de description (langage de mise en page (ou de balisage) : HTML
et langage de présentation : CSS) ainsi que des langages scripts permettant à
l’utilisateur de modifier la mise en page temporairement ou d’intégrer des
effets graphiques sur les pages (JavaScript, Flash, etc.). Ces langages sont
interprétés par le navigateur du poste client.
Site Internet statique :
Poste (WWW) Poste

REQUETE
Client Serveur
Page du site :
- index.html
- index.css
- index.js
- index.swf
Page statique affichée sur le Des fichiers pour chaque page
poste client du site sur le poste serveur
Un site dynamique est aussi hébergé sur un poste serveur et s’affiche

aussi sur le navigateur Internet du poste client. En revanche, l’information
affichée est personnalisée pour chaque client. Chaque page est générée
dynamiquement. Lorsqu’une requête est envoyée par le poste client à
destination du poste serveur, un script est exécuté par le poste serveur pour
créer une nouvelle page. En d’autres termes, sur le poste serveur, un script
va générer un site statique personnalisé qui s’affichera sur le navigateur du
poste client.
Les technologies employées pour le développement d’un site dynamique

sont les mêmes que celle employées pour un site statique. Ces technologies
3/24
Virtuoworks
AJAX 2017
(HTML, CSS, JavaScript, Flash,…) sont interprétées par le navigateur du poste

client et permettent d’afficher une page du site.
Pour générer les pages du site basées sur ces technologies, on utilisera un
langage script (PHP, ASP,…) exécuté par le poste serveur lors d’une requête
client. On utilise aussi un SGBD (Système de Gestion de Base de Données)
pour stocker de l’information de façon structurée. Cette information est
utilisée par le langage script par l’intermédiaire d’un langage de type SQL
(langage de requêtes) permettant de manipuler les données du SGBD.
Site Internet dynamique :
Poste (WWW) Poste

REQUETE
Client Serveur
Page du site : Script :

index.html index.php
index.css php
index.js sql
(index.swf)
Page dynamique Des pages différentes

affichée sur le pour chaque client du SGDB
poste client site
Scripts php et SQL
qui génèrent
dynamiquement des
pages pour chaque
client du site
Un site dynamique est aussi appelé application.
Une application s’appuie sur :
- un langage de description
o langage de mise en page (ou de balisage) : HTML
o langage de présentation : CSS
- un langage script client : JavaScript
- (un langage propriétaire pour certains effets : Flash, Coldfusion)
- un langage script serveur : PHP, ASP,…
- un langage de requêtes : SQL.
L’AJAX est une méthodologie de programmation s’appuyant sur toutes ces

technologies. Cette méthode de programmation permet d’améliorer
l’expérience du client en facilitant la navigation, l’utilisation de fonctionnalités
4/24
Virtuoworks
AJAX 2017
et en optimisant les appels au poste serveur pour gagner en performance lors

de l’accès aux données.
Rappels
La maîtrise de la méthodologie AJAX passe par une bonne

connaissance des langages de description que sont le HTML et
le XML de façon plus générale ainsi que du DOM (Document
Object Model) et du JavaScript.
Langages de description : HTML et XML
Le XML et les HTML sont des langages de balisage. XML signifie en

anglais eXtensible Markup Language, langage de balisage extensible.
C’est un langage générique de mise en page. Les fichiers XML peuvent
être convertis en n’importe quel type de langages de balisage
extensibles comme le HTML par exemple.
Exemple de XML :
HTML signifie en anglais Hypertext Markup Language, langage

hypertexte de balisage . C’est un langage de mise en forme. Il se base
sur la syntaxe définie par XML. Il s’agit de présenter un contenu
affichable par n’importe quel type de navigateur sur n’importe quel
type de plateforme quelle que soit sa puissance.
Exemple de HTML:
Les navigateurs interprètent les langages de balisage extensibles

pour afficher une page répondant à la structure spécifiée.
5/24
Virtuoworks
AJAX 2017
En HTML, on utilise des balises prédéfinies. Elles permettent, à

l'intérieur d'un fichier texte, de définir des éléments tels que les titres,
les paragraphes, etc.
On distingue deux types d’éléments, les balises « en-ligne » et les

blocs. Un bloc contient des éléments en-ligne. Une division
(<div></div>) qui est un élément de type bloc peut contenir des
paragraphes (<p></p>) qui est un élément de type en-ligne.
Exemple d’imbrication :
Les balises sont dotées d’attributs tels que l’attribut « id », « class »

ou encore « style ». Chaque balise possède un seul et unique
attribut de chaque type.
Exemple de balise avec attributs :
Les attributs permettent d’identifier la balise (« id »), de définir la

présentation de la balise (« class », « style »), les événements associés
(« onclick »), etc.
Exemple de balise avec attributs spécifiques :
L’attribut « id » permet d’IDentifier la balise. Sa valeur est

donc unique sur une page. Pour s’assurer que la page respecte les
spécifications XML ou HTML, on peut utiliser les outils de validation du
W3C (World Wide Web Consortium) qui est l’organisme de
normalisation des langages de description de sites Internet.
6/24
Virtuoworks
AJAX 2017
La validation W3C peut s’effectuer sur le site du W3C à l’adresse

suivante :
- http://validator.w3.org/
Langages script client : « DOM » et JavaScript
Le Document Object Model, le « DOM », est une recommandation du

W3C qui uniformise la représentation d’un document créé à l’aide d’un
langage de description (XML, HTML, etc.…). Il décrit une interface
permettant à des programmes informatiques et à des scripts d’accéder,
de mettre à jour ou de modifier la présentation ou la structure d’un
document. Les navigateurs (Internet Explorer, Mozilla Firefox, Safari,
etc.…) utilisent le « DOM » pour interpréter un document.
Le « DOM » propose de représenter un document sous la forme d’un

arbre constitué de nœuds. Tous les elements générés à partir d’un
balisage forment des nœuds ou des groupes de noeuds.
Exemple de représentation du « DOM » :
Code HTML :
7/24
Virtuoworks
AJAX 2017
Arbre « DOM » :
<div> noeud d’element
<p> <p> <p>
Bonjour! Bonjour toujours!
Bonjour encore! noeud de texte

JavaScript est un langage de programmation de scripts qui est
interprété et exécuté par le navigateur du poste client. Ce langage
permet, via l’exécution de scripts, de naviguer dans le « DOM » pour
modifier la structure ou la présentation du document.
C’est un langage orienté objet. Un objet est une représentation

abstraite, c'est-à-dire dans la mémoire, d’objets réels. Un objet
possède des propriétés et des méthodes (des actions permettant de
le manipuler). Ces propriétés et méthodes sont définies au sein d’une
classe. Une classe représente l’ensemble des informations relatives à
un objet. Une classe est donc la définition (au sens littéral du terme)
d’un objet. L’instance d’une classe en mémoire, c'est-à-dire charger
une classe dans la mémoire de l’ordinateur, est donc un nouvel objet.
L’ensemble des propriétés d’un objet est réuni dans une classe au
sein de ce que l’on appelle le constructeur.
Prenons l’exemple d’une pomme :
Une pomme est décrite dans une classe. Exemple en Javascript :
Quelles sont les propriétés générales d’une pomme ? Propriétés :

poids (en grammes), forme, couleur, Etc. Exemple en Javascript :
8/24
Virtuoworks
AJAX 2017
Quelles sont les méthodes associées à une pomme ? Méthode : « la

pomme est-elle pourrie ? ». Exemple en Javascript :
On peut désormais créer des objets pomme dans la mémoire. C’est

ce qu’on appelle instancier un objet en mémoire. Exemple en
Javascript :
- Instanciation d’une pomme verte :
- Instanciation d’une pomme pourrie :
Il existe donc deux objets « pommes » dans la mémoire. Je peux

interroger ces deux objets en consultant leurs propriétés ou en
exécutant leurs méthodes. En JavaScript, l’accès aux propriétés ou aux
méthodes d’un objet s’effectue en séparant les noms, propriétés ou
méthodes par des « . ». Exemple en JavaScript :
On peut créer autant d’objets « pomme » que l’on souhaite et les

manipuler à souhait.
9/24
Virtuoworks
AJAX 2017
Il est possible d’imbriquer des objets les uns dans les autres. On
peut donc créer une classe « maClasseVer » et l’instancier dans la
classe « pomme ».
Un ver à des propriétés et des méthodes. Il sera donc possible

d’accéder au propriétés ou méthodes du ver à partir de l’objet
« pomme ». Exemple en JavaScript :
En JavaScript, l’objet représentant l’arbre « DOM » est instancié

dans une variable appelée « document » disponible à l’exécution de
n’importe quel script. L’objet « document » contient :
- des « propriétés » dans lesquelles sont contenues les différentes

informations relatives à l’arbre « DOM » du document.
- des « méthodes » qui sont des fonctions permettant de modifier

les différentes informations (structure et présentation) relatives à
l’arbre « DOM » du document.
Exemple schématique :
Document HTML :
10/24
Virtuoworks
AJAX 2017
Arbre « DOM » associé :

<html>
<head>
<title>
<body> accueil
<div>
<p> <p> <p>
Bonjour! Bonjour toujours!
Bonjour encore!
Objet « document » :
Voir les propriétés et les méthodes de l’objet « document » à
l’adresse :
- http://fr.selfhtml.org/javascript/objets/document.htm
Par exemple, si je souhaite accéder à la propriété « title » de mon

objet « document » qui contient le titre de mon document, la syntaxe
appropriée sera : « document.title ».
Si je souhaite exécuter la méthode « createElement() »

permettant d’ajouter un nœud à mon arbre « DOM », la syntaxe
appropriée sera : « document.createElement(‘div’) ».
Dans l’objet « document », chaque nœud est un objet. On

peut donc accéder aux propriétés et méthodes de chaque nœud
(comprendre chaque balise). On peut donc modifier ou consulter les
informations contenues dans chaque balise.
Les balises en HTML peuvent être identifiées par l’attribut « id ». La

valeur de « id » est unique sur un document HTML. La méthode
« getElementById() » de l’objet « document » permet de sélectionner
une balise en particulier dans l’arbre « DOM ».
11/24
Virtuoworks
AJAX 2017
L’AJAX
AJAX signifie Asynchronous JavaScript And Xml, et, en

français, JavaScript et XML Asynchrone. Il faut donc
comprendre la différence entre requêtes synchrone et
asynchrone pour être en mesure d’exploiter la méthodologie
AJAX.
Synchrone et Asynchrone
NOTION DE FONCTIONNEMENT SYNCHRONE

La notion d’architecture client-serveur synchrone est
l’architecture de fonctionnement native proposée quant à l’utilisation
du protocole HTTP entre les navigateurs Internet et les serveurs
Web.
 Le(s) client(s) et le(s) serveur(s) ne sont pas actifs

simultanément.
Le client est actif tant que le navigateur Internet n’émet pas de
requête HTTP. Parallèlement, le serveur Web est en attente tant
qu’il n’a pas reçu de requête.
Lorsque le client émet une « requête HTTP », il devient inactif

pour l’utilisateur (c’est le phénomène bien connu de la « page
blanche » sur les navigateurs Internet). En revanche, le serveur qui
reçoit la « requête HTTP » devient actif et réalise le traitement
demandé.
Lorsque le serveur a achevé son traitement, il prépare et envoie

la « réponse HTTP ». Lorsque la réponse est reçue par le client, ce
dernier re-devient actif. Le serveur est alors de nouveau en
attente.
12/24
Virtuoworks
AJAX 2017
Fonctionnement synchrone (T1 à T3)
Actif En attente
T1 Requête HTTP
Client(s) Serveur(s)
En attente Actif
T2
Actif En attente
T3 Réponse HTTP
L’architecture de fonctionnement synchrone est le fonctionnement

natif des navigateurs Internet.
UTILISATION DE « JAVASCRIPT » EN SYNCHRONE

Quand le langage « JavaScript » est utilisé en respectant le cadre
d’une architecture synchrone, les scripts « JavaScript » sont
incorporés et interprétés par le navigateur Internet lors de la
réception du contenu de la réponse à la « requête HTTP » initiale.
Ils peuvent être exécutés directement ou en réaction à certains

comportements du navigateur Internet ou actions de l’utilisateur
après le chargement du DOM du document Web courant.
 Les scripts « JavaScript » interagissent avec le DOM du

document Web courant.
Les scripts « JavaScript » proposent généralement d’enrichir le
document Web courant de fonctionnalités qui ne sont pas proposées
de façon native par le navigateur Internet.
13/24
Virtuoworks
AJAX 2017
En revanche, ils n’offrent pas de possibilité de mise à jour du

document Web courant à l’aide de données provenant de
traitements métier exécutés, à la demande, coté serveur. Et, les
traitements qui sont éventuellement proposés par des scripts
« JavaScript » ne peuvent s’appuyer que sur les données transmises
initialement par le serveur et / ou les saisies de l’utilisateur.
 En fonctionnement synchrone, les scripts « JavaScript »

ne peuvent utiliser que les données transmises
initialement ou les saisies utilisateurs pour réaliser des
traitements côté client.
Le volume de scripts peut varier en fonction des besoins,
cependant, il ne s’agit généralement que de manipuler le DOM du
document Web courant, c’est pourquoi on peut parler de scripts
client « léger ».
Méthode (base)
Poids des scripts client Léger
Nécessaire à l’implémentation de la méthode  Mise à jour du DOM
AVANTAGES / INCONVENIENTS
Avantages
 L’expérience de navigation est enrichie.
 S’appuie sur les formats standards de description de

document.
 S’appuie sur le comportement synchrone natif du navigateur

Internet.
Inconvénients
Le serveur génère l’ensemble des données nécessaire à
l’affichage.
Les données manipulables sont les données présentes de base

sur le document ou les saisies utilisateur.
Le résultat des manipulations de l’utilisateur ne peut être

préservé sans un rechargement complet du document Web.
14/24
Virtuoworks
AJAX 2017
Méthode AJAX : script client moyen
DEFINITION
AJAX est l’acronyme de « Asynchronous JavaScript And XML ».
En français : « JavaScript » et XML asynchrone.
Il s’agit d’une méthode de programmation faisant appel à

plusieurs technologies pour offrir la possibilité d’un « dialogue
asynchrone » entre les clients et les serveurs. Ceci permet
d’introduire des fonctionnalités et une ergonomie améliorée sur les
applications Web (§6.1.1).
 AJAX est une méthode de développement.

La notation XML est utilisée pour structurer l’information
transmise entre le client et le serveur.
« JavaScript » est utilisé pour émettre des requêtes HTTP de

manière asynchrone à destination du serveur. Il permet aussi
d’effectuer des mises à jour sur le document Web affiché sur le
poste client.
 AJAX s’appuie sur plusieurs technologies.
ARCHITECTURE ASYNCHRONE
Notion de fonctionnement asynchrone
La notion d’architecture client-serveur asynchrone est une
architecture de fonctionnement non-native qui peut être
implémentée pour remplacer l’utilisation native (synchrone) du
protocole HTTP proposée par les navigateurs Internet et serveurs
Web.
Elle peut être mise en œuvre grâce à l’utilisation de langages

script, de librairies logicielles (dll) ou de composants logiciels
additionnels (compléments) coté client.
 Le(s) client(s) et le(s) serveur(s) peuvent être actifs

simultanément.
Le client est actif tant que le navigateur Internet n’émet pas de «
requête HTTP ». Parallèlement, le serveur Web est en attente tant
qu’il n’a pas reçu de requête.
Lorsque le client émet une « requête HTTP », il reste actif et

l’utilisateur peut poursuivre la consultation du document Web
courant. Le serveur qui reçoit la « requête HTTP » devient actif et
réalise le traitement demandé.
15/24
Virtuoworks
AJAX 2017
Lorsque le serveur a achevé son traitement, il prépare et envoie

la « réponse HTTP » au client. Le client procède à la mise à jour de
l’affichage courant. Le serveur est alors de nouveau en attente.
Ci-dessous un diagramme explicatif du fonctionnement

asynchrone :
Fonctionnement asynchrone (T1 à T3)
Actif En attente
T1 Requête HTTP
Actif Actif
T2
Actif En attente
T3 Réponse HTTP
L’architecture de fonctionnement asynchrone n’est pas le

fonctionnement natif des navigateurs Internet.
L’implémentation de la méthode AJAX permet de reproduire ce
type de fonctionnement.
UTILISATION DE « JAVASCRIPT » EN ASYNCHRONE

Lors de l’implémentation de la méthode AJAX, le langage
« JavaScript » est utilisé pour émettre une « requête HTTP » à
destination du serveur et pour mettre à jour le document Web
courant affiché sur le navigateur Internet avec le contenu de la
réponse du serveur.
16/24
Virtuoworks
AJAX 2017
NOTION DE MISE A JOUR AJAX

Les scripts « JavaScript » réalisant cette opération sont appelés
couramment scripts de « mise à jour AJAX ».
Ci-dessous un diagramme explicatif des différentes étapes
d’une « mise à jour AJAX » :
Etapes de la mise à jour AJAX (T1 à T6)
Client(s) actif(s) Serveur(s)
Document Web
affiché
(*)
T2 : émission de
requête HTTP
T3 : Traitement
T6 : Mise à
jour du
document Web T4 : émission de
affiché réponse HTTP
T1 : Exécution de
script « JavaScript »
T5 : Poursuite de
l’exécution de script
« JavaScript »
(*) Zone de « mise à jour AJAX »

Le contenu de la « réponse HTTP » est un ensemble de données
structuré selon les normes syntaxiques d’un langage de description
(XML, HTML, XHTML,…) qui peut être utilisé pour mettre à jour le
document Web affiché et donc par extension le DOM du document
Web affiché.
 La « mise à jour AJAX » du document Web affiché met à
jour le DOM du document Web affiché.
L’exécution du script « JavaScript » entraînant l’émission d’une
« requête HTTP » à destination du serveur peut être déclenchée par
une action de l’utilisateur ou un comportement du navigateur
Internet.
Quand « JavaScript » est utilisé en respectant le cadre d’une
architecture asynchrone et donc dans le cadre de la mise en œuvre
de la méthode AJAX, il offre la possibilité d’enrichir le contenu du
document Web courant à l’aide d’éléments d’affichage et de
contenus résultants de l’exécution de traitements métier (i.e :
réalisés coté serveur).
17/24
Virtuoworks
AJAX 2017
 La « mise à jour AJAX » du document Web affiché met à

jour le DOM du document Web affiché avec des contenus
résultant de l’exécution de traitements métier.
La mise en œuvre de la méthode nécessitant un plus gros volume
de scripts client pour assurer à la fois l’émission et la réception de la
requête ainsi que la mise à jour du DOM, on peut parler de scripts
client « moyen ».
Méthode AJAX
Poids des scripts client Moyen
Nécessaire à l’implémentation de la méthode  Emission de requête HTTP
 Réception de requête HTTP
 Mise à jour du DOM
Avantages
 L’expérience de navigation est enrichie.
 S’appuie sur les formats standards de description de

document.
 XML est extensible et est largement utilisé et reconnu par

tous les langages de programmation.
 Les données manipulables sont les données présentes de

base sur le document, les saisies utilisateur ou des données
issues de traitements métier effectués coté serveur.
 Le résultat des manipulations de l’utilisateur peut être

préservé à l’aide de requêtes asynchrones sans rechargement
du document Web.
 Le serveur ne génère qu’une partie que les données

nécessaire à l’affichage d’une partie du document Web. Le
contenu peut être enrichi, à la demande, suite à des mises à
jour AJAX.
Inconvénients
 Les fonctionnalités natives de navigation synchrone des
navigateurs Internet (page précédente, page suivante,
ajouter aux favoris, etc…) réagissent de façon inappropriée.
 Les navigateurs Internet sans prise en charge de

« JavaScript » (comme ceux de certains terminaux mobiles)
18/24
Virtuoworks
AJAX 2017
ou pour lesquels « JavaScript » est désactivé ne peuvent

accéder qu’à une partie du contenu du document Web.
 Le référencement par les moteurs de recherche est dégradé.

Les « robots » de référencement n’interprètent pas le
« JavaScript » et ne sont donc pas en mesure de consulter et
de référencer l’ensemble du contenu du document Web.
Méthode AJAX utilisant JSON : script client lourd
DEFINITION
JSON est l’acronyme de Notation Objet JavaScript (en anglais :
« JavaScript Object Notation »). Il s’agit d’un format standard
d’échange de données dérivé de la notation employée par le
langage « JavaScript » pour décrire des objets (structures de
données et tableaux associatifs).
JSON est standardisé sous la norme RFC 4627 (disponible ici) de

l’IETF (en anglais : « Internet Engineering Task Force ») qui
est un groupe informel, ouvert et international qui participe à
l’élaboration de standards pour l’Internet.
Ce format d’échange est utilisé pour sérialiser, c'est-à-dire

convertir des structures de données en un format qui peut
être transporté, et transmettre des données structurées à
travers un réseau.
 JSON est un format d’échange de données.
ARCHITECTURE JSON (LOT 1)

Le format JSON peut servir d’alternative au format XML ou autres
langages de description lors de l’implémentation de la
méthode AJAX. Il s’agit alors de produire coté serveur des
structures de données JSON qui seront transférées coté client
dans le cadre de la réponse à une requête effectuée de façon
asynchrone.
 JSON peut être une alternative au XML pour la mise en

œuvre d’AJAX.
Contrairement à l’utilisation du format XML ou autres langages de
description qui peuvent être directement être incorporés dans
le document Web courant pour mettre à jour le DOM, le
format JSON doit être « évalué » par des scripts « JavaScript
» lors de sa réception. L’« évaluation » consiste à
19/24
Virtuoworks
AJAX 2017
transformer les données transférées en format JSON en une

structure de données exploitable par des programmes.
Il s’agit alors d’utiliser les possibilités du langage « JavaScript »

pour manipuler le DOM du document courant en fonction des
informations contenues dans la structure de données JSON.
La construction de l’affichage est donc totalement maîtrisée
par des scripts « client » et ces derniers sont donc
mécaniquement plus volumineux que lors de l’utilisation de la
méthode AJAX avec XML.
 Les scripts « JavaScript » peuvent exploiter le format

JSON pour mettre à jour le document Web courant en
exploitant le DOM.
La mise en œuvre de la méthode AJAX avec JSON implique
d’assurer à la fois l’émission et la réception de la requête,
l’évaluation de la structure JSON ainsi que la mise à jour du
DOM, c’est pourquoi on peut parler de scripts « client »
« lourd ».
Méthode AJAX avec JSON

Poids des scripts client Lourd
Nécessaire à l’implémentation de la méthode  Emission de requête HTTP
 Réception de requête HTTP
 Evaluation de JSON
 Mise à jour du DOM
Avantages
L’expérience de navigation est enrichie.
JSON est facile à exploiter coté client et la plupart des langages

scripts serveur sont en mesure de générer des sérialisations
au format JSON.
Les données manipulables sont les données présentes de base

sur le document, les saisies utilisateur ou des données issues
de traitements métier effectués coté serveur.
Le résultat des manipulations de l’utilisateur peut être préservé à

l’aide de requêtes asynchrones sans rechargement du
document Web.
20/24
Virtuoworks
AJAX 2017
L’affichage peut être maîtrisé par un ensemble de scripts coté

client exploitant des structures JSON pour construire les
éléments d’affichage nécessaire à la mise à jour AJAX.
Inconvénients
Les fonctionnalités natives de navigation synchrone des
navigateurs Internet (page précédente, page suivante,
ajouter au favoris, etc…) réagissent de façon inappropriée.
Les navigateurs Internet sans prise en charge de « JavaScript »

(comme ceux de certains terminaux mobile) ou pour lesquels
« JavaScript » est désactivé ne peuvent accéder qu’à une
partie du contenu du document Web.
Le référencement par les moteurs de recherche est dégradé. Les

« robots » de référencement n’interprètent pas le
« JavaScript » et ne sont donc pas en mesure de consulter et
de référencer l’ensemble du contenu du document Web.
21/24
Virtuoworks
AJAX 2017
Les « frameworks » AJAX
Un « framework » est une librairie de fonctions. Il peut être

fourni par un éditeur privé ou une communauté publique de
développeurs. Il existe de nombreux « frameworks »
s’appuyant sur la méthodologie AJAX et permettant d’en
faciliter l’intégration dans un site Internet. Prototype est un
« framework » AJAX.
jQuery
jQuery est un « framework » JavaScript. Il fournit une libraire de

fonctions préprogrammées dont certaines permettent une intégration
plus aisée de la méthodologie AJAX dans un site Internet.
- http://api.jquery.com/category/ajax/
- http://en.wikipedia.org/wiki/JQuery#Ajax
Comment utilise-t-on jQuery ?
On insère dans la balise <head> du document HTML le lien vers le

script de jQuery.
On peut désormais utiliser jQuery dans le document HTML. Pour

créer un nouvel objet de requêtes AJAX qui modifiera dynamiquement
le contenu d’une page, on utilisera la syntaxe suivante :
22/24
Virtuoworks
AJAX 2017
« method » est la méthode d’envoie des données vers le serveur,

« url » est l’adresse ciblée côté serveur, « data » contient les données
envoyées au serveur et la méthode .done() s’exécute quand le serveur
retourne une information qui est récupérée comme argument dans la
fonction de retour (callback) de cette méthode.
Ici, les données sont affichées seulement dans la console. Il est aisé,
ensuite, de les placer dans le DOM selon l’effet souhaité.
jQuery possède plusieurs méthodes pour faire gérer des requêtes en

Ajax(http://api.jquery.com/category/ajax/), notamment deux
méthodes qui sont des raccourcis de la méthode jQuery.ajax() :
jQuery.get() et jQuery.post().
Autres « frameworks »
Il existe d’autres « frameworks » AJAX permettant de faciliter

l’intégration de la méthodologie AJAX dans un site Internet.
Généralement, ils réunissent une libraire de fonctions AJAX et
une libraire d’effet graphiques. On trouve la liste comparative
de ces frameworks à l’adresse suivante :
- http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
Conclusion
L’emploi de la méthodologie AJAX pour le développement

d’application Internet est de plus en plus répandu. On
confond souvent Web 2.0 avec AJAX or l’objet
XMLHttpRequest à la base de cette méthodologie existe
23/24
Virtuoworks
AJAX 2017
depuis 1998 c'est-à-dire bien avant l’apparition du concept

Web 2.0.
L’AJAX offre des possibilités en terme de gains de performances

et d’amélioration de la navigation qui offrent beaucoup plus
de liberté qu’en utilisant des méthodes de développement
classiques. Attention cependant à ne pas se laisser aller au
tout AJAX qui peut nuire au référencement du site Internet et
à l’expérience de navigation de l’utilisateur dans la mesure ou
certaines fonctionnalités du navigateur sont inutilisables sur
des documents dynamiques.
24/24

Cours - Ajax - 2017

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours - Ajax - 2017

Transféré par

Droits d'auteur :

Formats disponibles

Virtuoworks

a. Langages de description : HTML et XML .................................... 5

II. L’AJAX .......................................................................12

a. Synchrone et Asynchrone ..................................................... 12

III. Les « frameworks » AJAX .......................................22

Les technologies employées pour le développement d’un site statique sont

Site Internet statique :

Poste (WWW) Poste

Un site dynamique est aussi hébergé sur un poste serveur et s’affiche

Les technologies employées pour le développement d’un site dynamique

(HTML, CSS, JavaScript, Flash,…) sont interprétées par le navigateur du poste

Site Internet dynamique :

Poste (WWW) Poste

Page du site : Script :

Page dynamique Des pages différentes

Un site dynamique est aussi appelé application.

Une application s’appuie sur :

L’AJAX est une méthodologie de programmation s’appuyant sur toutes ces

et en optimisant les appels au poste serveur pour gagner en performance lors

La maîtrise de la méthodologie AJAX passe par une bonne

Langages de description : HTML et XML

Le XML et les HTML sont des langages de balisage. XML signifie en

HTML signifie en anglais Hypertext Markup Language, langage

Les navigateurs interprètent les langages de balisage extensibles

En HTML, on utilise des balises prédéfinies. Elles permettent, à

On distingue deux types d’éléments, les balises « en-ligne » et les

Les balises sont dotées d’attributs tels que l’attribut « id », « class »

Exemple de balise avec attributs :

Les attributs permettent d’identifier la balise (« id »), de définir la

Exemple de balise avec attributs spécifiques :

L’attribut « id » permet d’IDentifier la balise. Sa valeur est

La validation W3C peut s’effectuer sur le site du W3C à l’adresse

Langages script client : « DOM » et JavaScript

Le Document Object Model, le « DOM », est une recommandation du

Le « DOM » propose de représenter un document sous la forme d’un

Exemple de représentation du « DOM » :

<p> <p> <p>

Bonjour! Bonjour toujours!

Bonjour encore! noeud de texte

C’est un langage orienté objet. Un objet est une représentation

Prenons l’exemple d’une pomme :

Une pomme est décrite dans une classe. Exemple en Javascript :

Quelles sont les propriétés générales d’une pomme ? Propriétés :

Quelles sont les méthodes associées à une pomme ? Méthode : « la

On peut désormais créer des objets pomme dans la mémoire. C’est

- Instanciation d’une pomme verte :

- Instanciation d’une pomme pourrie :

Il existe donc deux objets « pommes » dans la mémoire. Je peux

On peut créer autant d’objets « pomme » que l’on souhaite et les

Un ver à des propriétés et des méthodes. Il sera donc possible

En JavaScript, l’objet représentant l’arbre « DOM » est instancié

- des « propriétés » dans lesquelles sont contenues les différentes

- des « méthodes » qui sont des fonctions permettant de modifier

Arbre « DOM » associé :

<p> <p> <p>

Bonjour! Bonjour toujours!

Par exemple, si je souhaite accéder à la propriété « title » de mon

Si je souhaite exécuter la méthode « createElement() »

Dans l’objet « document », chaque nœud est un objet. On

Les balises en HTML peuvent être identifiées par l’attribut « id ». La

AJAX signifie Asynchronous JavaScript And Xml, et, en

NOTION DE FONCTIONNEMENT SYNCHRONE

 Le(s) client(s) et le(s) serveur(s) ne sont pas actifs

Lorsque le client émet une « requête HTTP », il devient inactif