Acadig.

com
Académie du Digital

AJAX et la Programmation
Asynchrone en JavaScript
Acadig.com
Académie du Digital

AJAX et Programmation Asynchrone

Votre Formateur

Camel Djoulako
Software Engineer Web, Mobile, Desktop
Camel,djoulako@homedeve.com

@cameldjoulako
 Sommaire

1 Interrogation des services distants

2 Les techniques AJAX
3 Modification du contenu des pages web avec les
réponses
 Prérequis

1 Pratique du JavaScript
2 Connaissance de base en HTML et
CSS
3 Javascript: syntaxe, conditions, boucle, événements,
etc,
4 Connaissance de base du DOM et de ses
manipulations
 Outils

1 Navigateur
2 Visual Studio Code
3 Docker Desktop
4 Extensions: - French Language Pack for Visual Studio
Code
- Live server (petit serveur http)
AJAX – Perspectives
historique
 AJAX

• Asynchronous JavaScript And XML

• Microsoft en 1998
• XMLHttpRequest (XHR)
 AJAX - Historique

• XMLHttpRequest lourd et difficile à utilisé

• Remplacé par fetch() à partir de 2015
• XMLHttpRequest et fetch supportés de nos jours par tous les
navigateurs
 AJAX - Historique

• XMLHttpRequest maintenu pour : Compatibilité rétroactive

• fetch(): méthode préféré des développeurs modernes
• Dans cette formation: les deux méthodes
 XML ET JSON

• X de AJAX = XML
• Réponse à une requête AJAX en XML (avant)
• JSON(JavaScript Object Notation) à la place de XML
• Le terme AJAX(X = XML) est resté malgré tout
Comprendre le principe de l’AJAX
 Une requête HTTP classique
Le processus se répète à chaque clic !
 Problème d’une requête classique

• Eléments similaire de page en page a chaque envoi de requête

• Ce processus bloque la page web
• Requête HTTP parfois très lentes
Une requête HTTP AJAX
 Avantages d’une requête AJAX

• Réponse beaucoup plus légère

• Processus en arrière-plan => pas de blocage de la page
• Programmation asynchrone
• Application légère et réactive
Plusieurs requêtes AJAX
 Programmation asynchrone

• Ordre de réponse aléatoire

• Déclenchement du bon traitement
Les fonctions de rappel
 Fonctions de rappel

• Explication du traitement à déclencher

• processContact()=> réponse a la demande de contact
• processSearch()=> réponse au moteur de recherche
• => Programmation asynchrone
• processContact() / processSearch() : des fonction de rappel ou
callback function
 Service web à utiliser

• Pour cette formation, nous utilisons le serve web: OpenWeather

Map
• Un service web de météo dans le monde
• https://openweathermap.org/
• Clé api: e72f2b4322f7b47a42bc12dccb8b8333
Rappels
 Fonction Anonyme

• Les fonctions anonymes sont des fonctions sans nom.

• Elles sont déclarées à la volée et sont souvent utilisées comme
arguments de fonctions ou pour encapsuler du code.

// Déclaration et appel d'une fonction anonyme

let result = (function() {
return "Je suis une fonction anonyme!";
})();
console.log(result); // Affiche : "Je suis une fonction anonyme!"
Fonction Fléchée (Arrow Function)

• Les fonctions fléchées sont une nouvelle syntaxe concise pour

définir des fonctions en JavaScript. Elles sont particulièrement
utiles pour les fonctions courtes.

// Déclaration d'une fonction fléchée

const add = (a, b) => a + b;
console.log(add(3, 5)); // Affiche : 8
 Template Literal et Interpolation

• Les fonctions fléchées sont une nouvelle syntaxe concise pour

définir des fonctions en JavaScript. Elles sont particulièrement
utiles pour les fonctions courtes.

// Déclaration d'une fonction fléchée

const add = (a, b) => a + b;
console.log(add(3, 5)); // Affiche : 8
Les Promesses
 Promise

Une promesse représente une valeur qui peut être disponible

maintenant, dans le futur, voire jamais.
 Principe des promesses
• Alarme sans fil = promesse
• Quand?
• Dans quel ordre
• Commande prête => promesse résolue
 Promesses en JavaScript

• Une requêtes = une promesse

• Succès => Promesse résolue => fonction de rappel
• Echec => Promesse rejetée => autre fonction de rappel
 Dans la pratique

• Promise.state
• Pending(en attente)
• Fulfilled(accomplie)
• Rejected(rejetée)
 Dans la pratique

• Promise.value
• Fulfilled => données renvoyées par le serveur
• Rejected => objet erreur