Tutoriel de base AJAX

Introduction à AJAX

AJAX permet de mettre à jour le contenu du site Web "asynchrone" en échangeant des données avec le serveur Web en arrière-plan.

Ce qui signifie que vous pouvez mettre à jour certaines parties de la page Web sans recharger l'ensemble de la page.

Avec AJAX, vous pouvez :

Envoyer des données au serveur Web (en arrière-plan)
Lire des données du serveur Web (après le chargement de la page)
Mettre à jour la page Web sans recharger la page

Exemple AJAX

Le code suivant montre un exemple de base d'AJAX :

AJAX mettra à jour ce texte

Exécuter le code

Explication de l'exemple AJAX

L'exemple ci-dessus inclut les éléments suivants :

Code HTML :

　　<!DOCTYPE　html>
　　<html>
　　
　　<div id="output">
　　<h2>AJAX mettra à jour ce texte</h2>
　　<button onclick="fetchDoc()" type="button">Envoyer la requête</button>
　　</div>
　　
　　</html>

Le code HTML contient un<div>partie (<h2>et<button>)

le<DIV>partie est utilisée pour afficher les informations provenant du serveur.

le<button>Appeler une fonction (au clic).

Cette fonction demande des données au serveur Web et les affiche (sans recharger la page) :

Fonction fetchDoc() :

　　function　fetchDoc()　{
　　var　httpRequest　=　new　XMLHttpRequest();
　　httpRequest.onreadystatechange　=　function()　{
　　　if　(this.readyState　===　4　&&　this.status　===　200) {}}
　　　　document.getElementById("output").innerHTML = this.responseText;
　　　}
　　};
　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();
　　}

Qu'est-ce que AJAX ?

AJAX signifie “Asynchronous Javascript And XML” (JavaScript et XML asynchrones).

AJAX n'est pas un langage de programmation, c'est une technologie utilisée pour accéder aux serveurs web à partir d'une page web.

AJAX vous permet d'envoyer une requête au serveur sans recharger la page.

AJAX peut communiquer avec le serveur, échanger des données et mettre à jour la page sans actualiser la page.

AJAX peut envoyer et recevoir divers formats d'informations, y compris JSON, XML, HTML et fichiers texte.

En résumé, il s'agit d'utiliser l'objet XMLHttpRequest pour communiquer avec le serveur.

Les deux principales fonctionnalités d'AJAX vous permettent d'effectuer les opérations suivantes :

Envoyer une requête au serveur sans recharger la page
Recevoir et traiter des données du serveur

Comment fonctionne AJAX ?

Pour effectuer une communication AJAX, JavaScript utilise un objet XMLHttpRequest pour envoyer une requête HTTP au serveur et recevoir des données en réponse.

Tous les navigateurs modernes (Chrome, Firefox, IE7 +et Opera) prennent en charge l'objet XMLHttpRequest.

La figure suivante explique comment fonctionne la communication AJAX :

Étapes de l'opération AJAX

Un événement s'est produit dans la page web (par exemple, le chargement de la page ou un clic sur un bouton)
L'objet XMLHttpRequest est créé par JavaScript
L'objet XMLHttpRequest envoie la requête au serveur web
Le serveur traite la requête
Le serveur envoie la réponse à la page web
La réponse est lue par JavaScript
Le HTML DOM est mis à jour par JavaScript

Que allez-vous apprendre

Dans le prochain chapitre de ce tutoriel, vous apprendrez :
Comment créer un objet XMLHttpRequest
Comment envoyer des données au serveur web (en arrière-plan)
Comment lire des données du serveur web (en arrière-plan)
Comment mettre à jour une page web sans recharger la page

AJAX XMLHttpRequest