Ajax

---

⚡ Ajax란?

정의

Ajax는 페이지 전체를 다시 불러오지 않고 필요한 데이터만 비동기적으로 주고받는 방식이다. 주로 사용자 경험을 개선하고 화면 일부만 갱신할 때 사용한다.

🎯 사용하는 이유

• 페이지 전체를 새로고침하지 않아도 된다.
• 필요한 데이터만 요청해서 사용할 수 있다.
• 응답 형식에 따라 유연하게 구현할 수 있다.
• 더 자연스러운 사용자 경험을 제공한다.

포인트

Ajax는 비동기 HTTP 요청을 활용한 화면 일부 갱신 방식이라고 이해하면 쉽다.

🧩 Conventional Web Model vs Ajax Web Model

Conventional Web Model

• 요청 후 전체 페이지가 다시 렌더링된다.
• 화면 전환이 단순하지만 새로고침이 잦다.

Ajax Web Model

• 필요한 데이터만 서버에서 받아온다.
• 화면 일부만 갱신할 수 있다.
• 사용자 체감 성능이 좋아진다.

⚖️ 장점과 단점

장점

• 페이지 전체를 다시 로드하지 않아도 된다.
• 비동기 요청으로 사용자 경험이 좋아진다.
• API 응답 형태에 따라 다양하게 구현할 수 있다.

단점

• 구현 방식에 따라 복잡해질 수 있다.
• CORS, 비동기 처리, 에러 처리에 신경 써야 한다.
• 구형 브라우저에서는 제약이 있을 수 있다.

[!important] 주의 Ajax는 편리하지만 비동기 처리와 응답 상태 관리를 함께 고려해야 한다.

🛠️ Ajax 적용 방식

XMLHttpRequest 객체 사용

• 브라우저에 내장된 XMLHttpRequest 객체를 사용한다.
• 예전 방식이지만 기본 개념을 이해하기 좋다.

const request = new XMLHttpRequest();
request.onreadystatechange = function () {
  if (request.readyState =** XMLHttpRequest.DONE) {
    if (request.status **= 200 || request.status === 201) {
      console.log(request.responseText);
    } else {
      console.error(request.responseText);
    }
  }
};
request.open('GET', url);
request.send();

jQuery

• $.ajax()를 사용한다.
• XMLHttpRequest를 감싸서 사용하기 편하게 만든 방식이다.

$.ajax({
  url: 'url',
  method: 'GET',
  success: function (response) {
    console.log(response);
  },
  error: function (error) {
    console.log(error);
  }
});

fetch API

• 브라우저 기본 API다.
• Promise 기반으로 동작한다.

fetch('url', {})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error));

Axios

• Promise 기반 HTTP 클라이언트다.
• 응답 처리와 설정이 편하다.

axios.get('url')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

🧭 실제 사용 예

• 댓글 추가
• 검색 자동완성
• 좋아요/좋아요 취소
• 목록 일부 갱신
• 폼 제출 후 결과만 갱신

🧾 정리

Ajax는 페이지 전체 새로고침 없이 필요한 데이터만 비동기로 주고받는 기술이다. 현재는 fetch와 Axios를 더 자주 보지만, Ajax의 기본 개념은 여전히 중요하다.

---

연결문서

• DOM
• HTTP
• CORS