Fetch/Метод XMLHttpRequest в JavaScript

Articles

Эта статья объясняет Fetch/Метод XMLHttpRequest в 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 в JavaScript

Fetch и XMLHttpRequest (XHR) в JavaScript используются для отправки HTTP-запросов и получения данных с сервера.

`Fetch API`

Fetch API — это современный метод работы с HTTP-запросами, созданный как преемник XHR. Это асинхронный API, основанный на Promises, позволяющий работать с запросами проще и гибче.

Использование

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

Этот код отправляет GET-запрос по указанному URL с помощью Fetch API, обрабатывает ответ как JSON и отображает результат или выводит ошибку.

Функции

У Fetch API есть следующие особенности:.

Основан на Promise Асинхронные операции можно управлять с помощью Promises, что делает код чище и проще для чтения.
Легкая обработка ошибок Ошибки легко обрабатываются с помощью блока catch.
Парсинг с помощью методов, таких как response.json() Ответные данные легко обрабатываются в формате JSON или текстовом формате.
Поддержка CORS Fetch работает на основе правил Cross-Origin Resource Sharing (CORS).
Гибкая настройка запросов Можно легко настраивать не только GET/POST, но и другие HTTP-методы, такие как PUT и DELETE.

Пример: Запрос 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));

Этот код отправляет POST-запрос с данными в формате JSON и получает и отображает ответ от сервера в формате JSON.

Недостатки

У Fetch API есть следующие недостатки:.

Совместимость с браузерами Старые браузеры (особенно IE11) не поддерживают Fetch API.
Сложно выполнять более тонкое управление По сравнению с XHR, не подходит для низкоуровневого управления, такого как обработка событий прогресса.

`XMLHttpRequest`（XHR）

XMLHttpRequest — это API, которое долгое время использовалось для работы с HTTP-запросами и широко использовалось как основа для AJAX (асинхронного JavaScript и XML). Обеспечивает асинхронную связь, позволяя получать данные с сервера без перезагрузки всей страницы.

Использование

 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

Этот код отправляет GET-запрос с помощью XMLHttpRequest, парсит полученный ответ в формате JSON и отображает его.

Функции

У XMLHttpRequest есть следующие особенности:.

Основан на обратных вызовах (callback) Функции обратного вызова, такие как onreadystatechange, используются для отслеживания завершения или прогресса запроса.
Отслеживание кодов состояния и состояний готовности Статус запроса можно проверить с помощью xhr.readyState и xhr.status.
Широкая совместимость Работает даже в старых браузерах.
Отслеживание прогресса запроса Прогресс можно отслеживать с помощью событий, таких как xhr.upload.onprogress.

Пример: Запрос 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

Этот код отправляет POST-запрос с данными в формате JSON с помощью XMLHttpRequest, получает ответ и отображает его.

Недостатки

У XMLHttpRequest есть следующие недостатки:.

Сложность кода Управление асинхронной обработкой с помощью функций обратного вызова обычно бывает сложным.
Нет нативной поддержки Promise Поскольку Promises не поддерживаются по умолчанию, асинхронная обработка становится достаточно громоздкой.

Сравнение между `Fetch API` и `XMLHttpRequest`

Функции	`Fetch API`	`XMLHttpRequest` (XHR)
Асинхронная обработка	Простая с использованием Promises	Требуются callback-функции
Обработка ошибок	Управляется с помощью `.catch()`	Проверяется через статус `readyState`
События прогресса	Не поддерживаются	Обрабатываются с помощью `onprogress`
Поддержка кросс-доменных запросов	Автоматически поддерживает CORS	Поддерживает CORS
Поддержка браузеров	Не поддерживается в IE11 и более старых версиях	Совместим со старыми браузерами
Гранулярность контроля	Простая и интуитивно понятная	Позволяет более детальное управление

Резюме

Fetch API предоставляет простые и гибкие HTTP-запросы на основе Promises и рекомендуется для использования в современных браузерах.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Обработка событий в JavaScript

Fetch/Метод XMLHttpRequest в JavaScript

YouTube Video

Fetch/Метод XMLHttpRequest в JavaScript

Fetch API

Использование

Функции

Пример: Запрос POST

Недостатки

XMLHttpRequest（XHR）

Использование

Функции

Пример: Запрос POST

Недостатки

Сравнение между Fetch API и XMLHttpRequest

Резюме

YouTube Video

`Fetch API`

`XMLHttpRequest`（XHR）

Сравнение между `Fetch API` и `XMLHttpRequest`