Slide 1 

:
Ajax est une abréviation de "Asynchronous JavaScript and XML", ou JavaScript et XML
asynchrones en français. C'est une technique de programmation qui permet aux
pages web de communiquer avec des serveurs en arrière-plan sans avoir à recharger
la page entière. Cela signifie que les utilisateurs peuvent interagir avec les éléments
d'une page sans avoir à attendre le rechargement de la page.

Ajax a été introduit en 2005 par Jesse James Garrett, et il est rapidement devenu une
technique populaire pour le développement de sites web dynamiques. Les principaux
avantages d'Ajax sont:

1. Rapidité: Les interactions entre l'utilisateur et le serveur sont beaucoup plus rapides
grâce à Ajax car seules les parties de la page qui ont besoin d'être mises à jour sont
actualisées.
2. Convivialité: Les utilisateurs peuvent interagir avec la page sans avoir à attendre le
rechargement complet de la page, ce qui améliore l'expérience utilisateur.
3. Facilité de développement: Ajax est relativement facile à apprendre et à implémenter
dans des projets web.

Comment fonctionne Ajax?

Ajax fonctionne en utilisant des requêtes asynchrones pour envoyer des données vers
un serveur en arrière-plan, qui peut ensuite traiter les données et renvoyer une
réponse. Ces requêtes sont effectuées à l'aide de l'objet XMLHttpRequest, qui permet
au code JavaScript de communiquer avec le serveur en arrière-plan.

Les données renvoyées par le serveur peuvent être formatées en XML, JSON ou
d'autres formats de données, qui peuvent ensuite être utilisés pour mettre à jour les
parties de la page appropriées.

Exemple d'utilisation d'Ajax:

Supposons que vous avez un formulaire de contact sur votre site web et que vous
voulez permettre aux utilisateurs d'envoyer des messages sans recharger la page
entière. Vous pouvez utiliser Ajax pour envoyer les données du formulaire au serveur
en arrière-plan et afficher un message de confirmation sur la page sans recharger la
page entière.

Conclusion:

Ajax est une technique de programmation puissante qui permet aux sites web d'être
plus rapides, plus conviviaux et plus dynamiques. Bien qu'il puisse y avoir des défis
 lors de l'implémentation d'Ajax, les avantages qu'il offre en valent généralement la
peine. Si vous cherchez à améliorer l'expérience utilisateur sur votre site web, Ajax
peut être une excellente solution.

Slide 2 :
Ajax est une technologie web qui permet de créer des applications interactives en
utilisant JavaScript, XML, HTML et CSS. Les technologies qui sont souvent utilisées
conjointement avec Ajax incluent :

1. JavaScript : Ajax utilise principalement JavaScript pour envoyer des requêtes et

recevoir des réponses du serveur sans avoir à recharger la page entière.
2. XML : Ajax utilise souvent XML pour transférer des données entre le client et le
serveur de manière asynchrone. Cependant, JSON est également largement utilisé
comme format de données.
3. HTML : Ajax utilise HTML pour afficher les résultats des requêtes, généralement en
mettant à jour des éléments spécifiques de la page plutôt que la page entière.
4. CSS : Ajax utilise CSS pour styliser les éléments mis à jour lorsqu'une requête est
effectuée, afin de maintenir l'aspect cohérent de la page.
5. API : Ajax peut utiliser des API pour accéder à des services tiers et récupérer des
données.
6. Serveur : Ajax nécessite un serveur web pour répondre aux requêtes du client et
envoyer des réponses en XML ou JSON.
7. Frameworks : Des frameworks tels que jQuery, React et [Link] offrent des
fonctionnalités Ajax simplifiées pour faciliter le développement de pages web
dynamiques.

Slide 3 :
Ajax (Asynchronous JavaScript and XML) est une technique de développement web
qui permet de mettre à jour une partie d'une page web sans avoir à recharger toute
la page. Elle repose sur l'utilisation de plusieurs technologies web, notamment
JavaScript, XML (ou JSON), et XMLHttpRequest (XHR).

