Ajax - JS에서 클라이언트와 서버의 '비동기적' API 통신 방식 + jQuery, fetch API, Axios, SSE, WebSockets

✅ Ajax란?

Ajax(Asynchronous JavaScript and XML)는 자바스크립트에서 클라이언트(브라우저)와 서버의 비동기적 API 통신 방식이다.

즉, 페이지를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있게 하는 기술.

Ajax 에 XML이 들어간 이유

Ajax가 처음 등장했을 때, 서버와 데이터를 주고받는 형식으로 XML (eXtensible Markup Language) 이 주로 사용되었음. 그러나 XML은 너무 복잡하고 불편해서 현재는 JSON을 사용(표준)함. 훨씬 간단하고 JS에서 바로 사용할 수 있기 때문이다

 

Ajax를 구현하는 방법

• 과거에는 Ajax를 사용하려면 XMLHttpRequest(XHR)라는 복잡한 객체를 써야 했다.
• jQuery가 등장하면서 $.ajax(), $.get(), $.post() 같은 더 간편한 Ajax 방식을 제공.
• 최신 자바스크립트에서는 fetch API가 등장하면서 더 가볍고 강력한 방식으로 Ajax 요청을 보낼 수 있게 됐음.
• 시간적 흐름
  XHR -> jQuery(라이브러리) -> fetch API(기본 제공) -> Axios (라이브러리) 

 

jQuery Ajax 요청 코드

$.ajax({
  url: "https://api.example.com/data",  // 서버의 API 주소
  method: "GET",                        // HTTP 요청 방식 (GET, POST 등)
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두기)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
});

• success 콜백: 요청이 성공하면 서버에서 받은 데이터를 처리.
• error 콜백: 요청이 실패하면 오류 메시지를 출력.
• GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져감. http://naver.com?param=value¶m2=value2
• POST 요청은, data : {} 에 넣어서 데이터를 가져감. data: { param: 'value', param2: 'value2' },

GET 방식으로 데이터를 전달하는 방법

? : 여기서부터 전달할 데이터가 작성된다는 의미.

& : 전달할 데이터가 더 있다는 뜻.

 

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

 

위 주소는 google.com의 search 창구에 다음 정보를 전달

q=아이폰 (검색어 -> 검색어를 q라고 하기로 약속하자)

sourceid=chrome (브라우저 정보)

ie=UTF-8 (인코딩 정보)

 

jQuery Ajax의 단축 메서드

jQuery에서는 $.ajax() 외에도 $.get(), $.post() 같은 단축 메서드가 있다

 

✅ GET 요청 (데이터 가져오기)

$.get("https://api.example.com/data", function(response) {
    console.log(response);
});

 

✅ POST 요청 (데이터 보내기)

$.post("https://api.example.com/data", { name: "Alice", age: 25 }, function(response) {
    console.log(response);
});

 

 

Ajax 자체가 "오래된 기술"은 아니지만 jQuery 기반의 Ajax는 현재 레거시 코드에서 많이 사용되고 있다.
지금은 모던 JavaScript(fetch API, Axios)를 더 많이 사용하지만, 기존 프로젝트(레거시 코드)에서는 jQuery Ajax가 여전히 많이 쓰이고 있음

 

JavaScript에서 API 통신하는 주요 방법

1️⃣ fetch API (모던 JavaScript 방식) ✅

• jQuery 없이도 Ajax 요청을 쉽게 보낼 수 있는 모던 JavaScript API
• fetch()는 최신 JavaScript에서 더 간단하고 강력한 방식으로 API와 통신할 수 있도록 도와준다.
• Promise 기반이라 .then() 또는 async/await을 활용할 수 있어서 더 깔끔한 코드가 된다.

fetch("https://api.example.com/data")
  .then(response => response.json()) // JSON 형식 변환
  .then(data => console.log(data))   // 데이터 출력
  .catch(error => console.error("에러 발생:", error));

• 기본적으로 GET 요청을 보냄.

📌 POST 요청 (데이터 보내기)

fetch("https://api.example.com/data", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ name: "Alice", age: 25 })
})
.then(response => response.json())
.then(data => console.log("서버 응답:", data))
.catch(error => console.error("에러 발생:", error));

 

 

