Создайте AJAX-запросы с использованием XMLHttpRequest

Введение

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

Участники приобретут практические навыки в создании объектов XMLHttpRequest, настройке методов HTTP-запросов, обработке состояний ответа сервера и реализации базовых техник извлечения данных AJAX. Изучение этих основных принципов поможет разработчикам создавать более отзывчивые и интерактивные веб-опыты, которые повышают вовлеченность пользователей и производительность приложения.

Понять AJAX и асинхронные запросы

В этом шаге вы узнаете о AJAX (Asynchronous JavaScript and XML) и том, как он революционизирует веб-коммуникацию. AJAX позволяет веб-страницам динамически обновлять содержимое без перезагрузки всей страницы, создавая более гладкий и отзывчивый пользовательский опыт.

Что такое AJAX?

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

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

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

Простая демонстрация концепции AJAX

Создадим простой HTML-файл, чтобы проиллюстрировать концепцию асинхронных запросов. Для этого используем WebIDE.

Откройте WebIDE и создайте новый файл ~/project/ajax-demo.html:

<!doctype html>
<html>
  <head>
    <title>AJAX Demonstration</title>
  </head>
  <body>
    <h1>AJAX Example</h1>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("loadData")
        .addEventListener("click", function () {
          console.log("Button clicked: Initiating AJAX request");
          // Asynchronous request will be implemented in later steps
        });
    </script>
  </body>
</html>

Реальные сценарии использования AJAX

Автодополнение поисковой выдачи
Реальные обновления содержимого
Отправка форм без перезагрузки страницы
Пуллинг новых уведомлений
Получение данных из API

Почему асинхронные запросы важны

Асинхронные запросы решают несколько проблем веб-разработки:

Повышенный пользовательский опыт
Уменьшение нагрузки на сервер
Быстрые, более отзывчивые веб-приложения
Более эффективный обмен данными

Создать объект XMLHttpRequest

В этом шаге вы узнаете, как создать объект XMLHttpRequest, который является основным механизмом для отправки асинхронных запросов в JavaScript. Мы будем использовать HTML-файл из предыдущего шага и добавить функциональность XMLHttpRequest.

Откройте файл ~/project/ajax-demo.html в WebIDE и обновите раздел сценария, чтобы создать объект XMLHttpRequest:

<!doctype html>
<html>
  <head>
    <title>XMLHttpRequest Demonstration</title>
  </head>
  <body>
    <h1>AJAX Request Example</h1>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("loadData")
        .addEventListener("click", function () {
          // Create XMLHttpRequest object
          var xhr = new XMLHttpRequest();

          // Log the creation of XMLHttpRequest object
          console.log("XMLHttpRequest object created:", xhr);
        });
    </script>
  </body>
</html>

Разбираемся в объекте XMLHttpRequest

Объект XMLHttpRequest (XHR) - это встроенный API браузера, который позволяет вам:

Создавать HTTP-запросы
Отправлять данные на сервер
Получать данные от сервера
Обновлять отдельные части веб-страницы без перезагрузки

Основные методы XMLHttpRequest

open(): Инициализирует новый запрос
send(): Отправляет запрос на сервер
onreadystatechange: Отслеживает состояние запроса

Совместимость с браузерами

XMLHttpRequest поддерживается во всех современных браузерах, что делает его надежным выбором для AJAX-коммуникации. Современное веб-разработка также использует API Fetch, но XMLHttpRequest по-прежнему широко используется.

Пример вывода

При нажатии кнопки "Load Data" вы увидите запись в консоли, демонстрирующую создание объекта XMLHttpRequest:

XMLHttpRequest object created: XMLHttpRequest {...}

Настроить методы HTTP-запросов

В этом шаге вы узнаете, как настраивать методы HTTP-запросов с использованием XMLHttpRequest. Мы обновим файл ajax-demo.html, чтобы показать, как настраивать разные типы HTTP-запросов.

Откройте файл ~/project/ajax-demo.html в WebIDE и измените раздел сценария:

<!doctype html>
<html>
  <head>
    <title>HTTP Request Methods</title>
  </head>
  <body>
    <h1>AJAX Request Methods</h1>
    <button id="getButton">GET Request</button>
    <button id="postButton">POST Request</button>
    <div id="result"></div>

    <script>
      // GET Request Configuration
      document
        .getElementById("getButton")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();

          // Configure GET request
          xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

          // Set request headers
          xhr.setRequestHeader("Content-Type", "application/json");

          // Log request details
          console.log("GET Request Configured");

          // Send the request
          xhr.send();
        });

      // POST Request Configuration
      document
        .getElementById("postButton")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();

          // Configure POST request
          xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);

          // Set request headers
          xhr.setRequestHeader("Content-Type", "application/json");

          // Prepare data to send
          var data = JSON.stringify({
            title: "foo",
            body: "bar",
            userId: 1
          });

          // Log request details
          console.log("POST Request Configured");

          // Send the request with data
          xhr.send(data);
        });
    </script>
  </body>
</html>

Методы HTTP-запросов

Самые распространенные методы HTTP-запросов:

GET: Получить данные с сервера
POST: Отправить данные для обработки на сервере
PUT: Обновить существующие данные
DELETE: Удалить данные

Основные методы для настройки запросов

open(method, url, async):
- method: Метод HTTP (GET, POST и т.д.)
- url: Конечная точка сервера
- async: Булево значение для асинхронного запроса (обычно true)
setRequestHeader(): Установить заголовки запроса
send(): Отправить запрос (с необязательными данными)

Пример вывода

При нажатии на кнопки вы увидите записи в консоли:

