Подробный разбор кода практического задания по AJAX и Fetch

Общая структура документа

Данный HTML-документ представляет собой практическое задание по работе с AJAX (XMLHttpRequest) и Fetch API. Он состоит из:

1. Заголовка документа с метаданными и стилями

2. Двух основных заданий:

   • Задание 1: GET-запрос с использованием XMLHttpRequest

   • Задание 2: POST-запрос с использованием Fetch API

3. JavaScript-кода, реализующего функциональность заданий

Стилизация (CSS)

Документ использует внутренние стили для оформления:

• Чистый, минималистичный дизайн с голубыми акцентами

• Стили для кнопок, полей ввода, областей результатов

• Адаптивный дизайн (max-width: 800px)

Задание 1: GET запрос с XMLHttpRequest

HTML-разметка:

html

Copy

Download

Run

<div class="task">

<h2>Задание 1: GET запрос (XMLHttpRequest)</h2>

<p>Выполните GET запрос к JSONPlaceholder API для получения списка пользователей...</p>

<button id="get-btn">Выполнить GET запрос</button>

<div id="get-result">Результат появится здесь...</div>

<div id="last-post-data" class="post-data">

<h3>Данные последнего POST запроса:</h3>

<p>Здесь будут показаны данные, которые вы отправили через POST запрос</p>

</div>

</div>

JavaScript-реализация:

1. Инициализация:

javascript

Copy

Download

let lastPostData = null; // Переменная для хранения последних POST-данных

2. Обработчик клика:

javascript

Copy

Download

