[Javascript] AJAX (Asynchronous JavaScript and XML) 완전 정리

✅ AJAX (Asynchronous JavaScript and XML) 완전 정리

1. 📌 AJAX란?

AJAX는 하나의 기술이 아니라 웹에서 비동기 통신을 가능하게 해주는 "기술 조합"을 의미합니다.
화면 전체를 새로 고치지 않고도, 서버와 데이터 주고받기를 가능하게 합니다.

▶️ 구성 요소:

구성	설명
JavaScript	비동기 요청 로직 구현
XMLHttpRequest 또는 fetch	서버와 통신
DOM	응답 결과를 웹페이지에 반영
(과거에는 XML, 요즘은 대부분 JSON)	응답 데이터 형식

---

2. 🧠 왜 AJAX를 쓰는가? (사용 이유)

기존 방식 (동기)	AJAX 방식 (비동기)
페이지 전체를 리로드	일부 데이터만 갱신
사용 중단 → 응답 기다림	UI 유지하면서 요청 수행
느리고 비효율적	빠르고 반응성 높은 UX 제공

✅ 사용 목적 요약

• 서버와 화면 전체 리로드 없이 데이터 주고받기
• 사용자 경험 개선: 예) 댓글 달기, 검색 자동완성, 무한 스크롤 등
• API 중심 SPA(싱글 페이지 애플리케이션) 구성의 핵심

---

3. ⏳ AJAX의 역사적 발전 흐름

1. XMLHttpRequest (2000년대 초)
2. jQuery.ajax() (2006~) → 코드 간결화, 브라우저 호환성 해결
3. fetch API (2015 ES6 이후) → Promise 기반의 최신 방식
4. Axios, React Query 등 고수준 추상화 → 에러/캐싱/취소 등 처리 내장

---

4. 🧪 실무에서 AJAX를 쓰는 방법

1️⃣ 전통적 방식: XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

2️⃣ jQuery 기반 AJAX

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $.ajax({
    url: '/api/user',
    method: 'POST',
    data: { name: 'Alice' },
    success: function(response) {
      console.log('Success:', response);
    },
    error: function(err) {
      console.error('Error:', err);
    }
  });
</script>

3️⃣ 최신 방식: fetch API

fetch('/api/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'Alice' })
})
.then(res => res.json())
.then(data => console.log('응답:', data))
.catch(err => console.error('에러:', err));

4️⃣ 실무 고급 방식: Axios

npm install axios

import axios from 'axios';

axios.post('/api/user', { name: 'Alice' }, { withCredentials: true })
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

---

5. 🧩 실무 적용 예시: 회원 등록 → 응답 결과 표시

📄 HTML

<form id="userForm">
  <input type="text" name="name" placeholder="이름 입력" />
  <button type="submit">등록</button>
</form>
<div id="result"></div>

🧠 JavaScript (fetch)

document.getElementById('userForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const name = e.target.name.value;

  fetch('/api/user', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name })
  })
  .then(res => res.json())
  .then(data => {
    document.getElementById('result').innerText = `${data.name}님 등록 완료!`;
  })
  .catch(err => {
    console.error(err);
    alert('등록 실패');
  });
});

---

6. ⚠️ 실무에서 발생하는 문제들

문제	원인	해결법
CORS 오류	다른 도메인 API 요청	서버에서 CORS 허용 설정 필요
잘못된 Content-Type	application/json 아닌 값 전송	fetch, axios 등에서 헤더 명시
응답 status 200인데 내용이 없음	서버에서 JSON 반환 누락	서버 응답 형식 확인 (res.json(...))
CSRF Token 누락	인증된 요청인데 보안 오류	Spring 등에서는 X-CSRF-TOKEN 헤더 필요

---

7. 🧠 요약

항목	내용
AJAX 목적	화면 새로고침 없이 서버 통신
초기 기술	XMLHttpRequest, jQuery.ajax()
현대 방식	fetch, axios, React Query
주요 포인트	비동기, JSON 처리, CORS 문제, 인증
실무 적용	회원가입, 댓글, 검색, 대시보드, SPA 통신

---

✅ AJAX의 카테고리 분류

범주	분류
🔹 대분류	Web Development (웹 개발)
🔸 중분류	Frontend Development
🔹 소분류	JavaScript
🔸 하위 기술	Browser API (e.g., XMLHttpRequest, fetch)
🔸 관련 개념	비동기 통신 (Asynchronous), CORS, REST API, JSON

---

🎯 관련 카테고리로 연결되는 키워드들

• Web API
• DOM 조작
• 이벤트 핸들링 (addEventListener)
• SPA (Single Page Application)
• API 연동
• CORS / 인증 / 쿠키

---

🔍 요약하자면:

AJAX는 JavaScript 기반의 브라우저 통신 기술로, Web Frontend 개발 영역에 속합니다.
프레임워크 없이 순수 JavaScript로도 가능하지만, 보통은 React / Vue / jQuery / Axios 같은 프레임워크나 라이브러리와 함께 쓰입니다.

---