이번에는 자바스크립트 API 중 AJAX ( Asynchronous JavaScript and XML )에 대해 살펴보겠습니다.
자바스크립트 AJAX
AJAX는 "Asynchronous JavaScript and XML"의 약자입니다.
- Asynchronous (비동기): 웹 페이지의 일부분만 업데이트할 수 있게 해주는 방식입니다. 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 주고받을 수 있습니다.
- JavaScript: 웹 브라우저에서 실행되는 프로그래밍 언어로, 웹 페이지를 동적으로 만들 수 있게 해 줍니다.
- XML: 데이터를 저장하고 전송하기 위한 형식입니다. 그러나 현재는 XML 대신 JSON을 더 많이 사용합니다.
AJAX를 사용하면 웹 페이지의 일부분만 업데이트할 수 있어, 사용자 경험을 크게 향상할 수 있습니다. 예를 들어, 이메일 서비스에서 새로운 메시지를 확인할 때 전체 페이지를 새로고침하지 않고도 새 메시지만 불러올 수 있습니다.
AJAX의 작동 원리
AJAX의 작동 원리를 단계별로 설명해 드리겠습니다.
- 사용자가 웹 페이지에서 어떤 동작을 합니다 (예: 버튼 클릭).
- JavaScript가 이 동작을 감지하고, XMLHttpRequest 객체를 생성합니다.
- XMLHttpRequest 객체가 웹 서버에 비동기적으로 요청을 보냅니다.
- 서버가 요청을 처리하고 응답을 보냅니다.
- JavaScript가 서버로부터 받은 데이터를 처리합니다.
- 처리된 데이터를 사용해 웹 페이지의 일부를 업데이트합니다.
이 모든 과정이 페이지 새로고침 없이 백그라운드에서 일어납니다.
XMLHttpRequest 객체 사용하기
XMLHttpRequest는 AJAX 요청을 만드는 데 사용되는 JavaScript 객체입니다. 이 객체를 사용하는 방법을 단계별로 알아보겠습니다.
XMLHttpRequest 객체 생성
let xhr = new XMLHttpRequest();이 코드로 새로운 XMLHttpRequest 객체를 생성합니다.
요청 설정
xhr.open('GET', 'https://api.example.com/data', true);open 메서드는 다음과 같은 매개변수를 가집니다.
첫 번째 매개변수: HTTP 메서드 (GET, POST, PUT, DELETE 등)
두 번째 매개변수: 요청을 보낼 URL
세 번째 매개변수: 비동기 여부 (true: 비동기, false: 동기)
응답 처리 함수 정의
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};이 함수는 요청의 상태가 변경될 때마다 호출됩니다.
readyState4는 요청이 완료되었음을 의미합니다.status200은 요청이 성공적으로 처리되었음을 의미합니다.
요청 보내기
xhr.send();이 메서드로 설정한 요청을 서버로 보냅니다.
실제 예제: 날씨 정보 가져오기
이제 AJAX를 사용해 실제로 날씨 정보를 가져오는 예제를 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>날씨 정보</title>
</head>
<body>
<h1>서울의 현재 날씨</h1>
<button id="getWeather">날씨 가져오기</button>
<div id="weatherInfo"></div>
<script>
document.getElementById('getWeather').addEventListener('click', function() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=YOUR_API_KEY&units=metric', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
let weatherInfo = document.getElementById('weatherInfo');
weatherInfo.innerHTML = `
<p>온도: ${data.main.temp}°C</p>
<p>습도: ${data.main.humidity}%</p>
<p>날씨: ${data.weather[0].description}</p>
`;
}
};
xhr.send();
});
</script>
</body>
</html>이 예제에 대해 자세히 설명해 드리겠습니다.
- HTML 구조
<button>을 클릭하면 날씨 정보를 가져옵니다.<div id="weatherInfo">에 가져온 날씨 정보를 표시합니다.
- JavaScript 코드
addEventListener를 사용해 버튼 클릭 이벤트를 감지합니다.- 클릭 시 XMLHttpRequest 객체를 생성하고 설정합니다.
- OpenWeatherMap API를 사용해 서울의 날씨 정보를 요청합니다. (주의: 실제 사용 시 'YOUR_API_KEY' 부분을 실제 API 키로 교체해야 합니다)
onreadystatechange함수에서 응답을 처리합니다.- 응답이 완료되고 성공적일 때 (
readyState === 4 && status === 200) JSON.parse로 응답 텍스트를 JavaScript 객체로 변환합니다.- 변환된 데이터에서 필요한 정보를 추출해 HTML에 삽입합니다.
- 응답이 완료되고 성공적일 때 (
이 예제를 통해 AJAX를 사용해 실시간으로 서버에서 데이터를 가져와 웹 페이지를 업데이트하는 방법을 배울 수 있습니다.
AJAX의 장단점
- 장점:
- 페이지 새로고침 없이 서버와 통신할 수 있어 사용자 경험이 향상됩니다.
- 서버의 부하를 줄일 수 있습니다 (전체 페이지가 아닌 필요한 데이터만 전송하므로).
- 클라이언트 측에서 더 많은 기능을 구현할 수 있어 응답성이 좋아집니다.
- 단점:
- JavaScript가 비활성화된 환경에서는 작동하지 않습니다.
- 동적으로 내용을 불러오므로 검색 엔진 최적화(SEO)에 어려움이 있을 수 있습니다.
- 브라우저의 뒤로 가기, 앞으로 가기 버튼 동작이 예상과 다를 수 있습니다.
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| JavaScript Promise 사용법 비동기 프로그래밍과 체이닝 예제 - 자바스크립트 #12 (0) | 2024.07.29 |
|---|---|
| 자바스크립트 네트워크 Fetch API와 비동기 처리 가이드 - 자바스크립트 #11 (0) | 2024.07.26 |
| 자바스크립트 DOM 이해하기. DOM 트리, 요소 조작, 이벤트 리스너 - 자바스크립트 #9 (0) | 2024.07.22 |
| 자바스크립트 이벤트 객체와 리스너 addEventListener 활용법 - 자바스크립트 #8 (0) | 2024.07.19 |
| 자바스크립트 배열 기초와 활용. 배열 메서드와 다차원 배열 - 자바스크립트 #7 (0) | 2024.07.16 |