이번 강의에서는 AJAX를 사용하여 실시간 검색 기능을 구현해보겠습니다. AJAX를 이용하면 페이지를 새로 고침하지 않고도 서버와 통신하여 검색 결과를 즉시 업데이트할 수 있습니다. 이를 통해 사용자 경험을 크게 향상시킬 수 있습니다.
1. 프로젝트 개요
우리는 간단한 검색 입력란을 만들고, 사용자가 입력할 때마다 AJAX를 통해 서버에 요청을 보내고 결과를 실시간으로 표시하는 기능을 구현할 것입니다.
2. HTML 작성
먼저, 검색 입력란과 결과를 표시할 영역을 HTML로 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AJAX 실시간 검색</title>
<style>
#results {
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
}
.result-item {
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>실시간 검색</h1>
<input type="text" id="search-input" placeholder="검색어를 입력하세요">
<div id="results"></div>
<script src="script.js"></script>
</body>
</html>
3. 서버 작성 (간단한 예제)
서버 측에서는 검색 요청을 받아서 데이터베이스나 리스트에서 검색어에 해당하는 결과를 반환합니다. 여기서는 간단한 예제로 JSON 파일을 사용합니다.
예제 search.json 파일
[
{"name": "사과"},
{"name": "바나나"},
{"name": "체리"},
{"name": "데이터"},
{"name": "돼지"},
{"name": "초록"},
{"name": "과일"}
]
간단한 Node.js 서버 예제 (Express 사용)
const express = require('express');
const app = express();
const port = 3000;
const data = require('./search.json');
app.use(express.static('public'));
app.get('/search', (req, res) => {
const query = req.query.q.toLowerCase();
const results = data.filter(item => item.name.toLowerCase().includes(query));
res.json(results);
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
4. JavaScript 작성
이제 HTML 페이지에서 입력한 검색어를 서버에 전송하고, 결과를 받아와서 표시하는 JavaScript를 작성합니다.
script.js 파일
document.getElementById('search-input').addEventListener('keyup', function() {
const query = this.value;
if (query.length > 0) {
const xhr = new XMLHttpRequest();
xhr.open('GET', `/search?q=${query}`, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const results = JSON.parse(xhr.responseText);
displayResults(results);
}
};
xhr.send();
} else {
document.getElementById('results').innerHTML = '';
}
});
function displayResults(results) {
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = '';
results.forEach(result => {
const div = document.createElement('div');
div.className = 'result-item';
div.textContent = result.name;
resultsDiv.appendChild(div);
});
}
5. 프로젝트 설명 및 실행
· HTML 파일을 index.html로 저장하고, script.js 파일과 함께 같은 디렉토리에 둡니다.
· Node.js 서버 코드를 server.js로 저장하고, search.json 파일도 같은 디렉토리에 둡니다.
· 서버를 실행합니다.
node server.js· 브라우저에서 http://localhost:3000을 열고 실시간 검색 기능을 테스트합니다.
이 프로젝트를 통해 간단한 AJAX의 실시간 검색 기능을 구현해 보았습니다. AJAX를 활용하면 사용자 경험을 크게 향상시킬 수 있는 다양한 인터랙티브 웹 애플리케이션을 만들 수 있습니다.
- 이전 수업 목록
'프로그래밍 > Ajax' 카테고리의 다른 글
| [Node.js 강의 시리즈] 8강 - 경로 모듈 (path) (0) | 2024.07.03 |
|---|---|
| [AJAX 수업] 10강 - 종합 정리 및 Q&A (0) | 2024.06.21 |
| [AJAX 수업] 8강 - AJAX와 보안 (0) | 2024.06.19 |
| [AJAX 수업] 7강 - AJAX와 RESTful API (0) | 2024.06.18 |
| [AJAX 수업] 6강 - AJAX와 jQuery (1) | 2024.06.17 |