Fetch/XMLHttpRequest i JavaScript

Articles

Denne artikkelen 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 brukes begge til å sende HTTP-forespørsler og hente data fra en server.

`Fetch API`

Fetch API er en moderne metode for å håndtere HTTP-forespørsler, designet som en etterfølger til XHR. Det er en asynkron API basert på Promises, som gir enklere og mer fleksibel håndtering av forespørsler.

Bruk

 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 koden sender en GET-forespørsel til den angitte URL-en ved bruk av Fetch API, behandler svaret som JSON og viser resultatet eller gir en feilmelding.

Funksjoner

Fetch API har følgende funksjoner:.

Basert på Promise Asynkrone operasjoner kan håndteres med Promises, noe som gjør koden renere og lettere å lese.
Enkel feilbehandling Feil kan enkelt håndteres med catch-blokken.
Parsing med metoder som response.json() Responsdata kan enkelt behandles som JSON- eller tekstformat.
Støtte for CORS Fetch fungerer basert på Cross-Origin Resource Sharing (CORS)-regler.
Fleksibel forespørselskonfigurasjon Ikke bare GET/POST, men også HTTP-metoder som PUT og DELETE kan enkelt konfigureres.

Eksempel: POST-forespørsel

 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 koden sender en POST-forespørsel med JSON-data og mottar og viser serverens respons som JSON.

Ulemper

Fetch API har følgende ulemper:.

Nettleserkompatibilitet Eldre nettlesere (spesielt IE11) støtter ikke Fetch API.
Vanskelig å utføre detaljert kontroll Sammenlignet med XHR er den ikke egnet for lave nivåkontroller som håndtering av fremdriftsbegivenheter.

`XMLHttpRequest`（XHR）

XMLHttpRequest er en API som lenge har vært brukt for å håndtere HTTP-forespørsler og er mye brukt som grunnlag for AJAX (Asynchronous JavaScript and XML). Muliggjør asynkron kommunikasjon, slik at data kan hentes fra serveren uten å laste hele siden på nytt.

Bruk

 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 koden sender en GET-forespørsel med XMLHttpRequest, tolker det mottatte JSON-svaret og viser det.

Funksjoner

XMLHttpRequest har følgende funksjoner:.

Callback-basert Callback-funksjoner som onreadystatechange brukes til å overvåke utførelsen eller fremdriften av forespørselen.
Overvåking av statuskoder og ready states Forespørselsstatus kan sjekkes med xhr.readyState og xhr.status.
Bred kompatibilitet Fungerer også i eldre nettlesere.
Overvåk forespørselsfremdrift Fremdrift kan overvåkes med hendelser som xhr.upload.onprogress.

Eksempel: POST-forespørsel

 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 koden sender en POST-forespørsel med JSON-data ved bruk av XMLHttpRequest, mottar svaret og viser det.

Ulemper

XMLHttpRequest har følgende ulemper:.

Kodekompleksitet Håndtering av asynkrone prosesser med callback-funksjoner har en tendens til å bli komplekst.
Ingen innebygd Promise-støtte Siden Promises ikke støttes som standard, blir asynkron behandling noe omstendelig.

Sammenligning mellom `Fetch API` og `XMLHttpRequest`

Funksjoner	`Fetch API`	`XMLHttpRequest` (XHR)
Asynkron behandling	Enkel med Promises	Krever tilbakeringingsfunksjoner
Feilhåndtering	Håndteres enkelt med `.catch()`	Sjekk status med `readyState`
Progresjonshendelser	Ikke støttet	Håndteres med `onprogress`
Støtte for kryss-opprinnelse	Støtter automatisk CORS	Støtter CORS
Nettleserstøtte	Ikke støttet i IE11 og eldre	Kompatibel med eldre nettlesere
Detaljnivå av kontroll	Enkel og intuitiv	Tillater detaljert kontroll

Sammendrag

Fetch API tilbyr enkle og fleksible HTTP-forespørsler basert på Promises, og anbefales i moderne nettlesere.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Håndtering av hendelser i JavaScript

Fetch/XMLHttpRequest i JavaScript

YouTube Video

Fetch/XMLHttpRequest i JavaScript

Fetch API

Bruk

Funksjoner

Eksempel: POST-forespørsel

Ulemper

XMLHttpRequest（XHR）

Bruk

Funksjoner

Eksempel: POST-forespørsel

Ulemper

Sammenligning mellom Fetch API og XMLHttpRequest

Sammendrag

YouTube Video

`Fetch API`

`XMLHttpRequest`（XHR）

Sammenligning mellom `Fetch API` og `XMLHttpRequest`