AJAX란?

AJAX(Asynchronous JavaScript and XML)는 웹 페이지 전체를 다시 로드하지 않고도 서버와 데이터를 교환하여 웹 페이지의 일부를 동적(dynamic)으로 업데이트하는 기술입니다.

Ajax는 대부분 서버에 요청을 하고 그에 대한 응답을 받게 되면 성공이나 실패 등에 따라서 함수가 실행되도록 하는데요. 그 함수가 먼저 실행되는 것이 아니라 서버의 응답을 받은 후 실행이 되는 것입니다.

1. AJAX의 작동 방식:

1. 사용자 상호 작용: 사용자가 웹 페이지에서 버튼 클릭, 스크롤 등 특정 동작을 수행합니다.
2. XMLHttpRequest 객체 생성: JavaScript는 XMLHttpRequest 객체를 생성하여 서버에 비동기 요청을 보냅니다.
3. 서버 응답: 서버는 요청에 대한 데이터를 XML 또는 JSON 형식으로 응답합니다.
4. 데이터 처리 및 업데이트: JavaScript는 서버에서 받은 데이터를 처리하여 웹 페이지의 해당 부분만 업데이트합니다.

2. AJAX의 장점:

• 향상된 사용자 경험: 페이지 전체를 새로 고침하지 않고도 필요한 부분만 업데이트하므로 사용자 경험이 향상됩니다.
• 빠른 응답 속도: 필요한 데이터만 주고받기 때문에 페이지 로딩 속도가 빨라집니다.
• 서버 부하 감소: 전체 페이지를 다시 로드하는 대신 필요한 데이터만 요청하므로 서버 부하를 줄일 수 있습니다.

3. AJAX의 활용 예시:

• 실시간 검색어 추천: 사용자가 검색어를 입력할 때마다 AJAX를 통해 서버에 요청하여 실시간으로 추천 검색어를 보여줍니다.
• 지도 서비스: 지도에서 특정 지역을 클릭하면 AJAX를 통해 해당 지역의 정보를 불러와 지도에 표시합니다.
• 소셜 미디어 피드: 사용자가 스크롤을 내릴 때마다 AJAX를 통해 새로운 피드를 불러와 페이지에 추가합니다.

다음은 JavaScript를 사용하여 AJAX를 구현하는 간단한 예시입니다.

JavaScript

1// 1. XMLHttpRequest 객체 생성
2const xhr = new XMLHttpRequest();
3
4// 2. 서버 요청 설정
5xhr.open('GET', '/data', true); // GET 방식, '/data' URL, 비동기 통신
6
7// 3. 서버 응답 처리
8xhr.onload = function() {
9  if (xhr.status === 200) {
10    // 서버 응답이 성공적으로 도착한 경우
11    const data = JSON.parse(xhr.responseText); // JSON 형식으로 변환
12    // 데이터 처리 및 웹 페이지 업데이트
13    displayData(data);
14  } else {
15    // 서버 응답에 오류가 발생한 경우
16    console.error('Error:', xhr.status, xhr.statusText);
17  }
18};
19
20// 4. 서버 요청 전송
21xhr.send();
22
23function displayData(data) {
24  // 웹 페이지에 데이터 표시
25  const dataContainer = document.getElementById('data-container');
26  dataContainer.innerHTML = ''; // 기존 내용 지우기
27
28  data.forEach(item => {
29    const itemElement = document.createElement('p');
30    itemElement.textContent = item.name + ': ' + item.value;
31    dataContainer.appendChild(itemElement);
32  });
33}

설명:

1. XMLHttpRequest 객체 생성: XMLHttpRequest 객체를 생성하여 서버와 통신합니다.
2. 서버 요청 설정: open() 메서드를 사용하여 HTTP 메서드(GET, POST 등), URL, 비동기 여부(true/false)를 설정합니다.
3. 서버 응답 처리: onload 이벤트 핸들러를 통해 서버 응답을 처리합니다. xhr.status가 200이면 성공, 아니면 오류로 간주합니다. xhr.responseText는 서버에서 받은 데이터를 문자열 형태로 반환합니다. JSON.parse()를 사용하여 JSON 형식의 데이터를 JavaScript 객체로 변환합니다.
4. 서버 요청 전송: send() 메서드를 사용하여 서버에 요청을 전송합니다.
5. 데이터 처리 및 웹 페이지 업데이트: displayData() 함수는 서버에서 받은 데이터를 웹 페이지에 표시하는 역할을 합니다. 예시에서는 <div id="data-container"></div> 요소에 데이터를 추가합니다.