Introduction à AJAX

AJAX est un rêve pour les développeurs, car il permet de :

  • Lire des données depuis un serveur web après le chargement de la page
  • Mettre à jour une page web sans avoir à la recharger
  • Envoyer des données à un serveur web en arrière-plan

Exemple AJAX

Laissez AJAX changer ce texte

Essayez-le vous-même »

Exemple AJAX expliqué

Page HTML

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>Laissez AJAX changer ce texte</h2>
<button type="button" onclick="loadDoc()">Changer le contenu</button>
</div>

</body>
</html>

La page HTML contient une section <div> et un <button>.

La section <div> est utilisée pour afficher des informations provenant d'un serveur.

Le <button> appelle une fonction lorsqu'il est cliqué.

La fonction demande des données à un serveur web et les affiche :

Fonction loadDoc()

function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}

Qu'est-ce que AJAX ?

AJAX = A synchronisé J avaScript A nd 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 le DOM HTML pour afficher ou utiliser les données

AJAX est un nom trompeur. Les applications AJAX peuvent utiliser XML pour transporter des données, mais il est tout aussi courant de transporter des données sous forme de texte brut ou de texte JSON.

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 la page entière.

Comment fonctionne AJAX

AJAX

  • 1. Un événement se produit sur une page web (la page est chargée, un bouton est cliqué)
  • 2. Un objet XMLHttpRequest est créé par JavaScript
  • 3. L'objet XMLHttpRequest envoie une demande à un serveur web
  • 4. Le serveur traite la demande
  • 5. Le serveur renvoie une réponse à la page web
  • 6. La réponse est lue par JavaScript
  • 7. Une action appropriée (comme la mise à jour de la page) est effectuée par JavaScript

Navigateurs modernes (Fetch API)

Les navigateurs modernes peuvent utiliser l'API Fetch au lieu de l'objet XMLHttpRequest.

L'interface Fetch API permet aux navigateurs web de faire des requêtes HTTP aux serveurs web.

Si vous utilisez l'objet XMLHttpRequest, Fetch peut accomplir la même tâche de manière plus simple.