소개
이 프로젝트에서는 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 요청의 구현을 완료했습니다. 프로젝트를 실행하고 검색 기능을 테스트할 수 있습니다.
실행
마지막으로, 다음 명령을 사용하여 터미널에서 코드를 컴파일하고 실행할 수 있습니다:
cd ServletAjaxProject
mvn tomcat7:run
다음 실행 효과를 참조할 수 있습니다:
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
