essential
↵ 선택 ↑↓ 탐색 ESC 닫기

검색 결과가 여기에 표시됩니다

essential

36. Ajax

Ajax는 서버와 비동기 통신을 통해 웹 페이지를 새로고침하지 않고 필요한 데이터만 갱신하는 기술

1. Ajax란 무엇인가?

1.1 Ajax의 정의

Ajax는 자바스크립트를 사용해 브라우저가 서버와 비동기 방식으로 통신하고, 서버로부터 받은 데이터를 이용해 웹 페이지를 전체 새로고침 없이 동적으로 갱신하는 프로그래밍 방식이다.

  • Asynchronous JavaScript and XML의 약자
  • 실제로는 XML보다 JSON 포맷을 더 많이 사용
  • 브라우저가 제공하는 Web API 기반 기술


1.2 Ajax의 등장 배경

  • 전통적인 웹은 요청마다 HTML 전체를 다시 내려받아 렌더링
  • 이 방식은:
    • 불필요한 데이터 전송
    • 화면 깜박임
    • 느린 사용자 경험 문제를 가짐
  • 2005년 Google Maps에서 Ajax 활용 사례가 주목받으며 본격 확산

📌 핵심 요약

→ Ajax는 “페이지 이동 중심 웹”에서 “데이터 중심 웹”으로의 전환을 가능하게 한 기술이다.


2. JSON (JavaScript Object Notation)

2.1 JSON이란?

JSON은 클라이언트와 서버 간 데이터 교환을 위한 텍스트 기반 포맷이다.

  • 언어 독립적
  • 사람이 읽기 쉬움
  • 자바스크립트 객체 리터럴과 유사


2.2 JSON의 문법 특징

  • key는 반드시 큰따옴표(“ “)로 감싸야 함
  • 값은 문자열, 숫자, 불리언, 배열, 객체 가능
  • 함수, undefined 사용 불가


2.3 JSON.stringify (직렬화) vs JSON.parse (역직렬화)

2.3.1 JSON.stringify (직렬화)

  • 객체 → JSON 문자열
  • 서버로 데이터를 전송할 때 사용
JSON.stringify(obj);

2.3.2 JSON.parse (역직렬화)

  • JSON 문자열 → 자바스크립트 객체
  • 서버 응답 데이터를 사용할 때 필요
JSON.parse(jsonString);


3. XMLHttpRequest 객체

3.1 XMLHttpRequest란?

XMLHttpRequest는 Ajax 요청을 위해 브라우저가 제공하는 Web API 객체로, 자바스크립트에서 HTTP 요청과 응답을 직접 제어할 수 있게 해준다.

  • 비동기 HTTP 통신 지원
  • 서버와 데이터(JSON 등) 교환 가능
  • Ajax의 핵심 구현 수단


3.2 XMLHttpRequest 객체 생성

const xhr = new XMLHttpRequest();
  • XMLHttpRequest 생성자 호출로 객체 생성
  • 하나의 객체는 하나의 HTTP 요청을 담당


3.3 요청 초기화: open() 메서드

xhr.open(method, url, async);
  • method: HTTP 메서드 (GET, POST, PUT, DELETE 등)
  • url: 요청을 보낼 서버 주소
  • async: 비동기 여부
    • 기본값 true
    • false 지정 시 동기 요청 (권장하지 않음)

📌 open은 실제 요청이 아니라 “요청 설정 단계”


3.4 요청 헤더 설정: setRequestHeader()

xhr.setRequestHeader('Content-Type', 'application/json');
  • HTTP 요청 헤더 설정
  • JSON 데이터 전송 시 application/json 지정 필수
  • 반드시 open() 호출 이후에 설정해야 함


3.5 요청 전송: send() 메서드

3.5.1 GET 요청

  • 데이터는 URL의 쿼리스트링으로 전달
  • send()에 인수를 전달하지 않거나 null 사용
xhr.send();


3.5.2 POST 요청

  • 데이터를 요청 본문(Request Body)에 담아 전송
  • 객체는 반드시 JSON 문자열로 변환해야 함
xhr.send(JSON.stringify(data));

📌 객체를 그대로 보내면 안 됨


4. HTTP 응답 처리

4.1 readyState와 status

  • readyState: 요청의 진행 상태를 나타내는 값
    • 4 (DONE): 요청 완료, 응답 수신 완료
  • status: HTTP 상태 코드
    • 200: 정상 응답

📌 응답 처리 전 반드시 상태 확인 필요


4.2 이벤트 핸들러

4.2.1 onreadystatechange

  • 요청 상태(readyState)가 변경될 때마다 호출
  • 상태 값을 직접 확인해야 하므로 코드가 다소 복잡
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.response);
  }
};


4.2.2 onload (권장)

  • 요청이 성공적으로 완료되었을 때 한 번만 실행
  • 코드가 간결하고 가독성이 좋음
xhr.onload = () => {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.response);
  }
};

📌 onload는 브라우저(Web API)가 HTTP 요청이 “완전히 완료되었다”고 판단했을 때, 단 한 번만 실행되는 이벤트 핸들러입니다.



reference: 모던자바스크립트 Deep Dive 43장. Ajax

Development
Javascript