Le document présente AJAX, une technique permettant de lire, envoyer et mettre à jour des données sur le web sans recharger la page. Il décrit le fonctionnement de l'objet XMLHttpRequest et de l'API Fetch, en se concentrant sur les méthodes pour envoyer des requêtes asynchrones et gérer les réponses du serveur. Enfin, il explique les différences entre les requêtes GET et POST ainsi que leur utilisation appropriée.

1. Présentation d'AJAX
AJAX est le rêve d'un développeur, car vous pouvez :
• Lire les données d'un serveur Web - après le chargement de la page
• Mettre à jour une page Web sans recharger la page
• Envoyer des données à un serveur Web - en arrière-plan
Exemple AJAX expliqué
La page HTML contient une section <div> et un <bouton>.
La section <div> est utilisée pour afficher les informations d'un serveur.
Le <bouton> appelle une fonction (s'il est cliqué).
La fonction demande des données à un serveur Web et les affiche :
Formateur Jaouad Assabbour

2. Qu'est-ce qu'AJAX ?
AJAX = Un J avaScript A synchrone et X ML.
AJAX n'est pas un langage de programmation.
AJAX utilise simplement une combinaison de :
• Un objet intégré au navigateur XMLHttpRequest (pour demander des
données à un serveur Web)
• JavaScript et HTML DOM (pour afficher ou utiliser les données)
AJAX permet aux pages Web d'être mises à jour de manière asynchrone en
échangeant des données avec un serveur Web en arrière-plan. Cela signifie qu'il est
possible de mettre à jour des parties d'une page Web, sans recharger toute la page.
Formateur Jaouad Assabbour

3. Comment fonctionne AJAX
Formateur Jaouad Assabbour

4. Navigateurs modernes (Fetch API)
Les navigateurs modernes peuvent utiliser l'API Fetch au lieu de l'objet
XMLHttpRequest.
L'interface Fetch API permet au navigateur Web de faire des requêtes HTTP aux
serveurs Web.
Si vous utilisez l'objet XMLHttpRequest, Fetch peut faire la même chose de manière
plus simple.
AJAX - L'objet XMLHttpRequest
La clé de voûte d'AJAX est l'objet XMLHttpRequest.
1. Créer un objet XMLHttpRequest
2. Définir une fonction de rappel
3. Ouvrez l'objet XMLHttpRequest
4. Envoyer une requête à un serveur
L'objet XMLHttpRequest
Tous les navigateurs modernes prennent en charge l' objet XMLHttpRequest.
L' objet XMLHttpRequest peut être utilisé pour échanger des données avec un
serveur Web en arrière-plan. Cela signifie qu'il est possible de mettre à jour des
parties d'une page Web, sans recharger toute la page.
Créer un objet XMLHttpRequest
Tous les navigateurs modernes (Chrome, Firefox, IE, Edge, Safari, Opera) ont un
objet XMLHttpRequest intégré.
Syntaxe pour créer un objet XMLHttpRequest :
Formateur Jaouad Assabbour

5. Définir une fonction de rappel
Une fonction de rappel est une fonction passée en paramètre à une autre fonction.
Dans ce cas, la fonction de rappel doit contenir le code à exécuter lorsque la réponse
est prête.
Envoyer une demande
Pour envoyer une requête à un serveur, vous pouvez utiliser les méthodes open() et
send() de l'objet XMLHttpRequest :
Exemple :
Formateur Jaouad Assabbour

6. Accès à travers les domaines
Pour des raisons de sécurité, les navigateurs modernes n'autorisent pas l'accès entre
les domaines.
Cela signifie que la page Web et le fichier XML qu'elle tente de charger doivent se
trouver sur le même serveur.
La propriété onload
Avec l' objet XMLHttpRequest, vous pouvez définir une fonction de rappel à
exécuter lorsque la demande reçoit une réponse.
La fonction est définie dans la propriété onload de l'objet XMLHttpRequest:
Fonctions de rappel multiples
Si vous avez plusieurs tâches AJAX dans un site Web, vous devez créer une
fonction pour exécuter l' objet XMLHttpRequest et une fonction de rappel
pour chaque tâche AJAX.
L'appel de fonction doit contenir l'URL et la fonction à appeler lorsque la
réponse est prête.
Formateur Jaouad Assabbour

7. La propriété onreadystatechange
La propriété readyState contient le statut de XMLHttpRequest.
La propriété onreadystatechange définit une fonction de rappel à exécuter
lorsque le readyState change.
La propriété status et les propriétés statusText contiennent le statut de l'objet
XMLHttpRequest.
Formateur Jaouad Assabbour

8. La fonction onreadystatechange est appelée chaque fois que readyState
change.
Lorsque readyState est égal à 4 et que l'état est égal à 200, la réponse est prête :
Formateur Jaouad Assabbour

9. AJAX - XMLHttpRequest
L'objet XMLHttpRequest est utilisé pour demander des données à un serveur.
Envoyer une requête à un serveur
Pour envoyer une requête à un serveur, on utilise les méthodes open() et
send() de l' objet XMLHttpRequest :
L'url - Un fichier sur un serveur
Le paramètre url de la méthode open() est une adresse vers un fichier sur un
serveur :
Formateur Jaouad Assabbour

10. Le fichier peut être n'importe quel type de fichier, comme .txt et .xml, ou des fichiers
de script de serveur comme .asp et .php (qui peuvent effectuer des actions sur le
serveur avant de renvoyer la réponse).
Asynchrone - Vrai ou Faux ?
Les requêtes du serveur doivent être envoyées de manière asynchrone.
Le paramètre async de la méthode open() doit être défini sur true :
En envoyant de manière asynchrone, le JavaScript n'a pas à attendre la réponse
du serveur, mais peut à la place :
• exécuter d'autres scripts en attendant la réponse du serveur
• traiter la réponse une fois que la réponse est prête
OBTENIR ou POSTER ?
GET est plus simple et plus rapide que POST, et peut être utilisé dans la plupart
des cas.
Cependant, utilisez toujours les requêtes POST lorsque :
• Un fichier en cache n'est pas une option (mettre à jour un fichier ou une
base de données sur le serveur).
• Envoi d'une grande quantité de données au serveur (POST n'a pas de
limitation de taille).
Formateur Jaouad Assabbour

