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 동작 흐름
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>
const xhr = new XMLHttpRequest();: 새로운 XMLHttpRequest 객체를 생성합니다. 이 객체는 AJAX 요청을 보내고 응답을 받을 수 있게 해줍니다.
xhr.open("GET", "<https://jsonplaceholder.typicode.com/posts/1 >", true); : GET 요청을 준비합니다. 요청할 URL은https://jsonplaceholder.typicode.com/posts/1입니다 . 이 URL은 JSONPlaceholder라는 무료 API로, 테스트용 데이터를 제공합니다.
xhr.onreadystatechange = function () {...};: 요청의 상태가 변경될 때마다 호출되는 콜백 함수를 정의합니다. 이 함수는 요청의 상태를 확인하고, 요청이 완료되었는지 확인합니다.
if (xhr.readyState === 4 && xhr.status === 200) {...}: 요청이 완료되고(readyState가 4) 응답이 성공적일 때(status가 200) 실행됩니다.
document.getElementById("result").innerHTML = xhr.responseText;: 응답 데이터를 result div에 표시합니다. xhr.responseText는 서버로부터 받은 응답의 텍스트입니다.
xhr.send(); : 요청을 서버에 전송합니다.
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;
}
}
getData() 메서드 :
Map<String, String> 타입의 데이터를 생성하여 JSON 형식으로 반환.
data.put(…) 메서드를 사용하여 “title”과 “content”라는 키에 각각의 값을 추가합니다.
이 메서드는 클라이언트가 /api/data에 GET 요청을 보낼 때 호출됩니다.
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>
document.getElementById("loadData").addEventListener("click", ...): 버튼 클릭 이벤트를 감지하여 함수를 실행합니다.
fetch("/api/data"): /api/data 경로로 GET 요청을 보냅니다. 이 요청은 Spring Boot 서버의 getData() 메서드와 연결됩니다.
.then(response => response.json()): 서버로부터 받은 응답을 JSON 형식으로 변환합니다.
.then(data => {...}): 변환된 JSON 데이터를 사용하여 결과를 HTML에 삽입합니다. data.title과 data.content를 사용하여 제목과 내용을 표시합니다.
.catch(error => console.error("Error:", error)): 요청 중 오류가 발생할 경우 콘솔에 오류 메시지를 출력합니다.
참조
MDN: Using XMLHttpRequest MDN: Fetch API 