AJAX(Asynchronous JavaScript and XML)는 웹페이지를 새로 고침하지 않고도 서버와 데이터를 주고 받을 수 있게 해주는 기술입니다. Ajax를 사용하면 웹 애들리케이션의 성능과 사용자 경험을 크게 향상시킬 수 있습니다.
1. Ajax란?
Ajax는 다음의 약자입니다.
- Asynchronous: 비동기적으로 서버와 통신하여 페이지 새로고침 없이 데이터를 주고받습니다.
- JavaScript: JavaScript를 사용하여 Ajax요청을 만듭니다.
- XML: 초기에는 XML를 사용했으나, 현재는 JSON 형식을 더 많이 사용합니다
Ajax의 기본 과정은 다음과 같습니다.
- 클라이언트(웹 브라우저)가 이벤트(예:버튼클릭)를 트리거합니다.
- JavaScript가 서버로 요청을 보냅니다.
- 서버가 요청을 처리하고 응답을 보냅니다.
- JavaScript가 응답을 처리하고 웹 페이지의 내용을 동적으로 업데이트합니다.
2. XMLHttpRequest를 사용한 Ajax
XMLHttpRequest는 Ajax 요청을 만드는 전통적인 방법입니다. 다음은 XMLHttpRequest를 사용하여 서버에서 데이터를 가져오는 간단한 예제 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Example with XMLHttpRequest</title>
</head>
<body>
<div id="content">Loading...</div>
<button id="loadData">Load Data</button> <!-- 데이터를 불러오는 버튼 -->
<script>
document.getElementById('loadData').addEventListener('click', function() {
// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
// 요청을 설정: GET 요청을 'https://jsonplaceholder.typicode.com/posts/1' 경로로 비동기적으로 보냄
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
// 요청이 완료되었을 때 실행할 콜백 함수
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) { // HTTP 상태 코드가 200번대일 경우 성공
var response = JSON.parse(xhr.responseText); // JSON 응답을 JavaScript 객체로 변환
document.getElementById('content').textContent = response.title; // 응답 데이터의 제목을 페이지에 표시
} else {
document.getElementById('content').textContent = 'Error loading data'; // 오류 메시지 표시
}
};
// 요청을 전송
xhr.send();
});
</script>
</body>
</html>
위 예제는 버튼을 클릭하면 JSONplaceholder에서 샘플 데이터를 가져와서 페이지에 표시합니다.
'XMLHttpRequest' 객체를 사용해서 서버로 GET 요청을 보내고, 응답을 받아서 'div' 요소의 내용을 업테이트합니다.
3. Fetch API를 사용한 Ajax
Fetch API는 XMLHttpRequest의 대안으로, 프로미스를 사용하여 비동기 요청을 처리합니다. 코드를 더 간결하고 읽기 쉽게 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Example with Fetch</title>
</head>
<body>
<div id="content">Loading...</div>
<button id="loadData">Load Data</button> <!-- 데이터를 불러오는 버튼 -->
<script>
document.getElementById('loadData').addEventListener('click', function() {
// Fetch API를 사용해 GET 요청 보내기
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json(); // 응답을 JSON 형태로 변환
})
.then(data => {
// 변환된 JSON 데이터를 사용해 페이지 업데이트
document.getElementById('content').textContent = data.title;
})
.catch(error => {
// 오류 처리
document.getElementById('content').textContent = 'Error loading data: ' + error.message;
});
});
</script>
</body>
</html>
이 예제는 Fetch API를 사용하여 동일한 데이터를 가져오는 방식입니다. Fetch API는 프로미스를 사용하여 비동기 요청을 처리하며, 코드를 더 간결하게 작성할 수 있게 도와줍니다.
4. Ajax의 장점
- 비동기 처리: 서버와 비동기적으로 통신아여 페이지 새로고침 없이 데이터를 주고받을 수 있습니다
- 빠른 반응성: 필요한 데이터만 부분적으로 로드하므로 사용자 경험이 향상됩니다.
- 서버 부화 감소: 전체 페이지가 아닌 필요한 데이터만 요청하므로 서버 부하가 줄어듭니다.
5. Ajax의 단점
- 검색 엔진 최적화(SEO): 검색 엔진이 JavaScript로 동적으로 로드된 콘텐츠를 인덱싱하기 어려울 수 있습니다.
- 복잡성 증가: 비동기 코드와 상태 산태 관리를 처이하는 것이 복잡해질 수 있습니다.
- CORS 문제: 다른 도메인에서 데이터를 요청할 때 교차 출처 리소스 공유(CORS)문제가 발생할 수 있습니다.
Ajax는 웹 어플리케이션에서 중요한 역할을 하며, 이를 통해 사용자 경험을 개선할 수 있습니다.
XMLHttpRequest와 Fetch API를 활용하여 다양한 방식으로 Ajax요청을 구현할 수 있습니다. Ajax를 통해 페이지 새로고침 없이 서버와 데이터를 주고받을 수 있는 방법을 익히면, 더 나은 사용자 경험을 제공할 수 있는 웹 어플리케이션을 개발할 수 있습니다.
'공부 > JavaScript' 카테고리의 다른 글
| JavaScript의 변수 (0) | 2024.05.27 |
|---|---|
| JavaScript 언어의 가상 DOM(Virtual DOM) 이해하기 (0) | 2024.05.20 |
| JavaScript - 이벤트(Event) (0) | 2024.04.30 |
