Ajax 완벽 정복 핸드북 비동기 웹의 혁명을 이끌다

2025-09-22 23:55

Ajax는 전체 페이지를 새로고침하지 않고 서버와 데이터를 교환하여 동적으로 화면을 갱신하는 웹 개발 기법의 집합.
백그라운드에서 XMLHttpRequest나 Fetch API를 사용해 비동기적으로 서버와 통신하는 것이 핵심 원리.
이를 통해 사용자는 끊김 없는 부드러운 경험을 누릴 수 있으며, 웹 애플리케이션의 반응성과 속도가 크게 향상됨.

Ajax 완벽 정복 핸드북 비동기 웹의 혁명을 이끌다

우리가 웹을 사용하는 방식을 근본적으로 바꾼 기술, Ajax에 대한 모든 것을 담은 핸드북이다. 오늘날 우리가 당연하게 여기는 구글 맵의 부드러운 지도 이동, 페이스북의 실시간 피드 업데이트, 지메일의 빠른 메일 관리 등은 모두 Ajax라는 보이지 않는 영웅 덕분이다. 이 핸드북은 Ajax가 왜 탄생했으며, 어떤 구조로 이루어져 있고, 어떻게 사용하는지를 A부터 Z까지 상세하게 파헤친다.

1장 Ajax는 왜 탄생했는가 웹의 패러다임을 바꾼 비동기 통신

1.1 동기식 웹의 시대 답답함의 연속

2000년대 초반까지의 웹은 ‘요청과 응답’이라는 단순하고 직선적인 모델로 움직였다. 이를 동기(Synchronous) 방식이라 부른다.

사용자가 링크를 클릭하거나 폼을 제출한다. (요청)
브라우저는 서버에 새로운 페이지 전체를 그려달라고 요청한다.
서버는 요청을 처리하고, 완전히 새로운 HTML 문서를 만들어 브라우저에 보낸다. (응답)
브라우저는 기존 페이지를 지우고, 받은 HTML 문서를 처음부터 다시 그린다.

이 과정에서 사용자는 매번 **‘깜빡이는 흰 화면’**을 봐야만 했다. 아주 작은 데이터를 수정하거나, 댓글 하나를 다는 사소한 행동에도 페이지 전체가 사라졌다가 다시 로드되는 경험은 필연적이었다. 이는 마치 은행에서 번호표를 뽑고, 내 차례가 되어 업무를 보고, 다시 번호표를 뽑아 다른 업무를 보는 것과 같았다. 하나의 업무가 끝날 때까지 다른 어떤 일도 할 수 없는 비효율적인 구조였다.

이러한 동기 방식은 두 가지 치명적인 단점을 가졌다.

나쁜 사용자 경험(UX): 모든 상호작용에 전체 페이지 새로고침이 발생하여 흐름이 끊기고 지연 시간이 길게 느껴진다.
자원 낭비: 페이지의 아주 작은 일부만 바뀌어도 전체 HTML, CSS, JavaScript 파일을 다시 다운로드해야 하므로 불필요한 데이터 전송이 발생한다.

웹이 단순한 정보 전시 공간을 넘어 ‘애플리케이션’의 영역으로 진화하면서, 이러한 한계는 더욱 명확해졌다. 데스크톱 프로그램처럼 부드럽고 빠른 반응성을 웹에서 구현할 방법이 절실했다.

1.2 혁명의 서막 마이크로소프트와 구글의 도전

혁신의 씨앗은 의외의 곳에서 뿌려졌다. 1990년대 후반, 마이크로소프트는 웹 기반 이메일 클라이언트인 ‘아웃룩 웹 액세스(Outlook Web Access)‘를 개발하면서 데스크톱 아웃룩과 유사한 경험을 제공하고자 했다. 이를 위해 그들은 페이지 새로고침 없이 서버와 통신할 수 있는 XMLHttpRequest라는 ActiveX 객체를 처음으로 구현했다. 이것이 Ajax의 기술적 시초다.

하지만 이 기술이 본격적으로 주목받게 된 것은 2004~2005년 구글이 **지메일(Gmail)**과 **구글 맵스(Google Maps)**를 출시하면서부터다.

지메일: 메일을 읽고, 삭제하고, 분류하는 모든 과정이 페이지 전환 없이 즉각적으로 이루어졌다.
구글 맵스: 지도를 마우스로 끌어당기면, 필요한 부분의 지도 타일만 백그라운드에서 불러와 부드럽게 화면을 채웠다.

