Opérations AJAX
Opérations AJAX
Opérations AJAX est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 1. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 1 leçons au total.
Introduction
Bonjour,
Dans cette leçon, nous allons apprendre à interagir avec un serveur distant à l’aide des méthodes AJAX de jQuery.
AJAX (Asynchronous Javascript And XML) est une technologie qui permet de transférer des données avec le serveur de manière asynchrone, sans actualiser la page web.
L’expérience utilisateur s’en trouve améliorée, notamment parce que les données peuvent être transférées sans actualiser la page.
Exemple AJAX
Les applications web les plus populaires au monde, comme Facebook, Gmail et Youtube, utilisent fréquemment la technologie AJAX.
En fait, au lieu de considérer AJAX comme une nouvelle technologie, vous pouvez le voir comme une méthode qui permet de transférer des données de manière asynchrone entre le serveur et le client à l’aide de Javascript.
Voyons maintenant un exemple de fonction utilisant AJAX.
Par exemple, vous avez regardé une vidéo sur youtube.com et cliqué sur le bouton J’aime. Dans ce cas, notre événement « J’aime » est transmis en arrière-plan aux serveurs de youtube avant l’actualisation de la page youtube.
Il s’agit d’un processus réalisé au moyen d’une requête AJAX.
Exemple AJAX
Faisons un exemple de requêtes AJAX.
Voici le code d’une requête GET réalisée avec AJAX vers https://api.coddykit.com/api/coddy-test
Cet exemple utilise VanillaJS et sa syntaxe est un peu complexe, comme vous pouvez le constater.
<div id="result"></div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4
&& this.status == 200) {
//we are writing the AJAX request response
//to div element that has result id
var result = document.getElementById('result');
result.innerHTML = JSON.stringify(this.responseText);
}
};
xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
xhttp.send();
</script>Avertissement
Comme nous l’avons dit précédemment, jQuery est une bibliothèque de modification du DOM qui fournit également des méthodes facilitant les opérations AJAX.
Méthode AJAX
Nous disposons d’une méthode assez simple pour gérer nos requêtes AJAX avec jQuery.
Avec la méthode ajax(), nous pouvons facilement utiliser des méthodes HTTP couramment employées sur le Web, comme get, post ou put.
La syntaxe de la méthode Ajax est la suivante.
$.ajax ({
url: 'remote URL'.
data: 'Data that we will send',
method: 'HTTP Method - Default GET',
success: 'Here, we should define function that work when Ajax get success result',
dataType: 'Interaction data type'
});
Faisons un exemple
<div id="result"></div>
<script>
$.ajax ({
url: 'https://api.coddykit.com/api/coddy-test',
success: function(data){
$('#result').text(JSON.stringify(data));
}
});
</script>Exemple AJAX
Requête AJAX get
Améliorons maintenant notre exemple.
Dans l’exemple ci-dessous, une requête AJAX a été envoyée à l’URL (https://api.coddykit.com/api/coddy-test).
Si aucune méthode HTTP n’est définie, une requête GET est effectuée par défaut.
const https = require('https');
function ajax(url) {
const callbacks = { success: [], fail: [], always: [] };
const req = https.get(url, (res) => {
let data = '';
res.on('data', chunk => data += chunk);
res.on('end', () => {
callbacks.success.forEach(cb => cb(data));
callbacks.always.forEach(cb => cb());
});
});
req.on('error', (err) => {
callbacks.fail.forEach(cb => cb(err));
callbacks.always.forEach(cb => cb());
});
return {
done: function(cb) { callbacks.success.push(cb); return this; },
fail: function(cb) { callbacks.fail.push(cb); return this; },
always: function(cb) { callbacks.always.push(cb); return this; }
};
}
var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
.done(function() {
//success callback
/*
If our get request is sent to
the server with success (HTTP 2xx),
this function is called.
*/
})
.fail(function() {
/* This function works
if the AJAX request fails.
*/
})
.always(function() {
/*
This function works in all cases when
the AJAX request is
successful or unsuccessful.
*/
});méthode get
Méthode $.get() et requête GET
Nous pouvons utiliser la méthode $.get() pour envoyer une requête GET HTTP à nos serveurs.
Cette méthode nous est fournie par jQuery et permet d’envoyer une requête GET en écrivant un code plus concis et plus simple qu’avec VanillaJS.
Faisons un exemple et observons à quel point le code est raccourci.
<div id="result"></div>
<script>
$.get("https://api.coddykit.com/api/coddy-test",
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Méthode post
Méthode $.post() et requête Post
Nous pouvons utiliser la méthode $.post() pour envoyer une requête HTTP Post à nos serveurs.
Réalisons un exemple et remarquons à quel point le code est plus court.
Nous utiliserons fréquemment les requêtes post, notamment lors de l’envoi de formulaires web au serveur.
<div id="result"></div>
<script>
$.post("https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Méthode put
Requête Put
Nous pouvons utiliser la méthode $.put() pour envoyer une requête HTTP Put à nos serveurs.
Faisons un exemple.
<div id="result"></div>
<script>
$.ajax({
method:'PUT',
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Méthode delete
Requête Delete
Nous pouvons utiliser la méthode $.delete() pour envoyer une requête HTTP Delete à nos serveurs.
Faisons un exemple
<div id="result"></div>
<script>
$.ajax({
method:'DELETE',
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Lien
Vous trouverez des exemples et des informations détaillées sur les méthodes AJAX en cliquant sur le lien ci-dessous.
Félicitations
Félicitations 🎉
Dans cette section, nous avons appris à utiliser AJAX avec jQuery.
Merci d’avoir participé au cours jQuery pour débutants 🎉🎉🎉
Vous pouvez maintenant passer l’examen et obtenir un certificat pour le cours Tutoriel jQuery pour débutants 🚀🚀🚀
Questions Fréquemment Posées
La leçon « Opérations AJAX » est-elle gratuite ?
Oui — le texte complet de « Opérations AJAX » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 1 leçons au total.
Qu'est-ce que j'apprendrai dans « Opérations AJAX » ?
Opérations AJAX Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer jQuery Academy ?
Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 1.
Combien de temps prend la leçon « Opérations AJAX » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?
Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.