AJAX est le rêve d'un développeur, parce que vous pouvez:
- Mettre à jour une page Web sans recharger la page
- Demander des données à partir d'un serveur - après que la page a chargé
- Recevoir des données à partir d'un serveur - après que la page a été chargée
- Envoyer des données à un serveur - en arrière-plan
Essayez vous-même des exemples dans chaque chapitre
Dans chaque chapitre, vous pouvez modifier les exemples en ligne, et cliquez sur un bouton pour voir le résultat.
AJAX Exemple Explained
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 un <div> section et un <button> .
Le <div> section est utilisée pour afficher des informations à partir d' un serveur.
Le <button> appelle une fonction (si elle est cliqué).
La fonction demande des données à partir d'un serveur Web et l'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();
}
Qu'est-ce que vous devriez déjà savoir
Avant de continuer, vous devriez avoir une compréhension de base des éléments suivants:
- HTML
- JavaScript
Si vous voulez étudier ces sujets d' abord, trouver les tutoriels sur notre page d'accueil .
Qu'est - ce que AJAX ?
AJAX = Asynchronous JavaScript et XML.
AJAX est un nom trompeur. applications AJAX peuvent utiliser XML pour transporter des données, mais il est tout aussi commun pour transporter des données sous forme de texte ou le texte JSON.
AJAX est une technique pour créer des pages web rapides et dynamiques.
AJAX permet aux pages web pour être mis à jour de manière asynchrone par l'échange de petites quantités de données avec le serveur dans les coulisses. Cela veut dire qu'il est possible de mettre à jour des parties d'une page web, sans avoir à recharger la page.
pages web classiques, (qui ne pas utiliser AJAX) doivent recharger la page entière si le contenu doit changer.
Exemples d'applications utilisant AJAX: Google Maps, Gmail, YouTube et Facebook.
Comment AJAX Works
AJAX est basé sur les normes Internet
AJAX est basé sur des standards Internet, et utilise une combinaison de:
- XMLHttpRequest objet (pour récupérer des données à partir d' un serveur Web)
- JavaScript/DOM (pour afficher / utiliser les données)
XMLHttpRequest est un nom trompeur. Vous ne devez pas comprendre XML à utiliser AJAX.
Google Suggest
AJAX a été rendu populaire en 2005 par Google, avec Google Suggest.
Google Suggest utilise AJAX pour créer une interface web très dynamique: Lorsque vous commencez à taper dans la boîte de recherche de Google, un JavaScript envoie les lettres off à un serveur et le serveur renvoie une liste de suggestions.
Commencer à utiliser AJAX Aujourd'hui
AJAX est basée sur les normes existantes. Ces normes ont été utilisées par les développeurs depuis plusieurs années. Lisez nos prochains chapitres pour voir comment cela fonctionne!