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

Курс по программированию на 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 и обрабатываем ответ сервера.

Упражнения

Упражнение 1: Выполнение GET-запроса

Создайте HTML-документ с кнопкой <button id="loadData">Load Data</button>. Используйте XMLHttpRequest для выполнения GET-запроса к API https://jsonplaceholder.typicode.com/users при нажатии на кнопку. Выведите имена пользователей в консоль.

Решение:

// 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-документ с кнопкой, и добавили обработчик события click, который выполняет GET-запрос к API и выводит имена пользователей в консоль.

Упражнение 2: Выполнение POST-запроса

Создайте HTML-документ с формой <form id="postForm"><input type="text" id="title" placeholder="Title"><button type="submit">Submit</button></form>. Используйте XMLHttpRequest для выполнения POST-запроса к API https://jsonplaceholder.typicode.com/posts при отправке формы. Отправьте введенные данные и выведите ответ сервера в консоль.

Решение:

// 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);
});
// Ответ сервера будет выведен в консоль

Объяснение: Мы создали HTML-документ с формой, и добавили обработчик события submit, который выполняет POST-запрос к API с данными, введенными в форму, и выводит ответ сервера в консоль.

Категория: JavaScript | Просмотров: 9 | Добавил: Admin | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: