AJAX

Directed by :Mohamed Essakouri

 INTRODUCTION

Fonctionnement d'AJAX

Plan
Exemple d'utilisation
d'AJAX

Avantages et Inconvénients

Conclusion
1-
introduction
 introduction
AJAX signifie Asynchronous JavaScript and
XML. C'est une technologie web qui permet
d'échanger des données avec un serveur sans
recharger la page web.

En quoi AJAX est différent des méthodes

traditionnelles de développement web ?

Les méthodes traditionnelles de

développement web nécessitent de recharger la
page web pour mettre à jour les données. Cela
peut être lent et frustrant pour les utilisateurs.
AJAX permet de mettre à jour les données de
la page web sans la recharger. Cela permet de
rendre les sites web plus interactifs et fluides.

2023 Ajax 4
 Quels sont les
composants d'AJAX ?
JavaScript : un langage de script côté client
JavaScript est utilisé pour créer le code qui
envoie les requêtes HTTP au serveur et
traite les
réponses.

XML : un langage de balisage

XML est utilisé pour transporter les données
entre le client et le serveur.

HTTP : le protocole de communication

utilisé pour les échanges de données sur le
web
HTTP est utilisé pour envoyer les requêtes
HTTP au serveur et recevoir les réponses.

2023 Ajax 5
2-
Fonctionnement
d'AJAX
 Fonctionnement d'AJAX
• Une requête AJAX est initiée par un événement utilisateur, tel qu'un clic
sur un bouton ou un changement de sélection.
• Le code JavaScript associé à l'événement crée un objet
XMLHttpRequest.
• L'objet XMLHttpRequest est utilisé pour envoyer une requête HTTP au
serveur.
• Le serveur répond à la requête en renvoyant des données au client.
• Le code JavaScript reçoit les données du serveur et les traite.
• Le code JavaScript met à jour la page web en fonction des données
reçues du serveur

2023 Ajax 7
 Classic vs AJAX
Classic :
Les applications web classiques utilisent un modèle simple de
demande et de réponse. Lorsqu'un utilisateur interagit avec la
page, le navigateur envoie une demande au serveur pour la page
entière. Le serveur génère la page entière et la renvoie au
navigateur. Le navigateur remplace ensuite l'ancienne page par
la nouvelle page. Cela peut rendre l'application lente et
maladroite, surtout si l'utilisateur n'interagit qu'avec une petite
partie de la page.

2023 Ajax 8
 Classic vs AJAX
AJAX :
Les applications web AJAX, quant à elles, utilisent un modèle
de communication asynchrone. Lorsqu'un utilisateur interagit
avec la page, le navigateur envoie une demande au serveur pour
seulement les données dont il a besoin. Le serveur génère les
données et les renvoie au navigateur. Le navigateur met ensuite
à jour la page avec les nouvelles données sans avoir à recharger
la page entière. Cela peut rendre l'application beaucoup plus
rapide et réactive.

2023 Ajax 9
 Classic vs
AJAX

2023 Ajax 10
 1-XMLHttpRequest object
• Un élément de page doit effectuer un appel javascript
• La fonction javascript doit créer un objet XMLHttpRequest
qui sert à contacter le serveur
• Javascript doit déterminer si le client est IE ou Firefox :

• http = new ActiveXObject("Microsoft.XMLHTTP"); (IE)

• http = new XMLHttpRequest(); (Mozilla)

2023 Ajaxe 11
 2-Sending the request
• Une fois l'objet XMLHttpRequest créé, il doit être configuré pour appeler
le serveur
• http.open("GET", serverurl, true);
• http.onreadystatechange = jsMethodToHandleResponse;http.send(null);
• Le code ci-dessus utilise l'objet XMLHttpRequest pour contacter le serveur
et récupérer les données du serveur.
• Lorsque la réponse renvoie la méthode javascript,
jsMethodToHandleResponse peut mettre à jour la page.

2023 Ajax 12
 3-Handling the Response
• Implémentation de la méthode javascript qui sera utilisée pour gérer la
réponse (Event Handler)
• function jsMethodToHandleResponse(str){
// prenez simplement la réponse renvoyée, mettez à jour un html element avec
la valeur renvoyée par le
serverdocumept.getElementByld("result").innerHTML str; }
• La page a désormais communiqué avec le serveur sans avoir à
actualiser l'intégralité de la page.

2023 Ajax 13
20XX presentation title 14
3-
Exemple
d'utilisation
d'AJAX
 Exemple
• Un exemple d'utilisation d'AJAX est la mise à jour d'une liste
déroulante en fonction de la sélection d'une autre liste
déroulante.
• Par exemple, une liste déroulante peut être utilisée pour
sélectionner une marque de voiture. Une autre liste déroulante
peut ensuite être utilisée pour afficher les modèles de voiture
disponibles pour la marque sélectionnée.

2023 Ajax 16
 Exemple
• Gmail
• Facebook
• Google Maps
• Twitter
• YouTube

2023 Ajax 17
4-
Avantages et
Inconvénients
 Avantages et Inconvénients
Parmi les Avantages :
• AJAX permet de rendre les sites web plus interactifs et
fluides.
• AJAX permet de réduire le temps de chargement des pages
web.
• AJAX permet d'améliorer l'accessibilité des sites web.

2023 Ajax 19
 Avantages et Inconvénients
Parmi les Inconvénients :

• AJAX peut être difficile à apprendre et à utiliser.

• AJAX peut être moins sécurisé que les techniques
traditionnelles de développement web.

2023 Ajax 20
Conclusion
 Conclusion
Les bibliothèques AJAX :
• Il existe de nombreuses bibliothèques AJAX disponibles,
telles que jQuery, YUI et Dojo.
• Les bibliothèques AJAX peuvent simplifier l'utilisation
d'AJAX et fournir des fonctionnalités supplémentaires, telles
que la validation des données et l'animation

2023 Ajax 22
 Conclusion
• AJAX est une technologie puissante qui permet de créer des
sites web plus interactifs et fluides.
• AJAX est une technologie en constante évolution, et de
nouvelles fonctionnalités sont ajoutées régulièrement.
• Diapositives supplémentaires

2023 Ajax 23
20XX presentation title 24
timeline
NOV 20XX
disseminate standardized metrics

SEP 20XX
synergize scalable e-commerce

JAN 20XX
coordinate e-business applications

MAR 20XX MAY 20XX

foster holistically superior deploy strategic networks with
methodologies compelling e-business needs
 areas of focus
B2B MARKET SCENARIOS
o Develop winning strategies to keep ahead of the competition
o Capitalize on low-hanging fruit to identify a ballpark value
o Visualize customer directed convergence​

CLOUD-BASED OPPORTUNITIES
o Iterative approaches to corporate strategy
o Establish a management framework from the inside

20XX presentation title 26

 how we get there
ROI NICHE MARKETS SUPPLY CHAINS

o Envision multimedia- o Pursue scalable customer o Cultivate one-to-one

based expertise and cross- service through customer service with
media growth strategies sustainable strategies robust ideas

o Visualize quality o Engage top-line web o Maximize timely

intellectual capital services with cutting-edge deliverables for real-time
deliverables schemas
o Engage worldwide
methodologies with web-
enabled technologies

20XX presentation title 27

 summary
At Contoso, we believe in giving 110%. By
using our next-generation data architecture, we
help organizations virtually manage
agile workflows. We thrive because of our
market knowledge and great team behind our
product. As our CEO says, "Efficiencies will
come from proactively transforming how we
do business."​

20XX presentation title 28

thank you
mirjam nilsson
mirjam@contoso.com
www.contoso.com