1. AJAX란?
1.1 정의
- AJAX(Asynchronous JavaScript and XML)는 웹 페이지를 새로 고침하지 않고도 서버와 비동기적으로 데이터를 주고받을 수 있게 해주는 기술입니다.
- XML뿐만 아니라 JSON, HTML, 일반 텍스트 등 다양한 데이터 형식을 사용할 수 있습니다.
1.2 AJAX의 주요 목적
- 사용자 경험 개선:
- 페이지 전체를 다시 로드하지 않고 필요한 데이터만 갱신.
- 효율적인 데이터 통신:
- 필요한 데이터만 서버에서 가져와 네트워크 사용량 감소.
2. AJAX의 주요 구성 요소
2.1 핵심 기술
- HTML/CSS: 사용자 인터페이스(UI) 설계.
- JavaScript: 클라이언트와 서버 간 데이터 요청 및 응답 처리.
- XMLHttpRequest 또는 Fetch API: 서버와 비동기 데이터 통신.
- 서버 측 스크립트: 데이터를 처리하고 응답 반환 (예: Spring, Node.js).
- JSON/XML: 서버와 클라이언트 간 데이터 교환 형식.
3. AJAX 동작 흐름
sequenceDiagram
participant User as 사용자 (브라우저)
participant JavaScript as JavaScript
participant Server as 서버
User->>JavaScript: 이벤트 트리거 (버튼 클릭 등)
JavaScript->>Server: 비동기 요청 (AJAX)
Server->>JavaScript: 데이터 응답 (JSON, XML 등)
JavaScript->>User: 페이지 일부 업데이트
4. AJAX의 장단점
4.1 장점
- 빠른 인터페이스:
- 전체 페이지를 새로 고치지 않고 필요한 부분만 업데이트.
- 사용자 경험 향상:
- 데이터가 즉시 로드되어 앱처럼 동작.
- 네트워크 효율성:
- 필요한 데이터만 요청, 대역폭 절약.
4.2 단점
- 검색 엔진 최적화(SEO) 문제:
- 콘텐츠가 동적으로 로드되므로 검색 엔진이 크롤링하기 어려움.
- 브라우저 호환성:
- 오래된 브라우저에서 AJAX 동작이 제한될 수 있음.
- 복잡성 증가:
- 동기 방식보다 디버깅과 유지보수가 어려움.
5. AJAX 구현
5.1 XMLHttpRequest로 AJAX 구현
HTML
<!DOCTYPE html>
<html>
<head>
<title>AJAX 예제</title>
</head>
<body>
<button id="loadData">데이터 가져오기</button>
<div id="result"></div>
<script>
document.getElementById("loadData").addEventListener("click", function () {
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
};
xhr.send();
});
</script>
</body>
</html>
5.2 Fetch API로 AJAX 구현
HTML
<!DOCTYPE html>
<html>
<head>
<title>Fetch API 예제</title>
</head>
<body>
<button id="loadData">데이터 가져오기</button>
<div id="result"></div>
<script>
document.getElementById("loadData").addEventListener("click", function () {
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(response => response.json())
.then(data => {
document.getElementById("result").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
})
.catch(error => console.error("Error:", error));
});
</script>
</body>
</html>
6. AJAX와 Spring REST API 연동
6.1 Spring 컨트롤러
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/api")
public class ApiController {
@GetMapping("/data")
public Map<String, String> getData() {
Map<String, String> data = new HashMap<>();
data.put("title", "AJAX와 Spring 통신");
data.put("content", "이 데이터는 서버에서 가져온 내용입니다.");
return data;
}
}
6.2 클라이언트 (HTML + Fetch API)
<!DOCTYPE html>
<html>
<head>
<title>AJAX와 Spring REST API</title>
</head>
<body>
<button id="loadData">데이터 가져오기</button>
<div id="result"></div>
<script>
document.getElementById("loadData").addEventListener("click", function () {
fetch("/api/data")
.then(response => response.json())
.then(data => {
document.getElementById("result").innerHTML = `
<h2>${data.title}</h2>
<p>${data.content}</p>
`;
})
.catch(error => console.error("Error:", error));
});
</script>
</body>
</html>
참조
개발자