document.getElementById('get-btn').addEventListener('click', function() {

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);

3. Обработка успешного ответа:

javascript

Copy

Download

xhr.onload = function() {

if (xhr.status >= 200 && xhr.status < 300) {

const users = JSON.parse(xhr.responseText);

let output = '<h3>Список пользователей:</h3><ul>';

users.forEach(user => {

output += `<li><strong>${user.name}</strong> (${user.email})</li>`;

});

document.getElementById('get-result').innerHTML = output;

4. Отображение последних POST-данных:

javascript

Copy

Download

if (lastPostData) {

document.getElementById('last-post-data').innerHTML = `

<h3>Данные последнего POST запроса:</h3>

<pre>${JSON.stringify(lastPostData, null, 2)}</pre>

<p><strong>Заголовок:</strong> ${lastPostData.title}</p>

<p><strong>Текст:</strong> ${lastPostData.body}</p>

<p><strong>User ID:</strong> ${lastPostData.userId}</p>

`;

}

5. Обработка ошибок:

javascript

Copy

Download

xhr.onerror = function() {

document.getElementById('get-result').innerHTML =

'<p>Произошла ошибка при выполнении запроса</p>';

};

Задание 2: POST запрос с fetch

HTML-разметка:

html

Copy

Download

Run

<div class="task">

<h2>Задание 2: POST запрос (fetch)</h2>

<p>Отправьте данные нового поста на JSONPlaceholder API.</p>

<!-- Поля формы для ввода данных -->

<button id="post-btn">Отправить POST запрос</button>

<div id="post-result">Результат появится здесь...</div>

</div>

JavaScript-реализация:

1. Обработчик клика:

javascript

Copy

Download

document.getElementById('post-btn').addEventListener('click', function() {

const title = document.getElementById('post-title').value.trim();

const body = document.getElementById('post-body').value.trim();

const userId = document.getElementById('post-user').value;

2. Валидация данных:

javascript

Copy

Download

if (!title || !body) {

alert('Пожалуйста, заполните все обязательные поля');

return;

}

3. Подготовка данных:

javascript

Copy

Download

const postData = {

title: title,

body: body,

userId: parseInt(userId)

};

lastPostData = {...postData}; // Сохраняем для отображения в GET

4. Отправка запроса с fetch:

javascript

Copy

Download

fetch('https://jsonplaceholder.typicode.com/posts', {

method: 'POST',

headers: {

'Content-Type': 'application/json; charset=UTF-8'

},

body: JSON.stringify(postData)

})

5. Обработка ответа:

javascript

Copy

Download

.then(response => {

if (!response.ok) {

throw new Error(`HTTP error! status: ${response.status}`);

}

return response.json();

})

.then(data => {

document.getElementById('post-result').innerHTML = `

<h3>Пост успешно создан!</h3>

<p><strong>ID:</strong> ${data.id}</p>

<!-- Другие данные -->

`;

// Очистка формы

document.getElementById('post-title').value = '';

document.getElementById('post-body').value = '';

})

6. Обработка ошибок:

javascript

Copy

Download

.catch(error => {

document.getElementById('post-result').innerHTML =

`<p>Ошибка при отправке данных: ${error.message}</p>`;

});

Ключевые особенности кода

1. Использование JSONPlaceholder API:

   • GET-запрос к /users для получения списка пользователей

   • POST-запрос к /posts для создания новой записи

2. Обработка состояний:

   • Индикация выполнения запроса

   • Подробное отображение результатов

   • Обработка и отображение ошибок

3. Взаимодействие между заданиями:

   • Переменная lastPostData сохраняет данные между запросами

   • GET-запрос показывает последние отправленные POST-данные

4. Безопасность и валидация:

   • Проверка заполнения обязательных полей

   • Преобразование типов данных (parseInt для userId)

   • Обработка ошибок сети и HTTP

Как работает приложение

1. Пользователь нажимает "Выполнить GET запрос":

   • Отправляется запрос к API для получения списка пользователей

   • Результат отображается в виде форматированного списка

   • Если были POST-данные, они также отображаются

2. Пользователь заполняет форму и нажимает "Отправить POST запрос":

   • Данные валидируются

   • Отправляется POST-запрос с данными формы

   • При успехе отображается созданная запись

   • Данные сохраняются для отображения в GET-запросе

Вопросы для оценки самостоятельной работы:

1. Что такое AJAX?

2. Что такое GET и POST запросы? Чем они отличаются?

3. Что такие заголовки запроса и какие они могут быть?

4. Что такое заголовки ответа и какие они могут быть?

5. Как выполнить HTTP запрос?

6. Что такое XMLHttpRequest и fetch и в чем их отличие?

7. Что такое CORS

Подробные ответы на вопросы по AJAX и HTTP-запросам

1. Что такое AJAX?

AJAX (Asynchronous JavaScript and XML) - это технология, позволяющая выполнять асинхронные HTTP-запросы к серверу без полной перезагрузки страницы.

Основные характеристики:

• Асинхронность: Запросы выполняются в фоновом режиме, не блокируя интерфейс пользователя

• Обмен данными с сервером: Обычно в форматах JSON, XML, HTML или plain text

• Динамическое обновление страницы: DOM может обновляться частично на основе полученных данных

Как работает AJAX:

1. Пользователь совершает действие на странице (клик, ввод и т.д.)

2. JavaScript создает и отправляет запрос на сервер

3. Сервер обрабатывает запрос и возвращает ответ

4. JavaScript обрабатывает ответ и обновляет только нужную часть страницы

Пример использования:

• Автодополнение в поисковых строках

• Бесконечная лента новостей

• Динамическая загрузка контента

• Валидация форм в реальном времени

Преимущества:

• Улучшенный пользовательский опыт (нет полной перезагрузки страницы)

• Экономия трафика (передаются только необходимые данные)

• Быстрое реагирование интерфейса

2. Что такое GET и POST запросы? Чем они отличаются?

GET и POST - это два основных метода HTTP-запросов с принципиальными различиями.

GET-запросы:

• Назначение: Получение данных с сервера

• Данные: Передаются в URL как параметры строки запроса

• Пример: https://example.com/api/users?id=123

• Кэширование: Могут кэшироваться браузером

• Ограничения: Максимальная длина URL (обычно 2048 символов)

• Безопасность: Данные видны в URL, не подходит для конфиденциальной информации

• Идемпотентность: Запросы не должны изменять состояние сервера

POST-запросы:

• Назначение: Отправка данных на сервер

• Данные: Передаются в теле запроса (не видны в URL)

• Пример: Отправка формы с логином/паролем

• Кэширование: Обычно не кэшируются

• Ограничения: Нет жестких ограничений на объем данных

• Безопасность: Более безопасный способ передачи данных

• Идемпотентность: Могут изменять состояние сервера