반응형
AJAX란 무엇인가?
AJAX(Asynchronous JavaScript and XML)는 웹 페이지를 동적으로 업데이트할 수 있는 기술입니다. 전통적인 웹 페이지는 사용자가 서버에 요청을 보낼 때마다 전체 페이지를 다시 로드해야 했습니다.
하지만 AJAX를 사용하면, 페이지의 일부만 업데이트할 수 있어 사용자 경험이 크게 향상됩니다. AJAX는 비동기 방식으로 데이터를 전송하므로, 페이지를 새로 고침하지 않고도 백그라운드에서 서버와 통신할 수 있습니다.
AJAX의 주요 구성 요소
| XMLHttpRequest 객체 | 서버와 상호작용하는 데 사용되는 JavaScript 객체입니다. |
| 서버 | 요청을 받고, 필요한 데이터를 제공하거나 요청된 작업을 수행합니다. |
| JavaScript 및 HTML/CSS | 사용자 인터페이스를 구성하고, 서버에서 받은 데이터를 표시합니다. |
AJAX의 동작 원리
1 사용자가 웹 페이지에서 어떤 행동을 합니다 (예: 버튼 클릭). 2 JavaScript는 XMLHttpRequest 객체를 생성하고, 서버로 요청을 보냅니다. 3 서버는 요청을 처리하고 응답을 반환합니다. 4 JavaScript는 서버의 응답을 처리하고, 페이지의 일부분을 업데이트합니다.
AJAX의 장점
페이지 전체를 다시 로드하지 않고 필요한 부분만 업데이트합니다. 필요한 데이터만 요청하므로 서버의 부담이 줄어듭니다. 페이지가 끊김 없이 동작하므로 사용자에게 더 나은 경험을 제공합니다.
간단한 AJAX 요청 예제
아래는 버튼을 클릭하면 서버에서 데이터를 가져와 페이지에 표시하는 간단한 AJAX 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX 예제</title>
<script>
function loadData() {
// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
// 요청 설정: GET 방식, 비동기 요청
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
// 요청 상태가 변할 때 호출될 콜백 함수
xhr.onreadystatechange = function () {
// 요청이 완료되었고, 응답이 성공적으로 수신된 경우
if (xhr.readyState === 4 && xhr.status === 200) {
// JSON 응답을 JavaScript 객체로 변환
var data = JSON.parse(xhr.responseText);
// 데이터를 HTML 요소에 표시
document.getElementById('result').innerHTML = `
<h3>${data.title}</h3>
<p>${data.body}</p>
`;
}
};
// 요청 전송
xhr.send();
}
</script>
</head>
<body>
<h1>AJAX 예제</h1>
<button onclick="loadData()">데이터 로드</button>
<div id="result"></div>
</body>
</html>이 예제에서는 JSONPlaceholder API에서 첫 번째 게시물(posts/1)의 데이터를 가져와, 응답을 처리한 후 result라는 div 요소에 제목과 본문을 표시합니다.
HTML 코드
| <head>: 문서의 메타데이터를 포함합니다. |
<meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정합니다. <meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 장치에서 페이지의 레이아웃을 적절히 조정합니다. <title>AJAX 예제</title>: 브라우저 탭에 표시될 문서 제목입니다. |
| <body>: 문서의 본문 내용을 포함합니다. | <h1>AJAX 예제</h1>: 페이지 제목입니다. <button onclick="loadData()">데이터 로드</button>: 클릭하면 loadData 함수를 호출하는 버튼입니다. <div id="result"></div>: AJAX 요청 결과를 표시할 요소입니다. |
JavaScript 코드
| function loadData() | loadData라는 이름의 함수를 정의합니다. 이 함수는 버튼 클릭 시 호출됩니다. |
| var xhr = new XMLHttpRequest() | 서버와의 비동기 통신을 담당하는 XMLHttpRequest 객체를 생성합니다. |
| xhr.open( 'GET', 'https://jsonplaceholder.typicode.com/posts/1', true );: |
open 메서드를 사용하여 요청을 초기화합니다. 'GET': HTTP 요청 방법을 지정합니다. 'https://jsonplaceholder.typicode.com/posts/1': 데이터를 가져올 URL입니다. true: 비동기 요청 여부를 나타냅니다. true이면 비동기, false이면 동기 요청입니다. |
| xhr.onreadystatechange = function () { ... } | onreadystatechange 이벤트 핸들러를 설정하여 요청 상태가 변할 때 호출되는 콜백 함수를 정의합니다. |
| if (xhr.readyState === 4 && xhr.status === 200): | 요청이 완료되고(readyState 4), 서버 응답이 성공적(HTTP 상태 코드 200)일 때 실행됩니다. |
| var data = JSON.parse(xhr.responseText);: | 서버의 JSON 응답을 JavaScript 객체로 변환합니다. |
| document.getElementById('result').innerHTML = ...: |
변환된 데이터를 HTML 요소에 표시합니다. |
| hr.send() |
요청을 서버로 전송합니다. |
결론
AJAX는 현대 웹 개발에서 매우 중요한 기술 중 하나입니다. 페이지를 동적으로 업데이트하고, 사용자 경험을 향상시키는 데 큰 도움이 됩니다. 이번 글에서 소개한 기본 개념과 예제를 통해, 여러분도 쉽게 AJAX를 활용할 수 있을 것입니다.
반응형
'Programming' 카테고리의 다른 글
| Robots.txt: 웹사이트의 문지기 (0) | 2024.06.23 |
|---|---|
| Javascript $ (0) | 2024.06.21 |
| AJS: Atlassian JavaScript Library (0) | 2024.06.21 |
| UML - ER Diagram (0) | 2024.06.21 |
| UML - Class Diagram (0) | 2024.06.21 |