Voici un aperçu général du fonctionnement d'Ajax :

1. L'utilisateur interagit avec une page web et déclenche une action (par exemple, en
cliquant sur un bouton).
2. Le code JavaScript sur la page web envoie une requête HTTP (XMLHttpRequest) au
serveur web en utilisant une méthode telle que GET ou POST.
3. Le serveur web reçoit la requête et la traite, en générant une réponse. Cette réponse
peut être au format XML, JSON ou HTML, selon les besoins.
4. Le serveur web renvoie la réponse à la page web.
5. Le code JavaScript sur la page web reçoit la réponse et met à jour la partie de la page
qui doit être mise à jour, en utilisant les données de la réponse.
6. L'utilisateur voit la mise à jour de la page web sans avoir à recharger toute la page.

Le principal avantage d'Ajax est qu'il permet de rendre les pages web plus
dynamiques et plus interactives, ce qui améliore l'expérience utilisateur. Il permet
également de réduire la quantité de données qui doivent être échangées entre le
navigateur et le serveur, ce qui peut réduire les temps de chargement et la bande
passante nécessaire.
Slide 5 :
Bien sûr, voici quelques exemples d'applications qui utilisent AJAX pour fournir une
expérience utilisateur plus fluide :

1. Google Maps : Google Maps utilise AJAX pour charger les cartes et les informations
sur les emplacements en temps réel, sans recharger la page. Cela permet aux
utilisateurs de naviguer rapidement sur les cartes et de voir les informations qu'ils
recherchent sans attendre le rechargement de la page.
2. Gmail : Gmail utilise AJAX pour charger les e-mails et les informations de boîte de
réception en temps réel. Les utilisateurs peuvent cliquer sur des messages individuels
et les afficher sans avoir besoin de recharger la page.
3. Twitter : Twitter utilise AJAX pour charger de nouveaux tweets et pour permettre aux
utilisateurs de poster des tweets sans avoir besoin de recharger la page.
4. Trello : Trello utilise AJAX pour mettre à jour les tableaux en temps réel et pour
permettre aux utilisateurs de modifier les cartes et de les déplacer sur le tableau sans
avoir besoin de recharger la page.
5. Airbnb : Airbnb utilise AJAX pour permettre aux utilisateurs de rechercher des
hébergements en temps réel, sans recharger la page. Les utilisateurs peuvent voir des
résultats de recherche instantanément et filtrer les résultats en fonction de leurs
préférences.

Ces exemples montrent comment AJAX peut améliorer l'expérience utilisateur en

permettant aux applications web de fonctionner de manière plus fluide et plus
interactive, sans avoir besoin de recharger la page à chaque action de l'utilisateur.
Slide 7 :
1. Expliquer les éléments techniques : Pour que votre présentation sur Ajax soit
complète, il est important d'expliquer les éléments techniques de cette technologie,
notamment le langage JavaScript, le protocole HTTP, le format XML et la méthode
XMLHttpRequest.
 1) l’objet xmlhttprequest:
L'objet XMLHttpRequest (XHR) est un objet JavaScript qui permet
d'effectuer des requêtes HTTP asynchrones depuis une page web sans
avoir à recharger la page. Il est généralement utilisé dans le cadre de la
technique Ajax (Asynchronous JavaScript and XML), qui permet de mettre
à jour dynamiquement une partie de la page sans avoir à la recharger
entièrement.

L'objet XMLHttpRequest permet d'envoyer une requête HTTP (par

exemple une requête GET ou POST) à un serveur web et de recevoir la
réponse en format texte, XML, JSON ou autre. L'objet XHR utilise une
interface simple pour gérer les requêtes et les réponses, permettant ainsi
aux développeurs de créer des applications web plus dynamiques et
interactives.
Pour créer un objet XMLHttpRequest, on peut utiliser la méthode XMLHttpRequest() du
constructeur XMLHttpRequest. Voici un exemple :

const xhr = new XMLHttpRequest();

