Fetch/XMLHttpRequest en JavaScript
Cet article explique Fetch/XMLHttpRequest en JavaScript.
YouTube Video
javascript-html-fetch-xhr.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 1em;
14 padding-bottom: 10em;
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 background-color: #f7f9fc;
17 color: #333;
18 line-height: 1.6;
19 }
20
21 .container {
22 max-width: 800px;
23 margin: 0 auto;
24 padding: 1em;
25 background-color: #ffffff;
26 border: 1px solid #ccc;
27 border-radius: 10px;
28 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
29 }
30
31 .container-flex {
32 display: flex;
33 flex-wrap: wrap;
34 gap: 2em;
35 max-width: 1000px;
36 margin: 0 auto;
37 padding: 1em;
38 background-color: #ffffff;
39 border: 1px solid #ccc;
40 border-radius: 10px;
41 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
42 }
43
44 .left-column, .right-column {
45 flex: 1 1 200px;
46 min-width: 200px;
47 }
48
49 h1, h2 {
50 font-size: 1.2rem;
51 color: #007bff;
52 margin-top: 0.5em;
53 margin-bottom: 0.5em;
54 border-left: 5px solid #007bff;
55 padding-left: 0.6em;
56 background-color: #e9f2ff;
57 }
58
59 button {
60 display: block;
61 margin: 1em auto;
62 padding: 0.75em 1.5em;
63 font-size: 1rem;
64 background-color: #007bff;
65 color: white;
66 border: none;
67 border-radius: 6px;
68 cursor: pointer;
69 transition: background-color 0.3s ease;
70 }
71
72 button:hover {
73 background-color: #0056b3;
74 }
75
76 #output {
77 margin-top: 1em;
78 background-color: #1e1e1e;
79 color: #0f0;
80 padding: 1em;
81 border-radius: 8px;
82 min-height: 200px;
83 font-family: Consolas, monospace;
84 font-size: 0.95rem;
85 overflow-y: auto;
86 white-space: pre-wrap;
87 }
88
89 .highlight {
90 outline: 3px solid #ffc107; /* yellow border */
91 background-color: #fff8e1; /* soft yellow background */
92 transition: background-color 0.3s ease, outline 0.3s ease;
93 }
94
95 .active {
96 background-color: #28a745; /* green background */
97 color: #fff;
98 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
99 transition: background-color 0.3s ease, box-shadow 0.3s ease;
100 }
101 </style>
102</head>
103<body>
104 <div class="container">
105 <h1>JavaScript Console</h1>
106 <button id="executeBtn">Execute</button>
107 <div id="output"></div>
108 </div>
109
110 <script>
111 // Override console.log to display messages in the #output element
112 (function () {
113 // Override console.log
114 const originalLog = console.log;
115 console.log = function (...args) {
116 originalLog.apply(console, args);
117 const message = document.createElement('div');
118 message.textContent = args.map(String).join(' ');
119 output.appendChild(message);
120 };
121
122 // Override console.error
123 const originalError = console.error;
124 console.error = function (...args) {
125 originalError.apply(console, args);
126 const message = document.createElement('div');
127 message.textContent = args.map(String).join(' ');
128 message.style.color = 'red'; // Color error messages red
129 output.appendChild(message);
130 };
131 })();
132
133 document.getElementById('executeBtn').addEventListener('click', () => {
134 // Prevent multiple loads
135 if (document.getElementById('externalScript')) return;
136
137 const script = document.createElement('script');
138 script.src = 'javascript-html-fetch-xhr.js';
139 script.id = 'externalScript';
140 //script.onload = () => console.log('javascript-html-fetch-xhr.js loaded and executed.');
141 //script.onerror = () => console.log('Failed to load javascript-html-fetch-xhr.js.');
142 document.body.appendChild(script);
143 });
144 </script>
145</body>
146</html>Fetch/XMLHttpRequest en JavaScript
Fetch et XMLHttpRequest (XHR) en JavaScript sont tous deux utilisés pour envoyer des requêtes HTTP et récupérer des données à partir d’un serveur.
Fetch API
L’API Fetch est une méthode moderne pour traiter les requêtes HTTP, conçue comme un successeur de XHR. C’est une API asynchrone basée sur les Promesses, permettant un traitement des requêtes plus simple et plus flexible.
Utilisation
1fetch('http://127.0.0.1:3000/example.json')
2 .then((response) => {
3 if (!response.ok) {
4 throw new Error('HTTP error: ' + response.status);
5 }
6 return response.json(); // Parse the response as JSON
7 })
8 .then((data) => {
9 console.log(data); // Use the fetched data
10 console.log(JSON.stringify(data));
11 })
12 .catch((error) => {
13 console.error('An error occurred:', error); // Error handling
14 });- Ce code envoie une requête GET à l’URL spécifiée en utilisant l’API
Fetch, traite la réponse au format JSON et affiche le résultat ou une erreur.
Caractéristiques
L’API Fetch présente les caractéristiques suivantes :.
- Basée sur les Promesses Les opérations asynchrones peuvent être gérées avec des Promesses, ce qui rend le code plus clair et facile à lire.
- Gestion des erreurs simplifiée
Les erreurs peuvent être facilement gérées avec le bloc
catch. - Analyse facile avec des méthodes comme
response.json()Les données de réponse peuvent être facilement traitées sous forme JSON ou texte. - Prise en charge de CORS
Fetchfonctionne selon les règles du partage des ressources entre origines (CORS). - Configuration flexible des requêtes Non seulement GET/POST, mais aussi des méthodes HTTP comme PUT et DELETE peuvent être facilement configurées.
Exemple : Requête POST
1fetch('http://127.0.0.1:3000/example.json', {
2 method: 'POST',
3 headers: {
4 'Content-Type': 'application/json'
5 },
6 body: JSON.stringify({ name: 'Alice', age: 25 }) // Send the request body as JSON
7 })
8 .then(response => response.json())
9 .then(data => console.log(JSON.stringify(data)))
10 .catch(error => console.error('Error:', error));- Ce code envoie une requête POST contenant des données JSON puis reçoit et affiche la réponse du serveur au format JSON.
Inconvénients
L’API Fetch présente les inconvénients suivants :.
- Compatibilité avec les navigateurs
Les anciens navigateurs (en particulier IE11) ne prennent pas en charge l’API
Fetch. - Contrôle fin difficile à réaliser Comparé à XHR, il n’est pas adapté aux contrôles de bas niveau comme la gestion des événements de progression.
XMLHttpRequest（XHR）
XMLHttpRequest est une API qui a longtemps été utilisée pour gérer les requêtes HTTP et a été largement utilisée comme base pour AJAX (JavaScript et XML Asynchrones). Permet une communication asynchrone, autorisant la récupération de données depuis le serveur sans recharger toute la page.
Utilisation
1const xhr = new XMLHttpRequest();
2xhr.open('GET', 'http://127.0.0.1:3000/example.json', true);
3xhr.onreadystatechange = function() {
4 if (xhr.readyState === 4 && xhr.status === 200) {
5 const data = JSON.parse(xhr.responseText); // Parse the response as JSON
6 console.log(data); // Use the data
7 console.log(JSON.stringify(data));
8 }
9};
10xhr.send(); // Send the request
- Ce code envoie une requête GET avec
XMLHttpRequest, analyse la réponse JSON reçue et l’affiche.
Caractéristiques
XMLHttpRequest offre les caractéristiques suivantes :.
- Basé sur des fonctions de rappel (callbacks)
Des fonctions de rappel comme
onreadystatechangesont utilisées pour surveiller l’achèvement ou la progression de la requête. - Surveillance des codes d’état et des états prêts
Le statut de la requête peut être vérifié avec
xhr.readyStateetxhr.status. - Large compatibilité Fonctionne même sur les anciens navigateurs.
- Surveillance de la progression de la requête
La progression peut être surveillée grâce à des événements comme
xhr.upload.onprogress.
Exemple : Requête POST
1const xhr = new XMLHttpRequest();
2xhr.open('POST', 'http://127.0.0.1:3000/example.json', true);
3xhr.setRequestHeader('Content-Type', 'application/json');
4xhr.onreadystatechange = function() {
5 if (xhr.readyState === 4 && xhr.status === 200) {
6 const data = JSON.parse(xhr.responseText);
7 console.log(data);
8 console.log(JSON.stringify(data));
9 }
10};
11xhr.send(JSON.stringify({ name: 'Alice', age: 25 })); // Send the data
- Ce code envoie une requête POST avec des données JSON en utilisant
XMLHttpRequest, reçoit la réponse et l’affiche.
Inconvénients
XMLHttpRequest présente les inconvénients suivants :.
- Complexité du code La gestion des traitements asynchrones avec des fonctions de rappel est souvent complexe.
- Pas de prise en charge native des Promesses Comme les Promesses ne sont pas prises en charge nativement, le traitement asynchrone devient quelque peu verbeux.
Comparaison entre l'Fetch API et XMLHttpRequest
| Caractéristiques | Fetch API |
XMLHttpRequest (XHR) |
|---|---|---|
| Traitement asynchrone | Simple avec Promesses | Nécessite des fonctions de rappel |
| Gestion des erreurs | Gérée avec .catch() |
Vérifie l'état de readyState |
| Événements de progression | Non supportés | Gérés avec onprogress |
| Support inter-origines | Prend automatiquement en charge CORS | Prend en charge CORS |
| Support des navigateurs | Non supporté dans IE11 et versions antérieures | Compatible avec les anciens navigateurs |
| Granularité du contrôle | Simple et intuitif | Permet un contrôle fin |
Résumé
- L'Fetch API offre des requêtes HTTP simples et flexibles basées sur les Promesses et est recommandée dans les navigateurs modernes.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.