사용자들은 데스크톱 애플리케이션을 사용하는 듯한 웹 경험에 열광했다. 이때 웹 컨설턴트였던 **제시 제임스 개럿(Jesse James Garrett)**은 2005년 자신의 에세이 “Ajax: A New Approach to Web Applications”에서 이 새로운 접근 방식에 **Ajax(Asynchronous JavaScript and XML)**라는 이름을 붙였다. 이로써 Ajax는 웹 개발의 새로운 패러다임으로 공식적으로 자리 잡게 된다.

2장 Ajax의 정체 파헤치기 기술의 조합

Ajax는 하나의 특정 기술이나 프로그래밍 언어가 아니다. 기존에 존재하던 여러 웹 기술들을 유기적으로 조합하여 비동기 통신을 구현하는 **‘개발 기법’ 또는 ‘접근 방식’**이다. 마치 여러 재료를 섞어 새로운 요리를 만드는 것과 같다.

Ajax를 구성하는 핵심 요소는 다음과 같다.

기술 요소	역할
HTML / CSS	웹 페이지의 기본적인 구조와 디자인을 담당. 정보의 표현을 맡는다.
DOM (Document Object Model)	JavaScript가 HTML 문서의 구조에 동적으로 접근하고 조작할 수 있게 하는 인터페이스. Ajax로 받은 데이터를 화면에 반영할 때 사용.
JavaScript	전체적인 흐름을 제어하는 핵심 엔진. 사용자의 이벤트를 감지하고, 서버에 요청을 보내고, 응답을 처리하여 DOM을 조작.
XMLHttpRequest (XHR) / Fetch API	Ajax의 심장. 브라우저가 백그라운드에서 서버와 비동기적으로 통신할 수 있게 해주는 API.
JSON / XML	서버와 클라이언트(브라우저)가 데이터를 주고받을 때 사용하는 데이터 형식. 최근에는 가볍고 JavaScript 친화적인 JSON이 압도적으로 많이 사용됨.

이 조합의 작동 방식을 간단히 비유하자면, 식당의 웨이터와 같다.

손님(사용자)이 웨이터(JavaScript)에게 추가 주문(이벤트 발생)을 한다.
웨이터는 주방(서버)에 주문을 전달한다. 이때, 손님은 식사를 계속할 수 있다. (비동기)
주방에서 요리(데이터)가 완성되면 웨이터(XMLHttpRequest)가 음식을 가져온다.
웨이터는 손님의 테이블(DOM)에 새로운 음식을 놓아준다(화면 업데이트).

손님은 전체 식사를 중단하고 주방에 갈 필요 없이, 웨이터를 통해 필요한 것만 추가로 받아볼 수 있다. 이것이 바로 Ajax가 제공하는 경험의 본질이다.

3장 Ajax 사용법 핵심 엔진의 작동 원리

Ajax를 구현하는 핵심 통신 객체는 전통적인 XMLHttpRequest와 현대적인 Fetch API 두 가지가 있다.

3.1 클래식 엔진 XMLHttpRequest (XHR)

Ajax라는 이름의 ‘X’를 담당했던, 가장 전통적이고 오래된 방식이다. 모든 브라우저에서 안정적으로 지원된다는 장점이 있다.

작동 순서

XMLHttpRequest 객체를 생성한다.
open() 메소드로 요청을 초기화한다. (HTTP 메소드, URL, 비동기 여부 설정)
onreadystatechange 이벤트 핸들러를 등록하여 서버의 응답 상태 변화를 감지한다.
send() 메소드로 서버에 요청을 보낸다.
서버 응답이 오면 onreadystatechange 핸들러가 실행되고, readyState와 status를 확인하여 데이터를 처리한다.

readyState: 요청의 현재 상태를 나타내는 정수. 4가 되면 모든 데이터 수신이 완료된 상태.
status: HTTP 상태 코드. 200은 ‘성공’을 의미.

코드 예시 (GET 요청으로 사용자 정보 가져오기)

JavaScript

// 1. XHR 객체 생성
const xhr = new XMLHttpRequest();

// 2. 요청 초기화 (HTTP 메소드, URL, 비동기 여부)
xhr.open('GET', 'https://api.example.com/users/1', true);