2️⃣ Axios (라이브러리 사용) ✅ (fetch보다 더 편리한 방법)

• fetch보다 더 편리하게 API 요청을 처리할 수 있도록 도와주는 외부 라이브러리.
• 자동으로 JSON 변환을 해주고, 오류 처리도 더 쉬움.
• 설치가 필요함 (npm install axios 또는 <script>로 CDN 추가 가능)

📌 GET 요청

axios.get("https://api.example.com/data")
  .then(response => console.log(response.data))
  .catch(error => console.error("에러 발생:", error));

 

📌 POST 요청

axios.post("https://api.example.com/data", { name: "Alice", age: 25 })
  .then(response => console.log(response.data))
  .catch(error => console.error("에러 발생:", error));

 

📌 fetch vs Axios 비교

	fetch	Axios
기본 제공	O (내장 API)	X (라이브러리 설치 필요)
JSON 자동 변환	X (수동 response.json())	O (자동 변환)
오류 처리	수동 처리 필요	더 강력한 오류 처리
브라우저 지원	최신 브라우저만 지원	모든 브라우저 지원

 

2025.02.02 - [computer science/네트워크] - Axios 에 대해 알아보자!

Axios 에 대해 알아보자!

 

3️⃣ XMLHttpRequest (XHR) ❌ (레거시, 사용 X)

• Ajax의 원래 구현 방식으로, 지금은 거의 사용되지 않는다.
• 코드가 복잡하고, fetch와 Axios가 훨씬 편리해서 추천하지 않음.

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

 

❌ fetch보다 코드가 길고, Promise도 지원하지 않음 → 레거시 코드에서만 사용됨.

 

4️⃣ WebSockets 🚀 (실시간 양방향 통신)

• Ajax, fetch, Axios는 요청을 보낼 때마다 서버에서 응답을 받아야 하지만, WebSocket은 서버와 클라이언트가 항상 연결된 상태에서 데이터를 주고받을 수 있다.
• 채팅, 실시간 알림, 게임 같은 실시간 데이터 통신이 필요한 경우 사용됨.

const socket = new WebSocket("wss://example.com/socket");

// 서버에서 메시지 받기
socket.onmessage = function(event) {
  console.log("서버 메시지:", event.data);
};

// 서버로 메시지 보내기
socket.send("안녕, 서버야!");

 

✅ Ajax보다 더 빠르고 실시간 처리가 가능!
❌ 하지만 일반적인 API 요청에는 잘 사용되지 않고, 실시간 데이터 처리할 때 사용됨.

 

5️⃣ Server-Sent Events (SSE) 🚀 (실시간 서버 → 클라이언트 데이터 전송)

• WebSocket과 비슷하지만, 한 방향 (서버 → 클라이언트) 통신만 가능.
• 뉴스, 실시간 주가 정보 같은 서버에서 지속적으로 데이터를 보내야 할 때 유용.

const eventSource = new EventSource("https://api.example.com/stream");

eventSource.onmessage = function(event) {
  console.log("서버에서 받은 데이터:", event.data);
};

 

✅ 서버에서 데이터를 지속적으로 전송 가능!
❌ 클라이언트 → 서버로 데이터를 보낼 수 없음.

 

✅ 정리

fetch API	최신 Ajax 방식, Promise 기반  (JavaScript 기본 제공)	일반적인 API 요청	🔥 추천
Axios	fetch보다 편리한 라이브러리	JSON 자동 처리, 오류 처리 편리	✅ 추천
XMLHttpRequest (XHR)	오래된 Ajax 방식	레거시 코드	❌ 사용 X
WebSockets	실시간 양방향 통신	채팅, 게임, 실시간 알림	🚀 특정 상황
SSE (Server-Sent Events)	서버 → 클라이언트 실시간 데이터 전송	실시간 뉴스, 주가 정보	🚀 특정 상황

 

✔ API 통신 = 클라이언트와 서버가 데이터를 주고받는 것
✔ Ajax = API 통신을 비동기적으로 하는 방법 중 하나
✔ Ajax의 구현 방식이 fetch, Axios, XHR
✔ 하지만 WebSockets, SSE 같은 다른 API 통신 방식도 존재