Ajax

AJAX의 정의 및 필요성

AJAX란?

• Asynchronous JavaScript And XML의 약자
• 페이지 전체를 새로고침하지 않고, 웹 서버와 데이터를 주고받아

 웹 페이지의 일부만 동적으로 갱신하는 기술

• 핵심 포인트:
  • 자바스크립트와 브라우저 내장 객체(XMLHttpRequest, fetch) 활용
  • 비동기(Async) 방식으로 동작
  • 최근에는 XML 대신 JSON을 주로 사용

왜 필요한가?

• 사용자 경험(UX) 향상: 전체 페이지 새로고침 없이 빠르고 부드럽게 부분 업데이트
• 네트워크 효율성: 필요한 데이터만 서버에서 받아와 트래픽/리소스 절감
• 모던 웹 개발의 필수: SPA, 실시간 피드, 검색 자동완성 등 다양한 UI에 적용

AJAX 동작 흐름

1. JS 코드에서 서버로 요청 전송
2. 서버에서 데이터 응답
3. JS에서 데이터 받아 화면 일부 동적 업데이트

---

fetch()를 활용한 외부 API 호출

fetch() 함수란?

• 최신 브라우저에 내장된 AJAX 비동기 통신 API
• 간결하고 Promise 기반(then 체이닝 지원)
• RESTful API, JSON 등 다양한 리소스 요청에 적합

기본 사용 예시

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    document.getElementById('result').innerText = data.title;
  })
  .catch(error => console.error('Error:', error));

실습: fetch()로 외부 데이터 불러오기

HTML

<button id="btn">글 제목 불러오기</button>
<div id="result"></div>

JavaScript

document.getElementById('btn').addEventListener('click', () => {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(res => res.json())
    .then(data => {
      document.getElementById('result').innerText = data.title;
    });
});

• 설명: 버튼을 클릭하면, 서버에서 받아온 글 제목이 화면에 표시됩니다.

XMLHttpRequest를 이용한 AJAX GET 요청 예제

var xhr = new XMLHttpRequest();

// 1. 응답을 받았을 때 실행할 함수 지정 (콜백)
xhr.onload = function() {
    // 여기에 응답 처리 코드 작성
    alert("서버 응답: " + xhr.responseText);
};

// 2. 서버에 GET 방식으로 "/time" 경로를 비동기(true)로 요청
xhr.open("GET", "/time", true);

// 3. 실제 요청 전송
xhr.send();

코드 설명

• 1. XMLHttpRequest 객체 생성
  • new XMLHttpRequest()로 ajax 통신에 사용할 객체를 만듭니다.
• 2. onload에 콜백 함수 등록
  • 서버로부터 응답이 오면 자동으로 실행되는 함수입니다.
• 3. open() 메소드
  • (HTTP Method, 요청 URL, 비동기 여부) 순서로 지정
  • true를 주면 비동기로 동작
• 4. send() 호출
  • 요청을 실제로 서버에 보냅니다.

참고

• xhr.responseText에 서버에서 받은 응답 데이터(문자열)가 저장됩니다.
• 오류 처리를 위해 xhr.onerror 이벤트도 사용할 수 있습니다.

---

정리

• fetch()는 현대적 AJAX 방식의 표준
• 실시간 데이터 갱신, 검색, SPA 개발 등에 필수
• 실제 서비스에서 REST API 호출 패턴으로 자리잡음

---