// 3. onreadystatechange 이벤트 핸들러 설정
xhr.onreadystatechange = function () {
  // 5. 요청이 완료되고(readyState === 4), 성공적으로 응답 받았을 때(status === 200)
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 서버로부터 받은 텍스트(JSON)를 JavaScript 객체로 변환
    const user = JSON.parse(xhr.responseText);
    
    // DOM 조작으로 화면에 사용자 이름 표시
    document.getElementById('username').textContent = user.name;
    console.log('성공:', user);
  } else if (xhr.readyState === 4) {
    // 에러 처리
    console.error('에러 발생:', xhr.status);
  }
};

// 4. 요청 전송
xhr.send();

XHR은 강력하지만, 콜백 함수 기반이라 코드가 복잡해지면 ‘콜백 지옥(Callback Hell)‘에 빠지기 쉽다는 단점이 있다.

3.2 모던 엔진 Fetch API

XHR의 복잡함을 해결하기 위해 등장한 현대적인 API다. Promise 기반으로 설계되어 비동기 코드를 훨씬 직관적이고 깔끔하게 작성할 수 있다.

특징

Promise 기반: .then(), .catch()를 사용하여 성공과 실패를 명확하게 처리할 수 있다. async/await 구문과 함께 사용하면 동기 코드처럼 쉽게 읽히는 비동기 코드를 작성할 수 있다.
간결한 API: 요청과 응답 객체가 분리되어 있어 API가 더 직관적이고 사용하기 쉽다.
유연성: Request, Response, Headers 등 HTTP의 구성 요소를 객체로 다룰 수 있어 더 유연한 조작이 가능하다.

코드 예시 (Fetch API로 사용자 정보 가져오기)

JavaScript

// fetch는 URL을 인자로 받아 Promise를 반환
fetch('https://api.example.com/users/1')
  .then(response => {
    // HTTP 응답이 성공적인지 확인 (200-299)
    if (!response.ok) {
      // 실패 시 에러를 발생시켜 catch 블록으로 넘김
      throw new Error('네트워크 응답이 올바르지 않습니다.');
    }
    // 응답 본문을 JSON으로 파싱하는 Promise를 반환
    return response.json();
  })
  .then(user => {
    // 파싱된 데이터(user 객체)를 사용
    document.getElementById('username').textContent = user.name;
    console.log('성공:', user);
  })
  .catch(error => {
    // 네트워크 에러나 위에서 발생시킨 에러를 처리
    console.error('Fetch 에러:', error);
  });

async/await를 사용한 더 간결한 코드

JavaScript

async function fetchUser() {
  try {
    const response = await fetch('https://api.example.com/users/1');
    if (!response.ok) {
      throw new Error('네트워크 응답이 올바르지 않습니다.');
    }
    const user = await response.json();
    
    document.getElementById('username').textContent = user.name;
    console.log('성공:', user);
  } catch (error) {
    console.error('Fetch 에러:', error);
  }
}

fetchUser();

현대 웹 개발에서는 특별한 이유가 없는 한, 가독성과 유지보수성이 뛰어난 Fetch API를 사용하는 것이 표준으로 자리 잡았다.

4장 심화 학습 알아두면 쓸모 있는 Ajax 지식

4.1 데이터 포맷의 제왕 JSON

Ajax의 ‘X’는 **XML(eXtensible Markup Language)**을 의미했지만, 오늘날 XML은 거의 사용되지 않는다. 그 자리는 **JSON(JavaScript Object Notation)**이 완벽하게 대체했다.

XML: <user><name>John Doe</name></user>와 같이 태그를 사용하는 엄격한 구조. 무겁고 파싱이 복잡하다.
JSON: {"name": "John Doe"}와 같이 JavaScript 객체와 거의 동일한 형태. 가볍고, 사람이 읽기 쉬우며, JavaScript에서 별도의 라이브러리 없이 바로 객체로 변환(JSON.parse())할 수 있다.

이러한 장점 덕분에 JSON은 사실상 웹 API의 표준 데이터 교환 형식이 되었다.

4.2 보안 장벽과 해결사 SOP와 CORS

Ajax 통신 시 반드시 마주치는 중요한 보안 정책이 있다. 바로 **동일 출처 정책(Same-Origin Policy, SOP)**이다.

SOP란? 브라우저의 보안 모델로, 스크립트가 자신이 로드된 ‘출처(Origin)‘와 다른 출처의 리소스와 상호작용하는 것을 제한하는 정책이다. ‘출처’는 프로토콜, 호스트, 포트 번호의 조합으로 결정된다. 예를 들어, https://mydomain.com에서 실행된 스크립트는 https://api.otherdomain.com의 데이터에 직접 접근할 수 없다.