11. • En envoyant des entrées utilisateur (qui peuvent contenir des caractères
inconnus), POST est plus robuste et sécurisé que GET.
Requêtes GET
Une simple demande GET :
Dans l'exemple ci-dessus, vous pouvez obtenir un résultat mis en cache. Pour éviter
cela, ajoutez un identifiant unique à l'URL :
Si vous souhaitez envoyer des informations avec la méthode GET, ajoutez les
informations à l'URL :
La manière dont le serveur utilise l'entrée et la manière dont le serveur répond à une
requête est expliquée dans un chapitre ultérieur.
Demandes POST
Une simple demande POST :
Formateur Jaouad Assabbour

12. Pour POSTER des données comme un formulaire HTML, ajoutez un en-tête HTTP
avec setRequestHeader(). Spécifiez les données que vous souhaitez envoyer
dans la méthode send() :
Requête synchrone
Pour exécuter une requête synchrone, changez le troisième paramètre de la méthode
open() en false:
Parfois async = false sont utilisés pour des tests rapides. Vous trouverez également
des requêtes synchrones dans l'ancien code JavaScript.
Formateur Jaouad Assabbour

13. Étant donné que le code attendra la fin du serveur, aucune fonction
onreadystatechange n'est nécessaire :
AJAX - Réponse du serveur
Propriétés de la réponse du serveur
La propriété responseText
La propriété responseText renvoie la réponse du serveur sous forme de
chaîne JavaScript et vous pouvez l'utiliser en conséquence :
Formateur Jaouad Assabbour

14. La propriété responseXML
L'objet XMLHttpRequest a un analyseur XML intégré.
La propriété responseXML renvoie la réponse du serveur sous la forme d'un
objet DOM XML.
À l'aide de cette propriété, vous pouvez analyser la réponse en tant qu'objet
DOM XML :
Méthodes de réponse du serveur
La méthode getAllResponseHeaders()
La méthode getAllResponseHeaders() renvoie toutes les informations d'en-
tête de la réponse du serveur.
Formateur Jaouad Assabbour

15. La méthode getResponseHeader()
La méthode getResponseHeader() renvoie des informations d'en-tête
spécifiques à partir de la réponse du serveur.
Exemple XMLAJAX
Formateur Jaouad Assabbour