Fetch/XMLHttpRequest i JavaScript

Articles

Denne artikel forklarer Fetch/XMLHttpRequest i 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 &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 i JavaScript

Fetch og XMLHttpRequest (XHR) i JavaScript bruges begge til at sende HTTP-forespørgsler og hente data fra en server.

`Fetch API`

Fetch API er en moderne metode til håndtering af HTTP-forespørgsler, designet som en efterfølger til XHR. Det er en asynkron API baseret på Promises, der muliggør enklere og mere fleksibel håndtering af forespørgsler.

Anvendelse

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

Denne kode sender en GET-anmodning til den angivne URL ved hjælp af Fetch API, behandler svaret som JSON og viser resultatet eller viser en fejl.

Funktioner

Fetch API har følgende funktioner:.

Promise-baseret Asynkrone operationer kan håndteres med Promises, hvilket gør koden renere og lettere at læse.
Nem fejlhåndtering Fejl kan nemt håndteres ved hjælp af catch-blokken.
Parsing med metoder som response.json() Svar-data kan nemt behandles i JSON- eller tekstformat.
CORS-understøttelse Fetch fungerer ud fra reglerne for Cross-Origin Resource Sharing (CORS).
Fleksibel konfiguration af anmodninger Ikke kun GET/POST, men også HTTP-metoder som PUT og DELETE kan nemt konfigureres.

Eksempel: POST-forespørgsel

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

Denne kode sender en POST-anmodning med JSON-data og modtager samt viser svaret fra serveren som JSON.

Ulemper

Fetch API har følgende ulemper:.

Browserkompatibilitet Ældre browsere (især IE11) understøtter ikke Fetch API.
Svær at udføre detaljeret kontrol med Sammenlignet med XHR er det ikke velegnet til lav-niveau kontrol såsom håndtering af fremgangsbegivenheder.

`XMLHttpRequest`（XHR）

XMLHttpRequest er en API, der længe er blevet brugt til at håndtere HTTP-forespørgsler og har været vidt anvendt som grundlag for AJAX (Asynchronous JavaScript and XML). Muliggør asynkron kommunikation, så data kan hentes fra serveren uden at skulle genindlæse hele siden.

Anvendelse

 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

Denne kode sender en GET-anmodning ved hjælp af XMLHttpRequest, parser det modtagne JSON-svar og viser det.

Funktioner

XMLHttpRequest har følgende funktioner:.

Callback-baseret Callback-funktioner som onreadystatechange bruges til at overvåge fuldførelse eller fremgang af anmodningen.
Overvågning af statuskoder og ready-states Anmodningsstatus kan kontrolleres ved hjælp af xhr.readyState og xhr.status.
Bred kompatibilitet Fungerer selv på ældre browsere.
Overvåg anmodningens fremgang Fremgangen kan overvåges ved hjælp af begivenheder som xhr.upload.onprogress.

Eksempel: POST-forespørgsel

 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

Denne kode sender en POST-anmodning med JSON-data ved hjælp af XMLHttpRequest, modtager svaret og viser det.

Ulemper

XMLHttpRequest har følgende ulemper:.

Kodekompleksitet Håndtering af asynkron behandling med callback-funktioner har en tendens til at være kompleks.
Ingen indbygget Promise-understøttelse Da Promises ikke understøttes som standard, bliver asynkron behandling mere omstændelig.

Sammenligning mellem `Fetch API` og `XMLHttpRequest`

Funktioner	`Fetch API`	`XMLHttpRequest` (XHR)
Asynkron behandling	Enkel med Promises	Kræver tilbagekaldsfunktioner
Fejlhåndtering	Håndterbart med `.catch()`	Kontroller `readyState`-status
Fremskridtshændelser	Ikke understøttet	Håndteres med `onprogress`
Cross-origin support	Understøtter automatisk CORS	Understøtter CORS
Browserunderstøttelse	Ikke understøttet i IE11 og ældre	Kompatibel med ældre browsere
Kontroldetaljer	Nem og intuitiv	Tillader finjusteret kontrol

Sammendrag

Fetch API'en giver mulighed for enkle og fleksible HTTP-forespørgsler baseret på Promises og anbefales til moderne browsere.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Håndtering af begivenheder i JavaScript

Fetch/XMLHttpRequest i JavaScript

YouTube Video

Fetch/XMLHttpRequest i JavaScript

Fetch API

Anvendelse

Funktioner

Eksempel: POST-forespørgsel

Ulemper

XMLHttpRequest（XHR）

Anvendelse

Funktioner

Eksempel: POST-forespørgsel

Ulemper

Sammenligning mellem Fetch API og XMLHttpRequest

Sammendrag

YouTube Video

`Fetch API`

`XMLHttpRequest`（XHR）

Sammenligning mellem `Fetch API` og `XMLHttpRequest`