이는 악의적인 스크립트가 사용자의 민감한 정보를 다른 사이트로 유출하는 것을 막기 위한 필수적인 방어막이다. 하지만 현대 웹 애플리케이션은 여러 다른 도메인의 API를 호출하는 경우가 많다. 이 문제를 해결하기 위해 등장한 것이 **교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)**다.

CORS란? 서버가 특정 출처의 요청을 허용하도록 브라우저에 알려주는 HTTP 헤더 기반의 메커니즘이다. 서버 응답 헤더에 Access-Control-Allow-Origin: https://mydomain.com과 같은 정보를 포함하면, 해당 출처의 Ajax 요청이 SOP에 막히지 않고 정상적으로 처리된다. 즉, 서버가 “이 출처는 믿을 수 있으니 데이터를 줘도 괜찮아”라고 허락해주는 것과 같다.

4.3 과거의 영웅 jQuery.ajax

Fetch API가 표준화되기 전, 브라우저마다 미묘하게 다른 XHR 구현과 복잡한 사용법을 해결해준 구세주가 있었다. 바로 jQuery 라이브러리의 $.ajax() 메소드다.

JavaScript

$.ajax({
  url: 'https://api.example.com/users/1',
  method: 'GET',
  success: function(user) {
    $('#username').text(user.name);
    console.log('성공:', user);
  },
  error: function(xhr, status, error) {
    console.error('jQuery Ajax 에러:', error);
  }
});

$.ajax()는 직관적인 옵션 설정과 강력한 콜백 기능으로 Ajax 개발의 난이도를 크게 낮추었고, 수많은 웹사이트에서 사용되며 사실상의 표준 역할을 했다. 현대에는 React, Vue 같은 프레임워크나 axios 같은 라이브러리가 그 역할을 이어받고 있지만, jQuery의 $.ajax()는 Ajax 대중화의 일등 공신이라 할 수 있다.

5장 Ajax의 유산과 미래

Ajax는 단순한 기술을 넘어 웹 개발의 철학을 바꾸었다.

MPA에서 SPA로의 전환: Ajax는 웹 애플리케이션의 패러다임을 여러 페이지로 구성된 **MPA(Multi-Page Application)**에서 단일 페이지 내에서 모든 상호작용이 일어나는 **SPA(Single-Page Application)**로 전환하는 데 결정적인 역할을 했다. React, Angular, Vue와 같은 현대 JavaScript 프레임워크는 모두 Ajax의 비동기 통신 원리를 기반으로 SPA를 구현한다.
웹 애플리케이션의 고도화: Ajax 덕분에 웹은 더 이상 정적인 문서의 집합이 아니라, 데스크톱과 경쟁할 수 있는 동적이고 상호작용적인 애플리케이션 플랫폼으로 진화할 수 있었다.

결론적으로, Ajax는 오늘날 웹 개발에서 ‘설치’하거나 ‘가져오는’ 라이브러리가 아니다. 그것은 웹 브라우저가 서버와 소통하는 근본적인 방식이자, 부드럽고 끊김 없는 사용자 경험을 만들기 위한 핵심 **‘사상’**이다. 비록 XMLHttpRequest나 Fetch API라는 구체적인 도구 뒤에 숨어있지만, 그 비동기적인 철학은 모든 현대 웹 기술의 DNA에 깊숙이 새겨져 있다. 이 핸드북을 통해 Ajax의 본질을 이해했다면, 당신은 현대 웹이 어떻게 숨 쉬고 움직이는지에 대한 깊은 통찰을 얻은 것이다.

시스매

탐색기

Ajax 완벽 정복 핸드북 비동기 웹의 혁명을 이끌다

Ajax 완벽 정복 핸드북 비동기 웹의 혁명을 이끌다

1장 Ajax는 왜 탄생했는가 웹의 패러다임을 바꾼 비동기 통신

1.1 동기식 웹의 시대 답답함의 연속

1.2 혁명의 서막 마이크로소프트와 구글의 도전

2장 Ajax의 정체 파헤치기 기술의 조합

3장 Ajax 사용법 핵심 엔진의 작동 원리

3.1 클래식 엔진 XMLHttpRequest (XHR)

3.2 모던 엔진 Fetch API

4장 심화 학습 알아두면 쓸모 있는 Ajax 지식

4.1 데이터 포맷의 제왕 JSON

4.2 보안 장벽과 해결사 SOP와 CORS

4.3 과거의 영웅 jQuery.ajax

5장 Ajax의 유산과 미래

그래프 뷰

목차