Articles
Einführung in JavaScript
Fetch/XMLHttpRequest in JavaScript

Fetch/XMLHttpRequest in JavaScript

Dieser Artikel erklärt Fetch/XMLHttpRequest in 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 in JavaScript

Fetch und XMLHttpRequest (XHR) in JavaScript werden beide verwendet, um HTTP-Anfragen zu senden und Daten von einem Server abzurufen.

Fetch API

Die Fetch API ist eine moderne Methode zur Verarbeitung von HTTP-Anfragen und wurde als Nachfolger von XHR entwickelt. Sie ist eine asynchrone API, die auf Promises basiert und eine einfachere und flexiblere Handhabung von Anfragen ermöglicht.

Verwendung 

 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    });
  • Dieser Code sendet eine GET-Anfrage an die angegebene URL mit der Fetch API, verarbeitet die Antwort als JSON und zeigt das Ergebnis an oder gibt einen Fehler aus.

Merkmale

Die Fetch API hat folgende Eigenschaften:.

  • Auf Promises basierend Asynchrone Operationen können mit Promises verwaltet werden, was den Code sauberer und leichter lesbar macht.
  • Einfache Fehlerbehandlung Fehler können leicht über den catch-Block behandelt werden.
  • Verarbeitung mit Methoden wie response.json() Antwortdaten können einfach im JSON- oder Textformat verarbeitet werden.
  • CORS-Unterstützung Fetch funktioniert nach den Regeln des Cross-Origin Resource Sharing (CORS).
  • Flexibel konfigurierbare Anfragen Nicht nur GET/POST, sondern auch HTTP-Methoden wie PUT und DELETE können einfach konfiguriert werden.

Beispiel: POST-Anfrage 

 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));
  • Dieser Code sendet eine POST-Anfrage mit JSON-Daten und empfängt und zeigt die Antwort des Servers als JSON an.

Nachteile

Die Fetch API hat folgende Nachteile:.

  • Browserkompatibilität Ältere Browser (insbesondere IE11) unterstützen die Fetch API nicht.
  • Schwierig für feingranulare Steuerung Im Vergleich zu XHR ist sie nicht für Low-Level-Kontrollen wie das Behandeln von Fortschrittsereignissen geeignet.

XMLHttpRequest（XHR）

XMLHttpRequest ist eine API, die seit langem für die Bearbeitung von HTTP-Anfragen verwendet wird und weithin als Grundlage für AJAX (Asynchronous JavaScript and XML) genutzt wurde. Ermöglicht asynchrone Kommunikation, wodurch Daten vom Server abgerufen werden können, ohne die gesamte Seite neu zu laden.

Verwendung 

 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
  • Dieser Code sendet eine GET-Anfrage mit XMLHttpRequest, parst die empfangene JSON-Antwort und zeigt sie an.

Merkmale

XMLHttpRequest hat folgende Eigenschaften:.

  • Callback-basiert Callback-Funktionen wie onreadystatechange werden verwendet, um den Abschluss oder Fortschritt der Anfrage zu überwachen.
  • Überwachung von Statuscodes und Ready-States Der Status der Anfrage kann mit xhr.readyState und xhr.status überprüft werden.
  • Breite Kompatibilität Funktioniert auch in älteren Browsern.
  • Überwachung des Anfragefortschritts Der Fortschritt kann mit Ereignissen wie xhr.upload.onprogress überwacht werden.

Beispiel: POST-Anfrage 

 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
  • Dieser Code sendet eine POST-Anfrage mit JSON-Daten über XMLHttpRequest, empfängt die Antwort und zeigt sie an.

Nachteile

XMLHttpRequest hat folgende Nachteile:.

  • Komplexität des Codes Das Verwalten asynchroner Prozesse mit Callback-Funktionen ist oft komplex.
  • Keine native Promise-Unterstützung Da Promises nicht standardmäßig unterstützt werden, wird die asynchrone Verarbeitung etwas umständlich.

Vergleich zwischen Fetch API und XMLHttpRequest

Merkmale Fetch API XMLHttpRequest (XHR)
Asynchrone Verarbeitung Einfach mit Promises Erfordert Callback-Funktionen
Fehlerbehandlung Verwaltbar mit .catch() Überprüfung des readyState-Status
Fortschrittsereignisse Nicht unterstützt Über onprogress verwaltet
Cross-Origin-Unterstützung Unterstützt automatisch CORS Unterstützt CORS
Browser-Unterstützung Nicht unterstützt in IE11 und älteren Kompatibel mit älteren Browsern
Kontrollgranularität Einfach und intuitiv Ermöglicht feinkörnige Kontrolle

Zusammenfassung

  • Die Fetch-API bietet einfache und flexible HTTP-Anfragen basierend auf Promises und wird in modernen Browsern empfohlen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Ereignisbehandlung in JavaScript