Fetch/XMLHttpRequest in JavaScript

Articles

Dit artikel legt Fetch/XMLHttpRequest in JavaScript uit.

YouTube Video

javascript-html-fetch-xhr.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; 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 in JavaScript

Fetch en XMLHttpRequest (XHR) in JavaScript worden beide gebruikt om HTTP-verzoeken te verzenden en gegevens van een server op te halen.

`Fetch API`

De Fetch API is een moderne methode voor het afhandelen van HTTP-verzoeken en is ontworpen als opvolger van XHR. Het is een asynchrone API die is gebaseerd op Promises, waarmee eenvoudigere en flexibelere verwerking van verzoeken mogelijk is.

Gebruik

 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    });

Deze code stuurt een GET-verzoek naar de opgegeven URL met behulp van de Fetch API, verwerkt het antwoord als JSON en toont het resultaat of geeft een foutmelding weer.

Kenmerken

De Fetch API heeft de volgende kenmerken:.

Gebaseerd op Promises Asynchrone operaties kunnen met Promises beheerd worden, waardoor de code overzichtelijker en makkelijker leesbaar wordt.
Eenvoudige foutafhandeling Fouten kunnen eenvoudig worden afgehandeld met behulp van het catch-blok.
Parsen met methoden zoals response.json() Responsgegevens kunnen eenvoudig verwerkt worden in JSON- of tekstformaat.
Ondersteuning voor CORS Fetch werkt op basis van Cross-Origin Resource Sharing (CORS)-regels.
Flexibele configuratie van aanvragen Niet alleen GET/POST, maar ook HTTP-methoden zoals PUT en DELETE kunnen eenvoudig geconfigureerd worden.

Voorbeeld: POST-verzoek

 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));

Deze code stuurt een POST-verzoek met JSON-gegevens en ontvangt en toont het antwoord van de server als JSON.

Nadelen

De Fetch API heeft de volgende nadelen:.

Browsercompatibiliteit Oudere browsers (vooral IE11) ondersteunen de Fetch API niet.
Moeilijk om fijnmazige controle uit te voeren In vergelijking met XHR is het niet geschikt voor laag-niveau controles zoals het afhandelen van voortgangsevenementen.

`XMLHttpRequest`（XHR）

XMLHttpRequest is een API die al lang wordt gebruikt om HTTP-verzoeken te verwerken en die veel wordt gebruikt als basis voor AJAX (Asynchronous JavaScript and XML). Maakt asynchrone communicatie mogelijk, waardoor gegevens van de server kunnen worden opgehaald zonder de hele pagina te herladen.

Gebruik

 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

Deze code stuurt een GET-verzoek met behulp van XMLHttpRequest, parseert de ontvangen JSON-respons en toont deze.

Kenmerken

XMLHttpRequest heeft de volgende kenmerken:.

Gebaseerd op callbacks Callbackfuncties zoals onreadystatechange worden gebruikt om de voltooiing of voortgang van het verzoek te monitoren.
Statuscodes en ready states controleren De status van het verzoek kan worden gecontroleerd met xhr.readyState en xhr.status.
Brede compatibiliteit Werkt zelfs op oudere browsers.
Verzoekvoortgang monitoren Voortgang kan worden gemonitord met behulp van evenementen zoals xhr.upload.onprogress.

Voorbeeld: POST-verzoek

 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

Deze code stuurt een POST-verzoek met JSON-gegevens via XMLHttpRequest, ontvangt het antwoord en toont het.

Nadelen

XMLHttpRequest heeft de volgende nadelen:.

Codecomplexiteit Het beheren van asynchrone verwerking met callbackfuncties is vaak complex.
Geen native Promise-ondersteuning Omdat Promises standaard niet ondersteund worden, wordt asynchrone verwerking enigszins omslachtig.

Vergelijking tussen `Fetch API` en `XMLHttpRequest`

Kenmerken	`Fetch API`	`XMLHttpRequest` (XHR)
Asynchrone verwerking	Eenvoudig met Promises	Vereist callback-functies
Foutafhandeling	Beheerbaar met `.catch()`	Controleer de `readyState`-status
Voortgangsevenementen	Niet ondersteund	Behandeld met `onprogress`
Ondersteuning voor cross-origin	Ondersteunt automatisch CORS	Ondersteunt CORS
Browserondersteuning	Niet ondersteund in IE11 en ouder	Compatibel met oudere browsers
Controleprecisie	Eenvoudig en intuïtief	Biedt gedetailleerde controle

Samenvatting

De Fetch API biedt eenvoudige en flexibele HTTP-verzoeken op basis van Promises en wordt aanbevolen in moderne browsers.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Gebeurtenissen Afhandelen in JavaScript

Fetch/XMLHttpRequest in JavaScript

YouTube Video

Fetch/XMLHttpRequest in JavaScript

Fetch API

Gebruik

Kenmerken

Voorbeeld: POST-verzoek

Nadelen

XMLHttpRequest（XHR）

Gebruik

Kenmerken

Voorbeeld: POST-verzoek

Nadelen

Vergelijking tussen Fetch API en XMLHttpRequest

Samenvatting

YouTube Video

`Fetch API`

`XMLHttpRequest`（XHR）

Vergelijking tussen `Fetch API` en `XMLHttpRequest`