[JavaScript] AJAX 통신 정리 (fetch, axios, XMLHttpRequest, jQuery.ajax 비교)

1. AJAX (Asynchronous JavaScript and XML)란?

• 비동기 방식의 자바스크립트와 XML을 사용하는 개발 패턴(기술)
• 서버와 통신하고 값을 받아오는 중에도 다른 일을 수행 가능

 

2. XMLHttpRequest

• 비동기 요청을 수행하기 위한 JavaScript API
• fetch() 이전에 사용하던 방식
• 브라우저가 제공하는 Web API → Node.js에서 사용 불가 ❌

⚠️ Web API란?
- Web API = 브라우저가 JS에게 제공하는 기능들

XMLHttpRequest 
	↓
HTTP 요청 document
	↓
DOM 조작 setTimeout()
	↓
타이머 localStorage 
	↓
브라우저 저장소

1) XMLHttpRequest 메서드

메서드	설명
open(method, url, async)	요청 초기화. method(GET/POST/PUT), url(서버주소), async(비동기여부 기본 true)
send(content)	요청을 서버로 전송. GET이면 null, POST면 body 데이터 전달
setRequestHeader(header, value)	HTTP 헤더 값 설정. 반드시 open() 다음에 위치해야 함
abort()	요청 중지
getAllResponseHeaders()	응답의 모든 헤더정보를 string으로 반환
getResponseHeader(header)	특정 헤더 값을 string으로 반환

 

2) XMLHttpRequest 속성

속성	설명
readyState	서버 처리 상태 (0~4)
responseText	서버 응답을 string으로 반환
responseXML	서버 응답을 XML(DOM 객체)로 반환
status	HTTP 상태코드 (200, 404, 500 등)
statusText	HTTP 상태코드 텍스트 (OK, Not Found 등)

 

• readystate 속성 값

코드	상태	설명
0	UNINITIALIZED	객체 생성했지만 초기화 안됨 (open() 전)
1	LOADING	open() 수행했지만 send() 전
2	LOADED	send() 수행했지만 서버 처리 준비 중
3	INTERACTIVE	처리 완료 안됐지만 진행 중
4	COMPLETED	처리 완료

 

 

• readstatechange 이벤트
  • readystatechange : readyState 값이 바뀔 때마다 발생하는 이벤트
  • onreadystatechange 핸들러로 상태 변화에 따른 처리 작성

xmlHttp.onreadystatechange = function() {  // 처리상태 변경시
    if (xmlHttp.readyState == 4) {         // 서버 처리 완료
        if (xmlHttp.status == 200) {       // 서버 OK 응답
            doMainProcess(xmlHttp);        // 메인 처리
        }
    }
};

 

3. fetch()

• JavaScript에서 HTTP요청과 같은 네트워크 요청을 비동기적으로 보내기 위해 사용하는 표준 API
• Promise를 반환함

fetch(url, options)
  .then(response => response.json())  // 응답을 JSON으로 변환 (수동)
  .then(data => console.log(data))
  .catch(error => console.error(error));

// GET 요청
fetch("<https://api.com/data>")
    .then(res => res.json())       // 응답을 JSON으로 변환
    .then(data => console.log(data))
    .catch(error => console.log(error));

// POST 요청
fetch("<https://api.com/data>", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ name: "홍길동" })
})
    .then(res => res.json())
    .then(data => console.log(data));

⚠️ fetch()는 응답이 와도 자동으로 JSON 파싱을 해주지 않음
- 반드시 .json()을 한 번 더 호출해야 데이터를 사용할 수 있음

 

4. axios

Promise 기반의 외부 HTTP 통신 라이브러리. 실무에서 가장 많이 사용된다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

// GET
axios.get('<https://jsonplaceholder.typicode.com/users/1>')
  .then(response => {
    console.log(response.data); // 자동으로 JSON 파싱되어 있음
  })
  .catch(error => console.log(error));

⚠️  fetch()와 달리 응답 데이터가 response.data에 자동으로 JSON 파싱되어 있음

 

5. jQuery AJAX

$.ajax({
  url: '<https://api.example.com/posts>',
  type: 'POST',
  data: JSON.stringify({ title: 'foo', body: 'bar' }),
  contentType: 'application/json; charset=UTF-8',
  dataType: 'json',
  success: function(response) {
    console.log(response);
  },
  error: function(xhr, status, error) {
    console.error('에러:', error);
  }
});

 

[ fetch vs axios vs jQuery.ajax() 비교 ]

항목	fetch	axios	jQuery.ajax()
제공 방식	브라우저 내장	외부 라이브러리	jQuery 라이브러리
문법 스타일	Promise 기반	Promise 기반	콜백 기반
async/await	✅	✅	⚠️ 비효율적
자동 JSON 처리	❌ .json() 수동 호출	✅ response.data 자동	✅ dataType:'json'
타임아웃 설정	❌ 직접 구현	✅ 내장	✅ 내장
요청 취소	❌ AbortController 필요	✅ 내장	❌
브라우저 지원	최신 (IE ❌)	최신 (IE ❌)	거의 모든 브라우저
라이브러리 크기	없음 (내장)	약 20KB	약 90~100KB
인터셉터	❌	✅	❌
전체 평가	경량, 표준	가장 실용적	구시대 유산

⚠️  현재 추천 순서: axios > fetch > jQuery.ajax()
- Vue, React 등 최신 프레임워크에서는 $ 충돌로 jQuery를 쓸 수 없으므로 fetch 또는 axios 사용