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;
    });
});

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

정리

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

---