GET Request Configured
POST Request Configured

Обрабатывать состояния ответа сервера

В этом шаге вы узнаете, как обрабатывать разные состояния XMLHttpRequest и обрабатывать ответы сервера. Мы обновим файл ajax-demo.html, чтобы показать обработку ответа.

Откройте файл ~/project/ajax-demo.html в WebIDE и измените раздел сценария:

<!doctype html>
<html>
  <head>
    <title>Server Response Handling</title>
  </head>
  <body>
    <h1>AJAX Response States</h1>
    <button id="fetchData">Fetch Data</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("fetchData")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();
          var resultDiv = document.getElementById("result");

          // Отслеживаем состояния запроса
          xhr.onreadystatechange = function () {
            // Логируем текущее состояние готовности
            console.log("Ready State:", xhr.readyState);

            // Проверяем, завершен ли запрос и был ли он успешным
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                // Успешный ответ
                try {
                  var data = JSON.parse(xhr.responseText);
                  resultDiv.innerHTML = `
                                <h3>Data Received:</h3>
                                <pre>${JSON.stringify(data, null, 2)}</pre>
                            `;
                  console.log("Request Successful");
                } catch (error) {
                  resultDiv.innerHTML = "Error parsing response";
                  console.error("Parsing Error:", error);
                }
              } else {
                // Обработка ошибок
                resultDiv.innerHTML = `Error: ${xhr.status}`;
                console.error("Request Failed", xhr.status);
              }
            }
          };

          // Конфигурируем и отправляем запрос
          xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
          xhr.send();
        });
    </script>
  </body>
</html>

Состояния готовности XMLHttpRequest

XMLHttpRequest имеет 5 состояний готовности:

0: UNSENT (запрос не инициализирован)
1: OPENED (соединение установлено)
2: HEADERS_RECEIVED (запрос получен)
3: LOADING (обрабатывается запрос)
4: DONE (запрос завершен)

Основные концепции обработки ответа

Используйте onreadystatechange для отслеживания прогресса запроса
Проверьте readyState === 4 для завершенных запросов
Проверьте status === 200 для успешных ответов
Используйте responseText или responseXML для доступа к данным
Реализуйте обработку ошибок для различных кодов статуса

Пример вывода

При нажатии на "Fetch Data" вы увидите записи в консоли:

Ready State: 1
Ready State: 2
Ready State: 3
Ready State: 4
Request Successful

Реализовать базовый запрос данных с использованием AJAX

В этом шаге вы узнаете, как получать и отображать данные из API с использованием AJAX. Мы создадим простое приложение для управления пользователями, которое получает и отображает информацию о пользователях.

Откройте файл ~/project/ajax-demo.html в WebIDE и замените его содержимое следующим кодом:

<!doctype html>
<html>
  <head>
    <title>User Management App</title>
    <style>
      #userList {
        margin-top: 20px;
        border: 1px solid #ddd;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>User Management</h1>
    <button id="fetchUsers">Fetch Users</button>
    <div id="userList"></div>

    <script>
      document
        .getElementById("fetchUsers")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();
          var userListDiv = document.getElementById("userList");

          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                try {
                  var users = JSON.parse(xhr.responseText);

                  // Очищаем предыдущее содержимое
                  userListDiv.innerHTML = "<h2>User List</h2>";

                  // Создаем список пользователей
                  users.forEach(function (user) {
                    var userDiv = document.createElement("div");
                    userDiv.innerHTML = `
                                    <p>
                                        <strong>Name:</strong> ${user.name}<br>
                                        <strong>Email:</strong> ${user.email}<br>
                                        <strong>Company:</strong> ${user.company.name}
                                    </p>
                                `;
                    userListDiv.appendChild(userDiv);
                  });
                } catch (error) {
                  userListDiv.innerHTML = "Error parsing user data";
                }
              } else {
                userListDiv.innerHTML = `Error fetching users: ${xhr.status}`;
              }
            }
          };

          // Получаем пользователей из API JSONPlaceholder
          xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
          xhr.send();
        });
    </script>
  </body>
</html>

Основные концепции запроса данных

Используйте публичное API (JSONPlaceholder) для демонстрации
Получайте несколько записей о пользователях
Анализируйте JSON-ответ 4.Динамически создавайте HTML-элементы
Обрабатывайте потенциальные ошибки

Пример вывода

При нажатии на "Fetch Users" вы увидите список пользователей с их деталями:

User List
Name: Leanne Graham
Email: Sincere@april.biz
Company: Romaguera-Crona

Name: Ervin Howell
Email: Shanna@melissa.tv
Company: Deckow-Crist

... (более пользователей)

Лучшие практики

Всегда проверяйте и очищайте данные
Реализуйте обработку ошибок
Используйте try-catch для разбора JSON
Создавайте динамический и отзывчивый интерфейс пользователя

Резюме

В этом лабе участники исследуют основы AJAX и асинхронного веб-общения, узнавая, как создавать динамические веб-опыты без полной перезагрузки страницы. В лабе рассматриваются ключевые концепции, такие как неблокирующие запросы, обмен данными в фоновом режиме и частичные обновления страницы, демонстрируется, как XMLHttpRequest позволяет обеспечить беспрепятственный взаимодействие между веб-клиентами и серверами.

Пробегая по практическим примерам и понимая основные принципы AJAX, ученики получают представление о реализации отзывчивых веб-приложений, которые могут динамически получать и отображать данные. В лабе рассматриваются важные методы создания объектов XMLHttpRequest, настройки HTTP-методов, обработки ответов сервера и асинхронного получения данных, что дает полноценную основу для современных веб-разработочных практик.