Présentation d'AJAX
AJAX est le rêve d'un développeur, car vous pouvez :
- Mettre à jour une page Web sans recharger la page
- Demander des données à un serveur - après le chargement de la page
- Recevoir des données d'un serveur - après le chargement de la page
- Envoyer des données à un serveur - en arrière-plan
Essayez-le vous-même Exemples dans chaque chapitre
Dans chaque chapitre, vous pouvez éditer les exemples en ligne, et cliquer sur un bouton pour voir le résultat.
Exemple AJAX
Let AJAX change this text
Exemple AJAX expliqué
Page HTML
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
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 :
Fonction loadDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Le fichier "ajax_info.txt" utilisé dans l'exemple ci-dessus est un simple fichier texte et ressemble à ceci :
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
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 XMLHttpRequest intégré au navigateur (pour demander des données à un serveur Web)
- JavaScript et HTML DOM (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 toute la page.
Comment fonctionne AJAX
- 1. Un événement se produit dans 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 requête à un serveur Web
- 4. Le serveur traite la requête
- 5. Le serveur renvoie une réponse à la page Web
- 6. La réponse est lue par JavaScript
- 7. L'action appropriée (comme la mise à jour de la page) est effectuée par JavaScript