[Link] = function() { if ([Link] === 4 &&
[Link] === 200) { [Link]([Link]); } };
[Link]('GET', '[Link] true);
[Link]();
Voici les étapes pour créer une requête Ajax avec l'objet
XMLHttpRequest et ses différentes méthodes :

1. Créez une instance de l'objet XMLHttpRequest en utilisant la

syntaxe suivante :
1. Configurez la requête en utilisant les méthodes open() et
setRequestHeader() :
 open() : Cette méthode initialise la requête en spécifiant le type de méthode de requête HTTP (GET, POST, etc.) et l'URL du fichier sur le serveur qui sera chargé.
La syntaxe est la suivante :

python
 open() : Cette méthode initialise la requête en spécifiant le
type de méthode de requête HTTP (GET, POST, etc.) et l'URL du
fichier sur le serveur qui sera chargé. La syntaxe est la suivante :
 setRequestHeader() : Cette méthode définit les en-têtes HTTP de la requête, tels
que l'en-tête Content-Type qui spécifie le type de données envoyées. La syntaxe est
la suivante :
1. Envoyez la requête en utilisant la méthode send(). Si vous envoyez des données, vous
pouvez les inclure en tant que paramètre de la méthode send(). La syntaxe est la suivante :
1. Utilisez la méthode onreadystatechange pour définir une fonction de rappel qui sera
exécutée chaque fois que l'état de la requête change. La méthode readyState indique
l'état actuel de la requête et la propriété status contient le code d'état HTTP de la réponse.
La syntaxe est la suivante :
2.
1. Traitez la réponse dans la fonction de rappel. La réponse peut être un texte brut, une réponse
JSON ou un document XML, selon le type de données renvoyées par le serveur .


Slide : reponce ajax:

a réponse du serveur AJAX peut contenir différentes propriétés, selon ce que le serveur renvoie.
L

Voici quelques-unes des propriétés les plus courantes :

1.
status : un code de statut HTTP indiquant si la demande a réussi ou échoué. Les codes de statut
courants incluent 200 (OK), 404 (introuvable) et 500 (erreur interne du serveur).
2.
3.
responseText : la réponse du serveur sous forme de texte brut.
4.
5.
responseXML : la réponse du serveur sous forme d'un objet XML.
6.
7.
readyState : un indicateur de l'état de la demande. Les valeurs courantes sont 0 (non initialisé),
1 (ouvert), 2 (envoyé), 3 (en cours) et 4 (terminé).
8.
9.
headers : les en-têtes de réponse renvoyés par le serveur.
10.
11.
statusText : une description textuelle du code de statut HTTP.
12.
13.
responseType : le type de données que le serveur renvoie, qui peut être text, json, xml, etc.
14.
15.
timeout : le délai d'attente en millisecondes avant que la demande ne soit considérée comme
ayant échoué.
16.

Ces propriétés sont généralement utilisées dans la fonction de rappel de la demande AJAX pour
traiter la réponse du serveur et prendre des mesures appropriées en fonction de son contenu.

Slide :
la defferent entre synchronos requete ou non

La principale différence entre une requête synchrone et une requête asynchrone réside dans la
manière dont l'application gère la réponse du serveur.

Une requête synchrone est bloquante, ce qui signifie que l'application attend la réponse du serveur
avant de continuer à exécuter d'autres instructions. Cela peut entraîner des temps d'attente importants
pour les utilisateurs, en particulier si la réponse du serveur est lente.

D'un autre côté, une requête asynchrone ne bloque pas l'application et permet à celle-ci de continuer
à exécuter d'autres instructions en attendant la réponse du serveur. Cela permet une expérience
utilisateur plus fluide et réactive, car les utilisateurs peuvent continuer à interagir avec l'application
pendant que celle-ci attend la réponse du serveur.

En résumé, une requête synchrone est plus appropriée pour des tâches qui nécessitent une réponse
immédiate du serveur, tandis qu'une requête asynchrone est plus appropriée pour des tâches qui
peuvent prendre du temps pour recevoir une réponse du serveur, sans bloquer l'application.

Slide F: