Category/정보처리기사

AJAX (Asynchronous JavaScript and XML)란?

Corinee 2024. 10. 10. 11:28
728x90

AJAX는 비동기적인 방식으로 웹 페이지의 일부를 갱신할 수 있는 웹 개발 기술입니다. 이 기술을 사용하면, 전체 웹 페이지를 다시 로드하지 않고도 서버와 통신하여 데이터를 주고받을 수 있습니다. AJAX는 웹 애플리케이션이 더 빠르고 동적으로 반응할 수 있게 해줍니다.

AJAX의 핵심 개념

  1. 비동기성:
    • AJAX의 가장 큰 특징은 비동기 통신을 지원한다는 점입니다. 웹 페이지가 서버에 요청을 보낸 후, 응답을 기다리지 않고도 다른 작업을 계속 수행할 수 있습니다.
    • 예를 들어, 사용자가 데이터를 입력할 때마다 서버에 데이터를 보내고 받아오면서 페이지를 다시 로드하지 않고도 새로운 데이터를 화면에 반영할 수 있습니다.
  2. 자바스크립트와 XML:
    • 원래는 XML 형식으로 데이터를 주고받는 데 사용되었으나, 현재는 JSON이 더 많이 사용됩니다. 자바스크립트는 이 모든 과정을 제어하는 역할을 합니다.
    • XML뿐만 아니라 HTML, JSON, 텍스트 데이터를 사용할 수 있습니다.
  3. 전체 페이지 리로딩 없이 부분적 갱신:
    • AJAX를 사용하면 웹 페이지의 일부만 갱신됩니다. 전체 페이지를 새로고침하지 않고도 필요한 부분만 업데이트할 수 있기 때문에 사용자 경험(UX)이 크게 향상됩니다.

AJAX의 작동 방식

  1. 브라우저에서 이벤트 발생 (예: 버튼 클릭, 페이지 로드 등)
  2. JavaScript가 XMLHttpRequest 객체를 생성해 서버에 요청을 보냄.
  3. 서버는 요청을 처리하고, JSON, XML, HTML 또는 텍스트 형식의 응답을 반환.
  4. JavaScript가 서버 응답을 처리하고, DOM을 수정하여 웹 페이지의 필요한 부분을 업데이트.
  5. 사용자에게 새로운 데이터가 반영된 페이지를 표시함.

AJAX 주요 메서드:

  • XMLHttpRequest 객체는 AJAX 요청을 처리하는 핵심 객체입니다. 이 객체를 통해 서버와의 비동기 통신이 이루어집니다.

AJAX 요청의 기본 흐름:

1. XMLHttpRequest 객체 생성:

var xhr = new XMLHttpRequest();

2. 요청 설정: 서버에 보낼 요청을 설정합니다. open() 메서드를 사용하여 요청의 종류(GET/POST)와 URL, 비동기 여부를 지정합니다.

xhr.open("GET", "https://api.example.com/data", true); // 비동기 방식 요청

3. 요청 보내기:

xhr.send();  // GET 방식일 때는 send()에 인자를 전달하지 않음

4. 응답 처리: 서버로부터 응답을 받았을 때 처리할 코드를 작성합니다. onreadystatechange 이벤트를 통해 서버 응답이 도착할 때 실행됩니다.

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {  // 응답 성공 여부 확인
    console.log(xhr.responseText);  // 서버 응답 처리
  }
};

AJAX의 장점:

  1. 빠른 사용자 경험: 전체 페이지를 다시 로드하지 않고도 필요한 데이터를 로드할 수 있으므로 사용자가 빠르게 데이터를 확인할 수 있습니다.
  2. 서버 트래픽 감소: 필요한 데이터만 주고받기 때문에 불필요한 데이터 전송을 줄여 서버 부하를 감소시킬 수 있습니다.
  3. 더 나은 사용자 인터페이스: 부분적인 갱신을 통해 웹 애플리케이션을 더 동적이고 상호작용성 있게 만들 수 있습니다.

AJAX의 단점:

  1. 브라우저 호환성 문제: 오래된 브라우저에서는 AJAX 기능이 제대로 지원되지 않을 수 있습니다.
  2. 백 버튼 비활성화: AJAX 요청은 URL을 변경하지 않기 때문에 브라우저의 뒤로 가기 버튼이 정상적으로 동작하지 않는 경우가 있습니다.
  3. SEO(검색 엔진 최적화): AJAX로 동적으로 로드되는 콘텐츠는 검색 엔진 크롤러가 인식하지 못할 수 있습니다.

AJAX를 대체할 기술:

  • Fetch API: 최신 브라우저에서 지원하는 새로운 방식으로 비동기 통신을 처리하는 API. 간결하고 강력하며, 프라미스를 기반으로 하여 코드가 더 깔끔해졌습니다.
  • Axios: AJAX를 처리하기 위한 라이브러리로, Promise 기반이며, 더 간편하고 직관적인 방식으로 서버와의 통신을 처리할 수 있습니다.

AJAX의 활용 예시:

  • 검색 자동 완성: 사용자가 검색어를 입력할 때마다 서버에 요청을 보내 관련 검색어를 실시간으로 받아오는 방식.
  • 무한 스크롤: 사용자가 페이지를 스크롤할 때마다 서버에 요청을 보내 더 많은 콘텐츠를 받아오는 방식.
  • 채팅 애플리케이션: 사용자가 채팅 메시지를 보낼 때마다 서버에 메시지를 보내고, 실시간으로 메시지를 주고받을 수 있게 함.

AJAX는 웹 애플리케이션을 더 동적이고 반응성 있게 만들기 위한 중요한 기술이며, 오늘날의 웹 개발에서 기본적인 요소로 자리 잡고 있습니다.

728x90