Ajax

출처

https://english.ajax.nl/teams/ajax-1

---

Ajax는 Asynchronous JavaScript and XML의 약자로, 웹 페이지를 새로고침하지 않고도 배열이나 JSON 등의 데이터를 서버와 남몰래 주고받는 비동기식 웹 개발 기법입니다.

과거의 웹 페이지는 버튼 하나만 눌러도 화면 전체가 깜빡이며 다시 로딩되어야 했습니다. 하지만 Ajax가 도입되면서, 페이지의 일부분만 부드럽고 빠르게 업데이트하는 현대적인 웹 화면(UX)을 만들 수 있게 되었습니다.

1. 동기(Sync) vs 비동기(Async)의 차이점

Ajax의 핵심은 '비동기(Asynchronous)'에 있습니다.

• 기존의 동기식 방식:
  • 네이버 웹툰에서 다음 화를 누르면, 화면 전체가 새로고침되면서 로고, 메뉴, 하단 정보까지 처음부터 끝까지 다시 다운로드합니다.
  • 서버가 응답할 때까지 화면이 멈추거나 하얗게 변하므로 유저가 기다려야 합니다.
• Ajax의 비동기식 방식:
  • 인스타그램에서 좋아요 버튼을 누르거나 아래로 스크롤하여 새 게시글을 불러올 때, 화면 전체가 새로고침되지 않습니다.
  • 배경은 그대로 둔 채, 백엔드 서버와 자바스크립트가 배후에서 필요한 데이터만 쏙 주고받아 화면의 특정 숫자나 이미지만 싹 바꿔치기합니다.

2. Ajax의 작동 원리

브라우저 내부의 내장 객체를 이용해 화면 뒤에서 서버에 요청을 보냅니다.

1. 웹 페이지에서 이벤트(버튼 클릭, 스크롤 등)가 발생합니다.
2. 자바스크립트가 서버에 보낼 요청(Request) 객체를 생성합니다.
3. 웹 브라우저가 화면을 멈추지 않고, 백그라운드에서 서버로 요청을 전송합니다.
4. 서버는 요청을 처리한 후, 전체 HTML이 아닌 필요한 데이터(주로 JSON)만 브라우저로 돌려줍니다.
5. 브라우저가 응답 데이터를 받으면, 자바스크립트(DOM)를 이용해 화면의 일부분만 동적으로 업데이트합니다.

3. Ajax를 구현하는 3가지 방법 (역사)

기술이 발전함에 따라 Ajax를 코드로 구현하는 방식도 점차 간결하고 강력하게 진화해 왔습니다.

① XMLHttpRequest (과거 표준)

초창기에 브라우저가 제공하던 원조 객체입니다. 코드가 매우 복잡하고 콜백 지옥(Callback Hell)에 빠지기 쉬워 현재는 실무에서 직접 잘 쓰이지 않습니다.

JavaScript

 

// 과거 방식: 보기만 해도 복잡한 구조
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
};
xhttp.open("GET", "https://api.example.com/data", true);
xhttp.send();

② jQuery Ajax (과도기 대세)

XMLHttpRequest용 긴 코드를 획기적으로 줄여주어 몇 년 전까지 웹 생태계를 지배했던 방식입니다. 다만, Ajax 하나를 쓰기 위해 무거운 jQuery 라이브러리를 통째로 불러와야 한다는 단점이 있습니다.

JavaScript

 

// jQuery 방식: 직관적이지만 외부 라이브러리 의존
$.ajax({
  url: "https://api.example.com/data",
  method: "GET",
  success: function(data) {
    console.log(data);
  }
});

③ Fetch API & Axios (현대 모던 웹 표준)

최신 자바스크립트(ES6+) 표준 스펙인 fetch() 메소드나, 가독성과 기능이 뛰어난 Axios 라이브러리를 사용하는 것이 현재 모던 프론트엔드의 압도적인 표준입니다. Promise와 async/await 문법을 지원하여 코드가 매우 깔끔합니다.

JavaScript

 

// 현대 방식 (Fetch API + async/await)
async function getData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json(); // 서버에서 준 JSON 파싱
  console.log(data);
}

📋 요약

• Ajax는 웹 페이지 전체를 새로고침하지 않고, 원하는 데이터만 비동기적으로 가져오는 기술입니다.
• 이름에 XML이 들어가지만, 현대 웹에서는 XML보다 훨씬 가볍고 다루기 편한 JSON 포맷을 데이터 교환 표준으로 사용합니다.
• 오늘날 Ajax를 구현할 때는 주로 브라우저 내장 기능인 Fetch API나 유명 라이브러리인 Axios를 사용합니다.

구글 맵스, 네이버 검색창의 실시간 자동완성, 무한 스크롤 등 현대 웹의 모든 인터랙션의 출발점이 되는 Ajax를 완벽히 이해하셨습니다!

---