Курс по программированию на JavaScript

Урок 23: Введение в AJAX

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

Основы AJAX

AJAX используется для улучшения взаимодействия с пользователем и повышения производительности веб-приложений. С помощью AJAX можно загружать данные с сервера и обновлять только часть веб-страницы, вместо полной перезагрузки. Это делает веб-приложения более интерактивными и отзывчивыми.

Принцип работы AJAX

Принцип работы AJAX заключается в следующем:

• Клиент создает объект XMLHttpRequest.
• Настраивает запрос к серверу с помощью метода open.
• Отправляет запрос с помощью метода send.
• Обрабатывает ответ сервера с помощью события onreadystatechange или метода onload.

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

Объект XMLHttpRequest используется для выполнения AJAX-запросов. Рассмотрим пример использования XMLHttpRequest для выполнения GET-запроса.

// Создание объекта XMLHttpRequest
let xhr = new XMLHttpRequest();

// Настройка запроса
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);

// Обработка ответа
xhr.onload = function() {
 if (xhr.status === 200) {
 console.log(JSON.parse(xhr.responseText));
 } else {
 console.error('Ошибка: ' + xhr.status);
 }
};

// Отправка запроса
xhr.send();

// Ответ сервера будет выведен в консоль

В этом примере мы создаем объект XMLHttpRequest, настраиваем GET-запрос к API, обрабатываем ответ и отправляем запрос.

Пример POST-запроса

Рассмотрим пример выполнения POST-запроса с отправкой данных на сервер.

// Создание объекта XMLHttpRequest
let xhr = new XMLHttpRequest();

// Настройка запроса
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

// Обработка ответа
xhr.onload = function() {
 if (xhr.status === 201) {
 console.log(JSON.parse(xhr.responseText));
 } else {
 console.error('Ошибка: ' + xhr.status);
 }
};

// Отправка запроса с данными
let data = JSON.stringify({ title: 'foo', body: 'bar', userId: 1 });
xhr.send(data);

// Ответ сервера будет выведен в консоль

В этом примере мы создаем объект XMLHttpRequest, настраиваем POST-запрос, отправляем данные в формате JSON и обрабатываем ответ сервера.

Упражнения

// HTML
<button id="loadData">Load Data</button>

// JavaScript
document.getElementById('loadData').addEventListener('click', function() {
 let xhr = new XMLHttpRequest();
 xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);
 xhr.onload = function() {
 if (xhr.status === 200) {
 let users = JSON.parse(xhr.responseText);
 users.forEach(user => {
 console.log(user.name);
 });
 } else {
 console.error('Ошибка: ' + xhr.status);
 }
 };
 xhr.send();
});

// Имена пользователей будут выведены в консоль

// HTML
<form id="postForm">
 <input type="text" id="title" placeholder="Title">
 <button type="submit">Submit</button>
</form>

// JavaScript
document.getElementById('postForm').addEventListener('submit', function(event) {
 event.preventDefault();
 let title = document.getElementById('title').value;
 let xhr = new XMLHttpRequest();
 xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
 xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
 xhr.onload = function() {
 if (xhr.status === 201) {
 console.log(JSON.parse(xhr.responseText));
 } else {
 console.error('Ошибка: ' + xhr.status);
 }
 };
 let data = JSON.stringify({ title: title, body: 'bar', userId: 1 });
 xhr.send(data);
});

// Ответ сервера будет выведен в консоль