Мастерство в запросах AJAX с использованием JavaScript

Введение

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

👀 Предварительный просмотр

Предварительный просмотр проекта AJAX

🎯 Задачи

В этом проекте вы научитесь:

Создавать поле поиска и кнопку поиска на веб-странице с использованием HTML
Привязывать событие к кнопке поиска и получать текст поиска из поля ввода
Использовать JavaScript для отправки AJAX GET-запроса на сервер с текстом поиска в качестве параметра
Анализировать JSON-данные, возвращаемые сервером, и отображать результаты поиска на веб-странице

🏆 Достижения

После завершения этого проекта вы сможете:

Реализовывать запросы AJAX (Asynchronous JavaScript and XML) с использованием JavaScript для извлечения данных с сервера
Отображать результаты поиска на веб-странице путем динамического создания и добавления HTML-элементов
Форматировать и отображать результаты поиска в удобочитаемом виде

Настройка поля поиска и кнопки поиска

В этом шаге вы научитесь создавать поле поиска и кнопку поиска на странице index.jsp.

Откройте файл index.jsp, расположенный в директории /src/main/webapp/.
Добавьте следующий HTML-код внутри секции <body>:

<input type="text" id="searchInput" />
<button id="searchButton" onclick="search()">Search</button>
<div id="searchResults"></div>

Это создает текстовое поле ввода с идентификатором searchInput и кнопку с идентификатором searchButton. Кнопка имеет атрибут onclick, который вызывает функцию search() при нажатии. 3. Сохраните файл index.jsp.

Реализовать функциональность поиска

В этом шаге вы научитесь добавлять JavaScript-код для обработки функциональности поиска.

Внутри секции <head> файла index.jsp добавьте следующий JavaScript-код:

    <script>
        function search() {
            var searchText = document.getElementById("searchInput").value;
            console.log("Search Text:", searchText); // Выводит текст поиска в консоль
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/UserServlet?username=" + searchText, true); // Отправляет GET-запрос и добавляет имя пользователя в качестве параметра в URL
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                var response = JSON.parse(xhr.responseText);
                displayResults(response);
                }
            };
            xhr.send();
            }

            function displayResults(results) {
            var searchResultsDiv = document.getElementById("searchResults");
            searchResultsDiv.innerHTML = "<p>Search Results:</p>";

            // Проверяет, является ли результат массивом
            if (Array.isArray(results)) {
                // Перебирает каждый объект пользователя в массиве результатов
                results.forEach(function (user) {
                // Создает новый элемент div для отображения информации о пользователе
                var userDiv = document.createElement("div");
                userDiv.className = "user-info"; // Добавляет класс для стилизации

                // Добавляет информацию о пользователе в новый элемент div
                userDiv.innerHTML = `
                            <p>User ID: ${user.userId}</p>
                            <p>User Name: ${user.userName}</p>
                            <p>User Gender: ${user.userGender === 1? "Male" : "Female"}</p>
                            <p>User Age: ${user.userAge}</p>
                            <p>User Nation: ${user.userNation}</p>
                            <p>User Email: ${user.userEmail}</p>
                            <p>User Phone: ${user.userPhone}</p>
                            <p>User Address: ${user.userAddr}</p>
                        `;

                // Добавляет новый элемент div в div с результатами поиска
                searchResultsDiv.appendChild(userDiv);
                });
            } else {
                // Если результат не является массивом, отображает соответствующее сообщение
                searchResultsDiv.innerHTML = "<p>No results found</p>";
            }
        }
    </script>

Этот JavaScript-код обрабатывает функциональность поиска. Когда пользователь нажимает кнопку "Search", вызывается функция search(), которая отправляет AJAX-запрос на /UserServlet с текстом поиска в качестве параметра. Затем ответ сервера разбирается и отображается в div searchResults с использованием функции displayResults(). 2. Сохраните файл index.jsp.

Теперь вы завершили реализацию AJAX-запросов с использованием JavaScript. Вы можете запустить проект и протестировать функциональность поиска.

Запуск

Наконец, вы можете скомпилировать и запустить код в терминале с использованием следующих команд:

cd ServletAjaxProject
mvn tomcat7:run

Вы можете ознакомиться с следующими эффектами запуска:

пример функциональности поиска

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.

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