JavaScript 로 AJAX 요청 마스터하기

소개

이 프로젝트에서는 JavaScript 를 사용하여 백엔드 서버에서 데이터를 가져와 웹 페이지에 결과를 표시하기 위해 AJAX (Asynchronous JavaScript and XML) 요청을 구현하는 방법을 배우게 됩니다.

👀 미리보기

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다:

HTML 을 사용하여 웹 페이지에 검색 상자와 검색 버튼을 만드는 방법
검색 버튼에 이벤트를 바인딩하고 입력 필드에서 검색 텍스트를 검색하는 방법
JavaScript 를 사용하여 검색 텍스트를 매개변수로 백엔드 서버에 AJAX GET 요청을 보내는 방법
서버에서 반환된 JSON 데이터를 파싱하고 웹 페이지에 검색 결과를 표시하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

JavaScript 를 사용하여 백엔드 서버에서 데이터를 가져오기 위해 AJAX (Asynchronous JavaScript and XML) 요청을 구현합니다.
동적으로 HTML 요소를 생성하고 추가하여 웹 페이지에 검색 결과를 표시합니다.
사용자 친화적인 방식으로 검색 결과를 형식화하고 표시합니다.

검색 상자 및 검색 버튼 설정

이 단계에서는 index.jsp 페이지에서 검색 상자와 검색 버튼을 만드는 방법을 배우게 됩니다.

/src/main/webapp/ 디렉토리에 있는 index.jsp 파일을 엽니다.
<body> 섹션 안에 다음 HTML 코드를 추가합니다:

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

이 코드는 ID 가 searchInput인 텍스트 입력 필드와 ID 가 searchButton인 버튼을 생성합니다. 버튼에는 클릭 시 search() 함수를 호출하는 onclick 속성이 있습니다. 3. index.jsp 파일을 저장합니다.

✨ 솔루션 확인 및 연습

검색 기능 구현

이 단계에서는 검색 기능을 처리하기 위한 JavaScript 코드를 추가하는 방법을 배우게 됩니다.

index.jsp 파일의 <head> 섹션 안에 다음 JavaScript 코드를 추가합니다:

    <script>
        function search() {
            var searchText = document.getElementById("searchInput").value;
            console.log("Search Text:", searchText); // Output search text to console
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/UserServlet?username=" + searchText, true); // Send GET request and append username as parameter to 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>";

            // Check if results is an array
            if (Array.isArray(results)) {
                // Loop through each user object in the results array
                results.forEach(function (user) {
                // Create a new div element for displaying user information
                var userDiv = document.createElement("div");
                userDiv.className = "user-info"; // Add a class for styling

                // Add user information to the new div element
                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>
                        `;

                // Append the new div element to the search results div
                searchResultsDiv.appendChild(userDiv);
                });
            } else {
                // If results is not an array, display corresponding message
                searchResultsDiv.innerHTML = "<p>No results found</p>";
            }
        }
    </script>

이 JavaScript 코드는 검색 기능을 처리합니다. 사용자가 "Search" 버튼을 클릭하면 search() 함수가 호출되어 검색 텍스트를 매개변수로 /UserServlet에 AJAX 요청을 보냅니다. 서버에서 반환된 응답은 displayResults() 함수를 사용하여 파싱되어 searchResults div 에 표시됩니다. 2. index.jsp 파일을 저장합니다.

이제 JavaScript 를 사용하여 AJAX 요청의 구현을 완료했습니다. 프로젝트를 실행하고 검색 기능을 테스트할 수 있습니다.