[자바스크립트] AJAX

AJAX(Asynchronous JavaScript and XML)

 

설명

• 웹 애플리케이션에서 비동기적으로 서버와 데이터를 주고받는 기술
• 페이지 전체를 새로고침하지 않고도 동적으로 데이터를 업데이트 가능
• 주로 JS와 함께 사용되며, XMLHttpRequest 객체를 이용하여 서버와 통신

 

동작 과정

var xhr = new XMLHttpRequest(); 
// XMLHttpRequest 객체 생성

xhr.open('GET', '데이터를_불러올_URL', true); 
// 요청 설정 (GET 방식, 데이터를 불러올 URL, 비동기적 요청)

xhr.setRequestHeader('Content-Type', 'application/json'); 
// 요청 헤더 설정

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var responseData = JSON.parse(xhr.responseText); 
    // 응답 데이터를 JSON 형식으로 파싱
    // 응답 데이터를 처리하는 로직을 수행
    console.log(responseData);
  } else if (xhr.readyState === 4 && xhr.status !== 200) {
    console.error('데이터를 불러오는 중 에러가 발생했습니다.');
  }
};

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

1. XMLHttpRequest 객체를 생성
2. open() 메서드를 사용하여 GET 방식의 요청을 설정
3. setRequestHeader() 메서드를 사용하여 요청 헤더를 설정
4. onreadystatechange 이벤트 핸들러를 등록하여 요청 상태가 변경될 때마다 처리 로직을 수행
5. 요청이 완료되고 성공적인 응답을 받았을 때는 응답 데이터를 파싱하고 처리하는 로직이 수행
6. 요청이 완료되었지만 응답이 실패했을 때는 에러 메시지를 출력
7. send() 메서드를 호출하여 요청을 서버로 전송

 

1. XMLHttpRequest 객체 생성
   • AJAX 요청을 처리하기 위해 XMLHttpRequest 객체를 생성
   • 객체를 상용하여 서버와의 통신을 수행
2. 요청 설정
   • XMLHttpRequest 객체를 사용하여 서버로 보낼 요청을 설정
   • 요청 메서드(GET, POST 등), 요청 URL, 요청 헤더, 요청 매개변수 등을 설정
3. 이벤트 핸들러 등록
   • AJAX 요청의 진행 상황을 모니터링하기 위해 이벤트 핸들러를 등록
   • 요청이 완료되었을 때의 처리, 요청이 실패했을 때의 처리 등을 정의
4. 요청 전송
   • 설정된 요청을 서버로 전송
   • 요청은 비동기적으로 처리되므로 브라우저는 다른 작업을 진행하면서 요청을 백그라운드에서 처리
5. 서버 응답 처리
   • 서버에서의 응답을 받으면 XMLHttpRequest 객체는 응답을 처리
   • 응답의 상태 코드, 응답 헤더, 응답 본문 등을 확인
6. 데이터 처리
   • 응답 본문에 담긴 데이터를 적절하게 처리
   • 데이터를 파싱하여 JS 객체로 변환 하거나 웹 페이지의 일부분을
     업데이트하는 등의 작업을 수행 가능
7. 이벤트 처리
   • AJAX 요청과 응답은 이벤트 기반으로 동작
   • XMLHttpRequest 객체는 요청과 응답에 대한 이벤트를 발생시키고, 이를 JS 코드에서 처리
   • 요청이 완료됬을 때, 오류가 발생했을 때의 처리 등을 이벤트 핸들러를 통해 구현

 

장점

• 사용자 경험 향상
  • AJAX를 사용하면 페이지를 전체적으로 새로고침하지 않고도 일부분만 업데이트 가능
  • 사용자가 웹 페이지를 더욱 빠르게 탐색하고, 부드러운 화면 전환을 경험
• 비동기 통신
  • AJAX는 비동기적인 통신을 지원
  • 사용자의 다른 작업을 방해하지 않고 웹페이지와 서버간에 데이터를 주고받을 수 있다.
  • 웹 페이지의 다른 부분을 업데이트하거나 추가 정보를 불러올 유연성을 제공
• 대역폭 절약과 서버 부하 감소
  • AJAX를 사용하면 필요한 데이터만을 요청하고, 필요한 데이터만을 서버가 응답
  • 전체 페이지를 새로고침하는 것보다 훨씬 작은 데이터 양이 전송되므로 대역폭을 절약
  • 서버의 부하를 줄이고 성능을 향상

 

단점

• 브라우저 호환성
  • 일부 오래된 브라우저는 AJAX를 지원하지 않거나 제한적인 지원
  • 특정 사용자들이 AJAX를 올바르게 사용할 수 없는 경우가 있을 수 있다.
• 보안 문제
  • AJAX를 사용하면 서버와 클라이언트 간의 데이터 통신이
    비동기적으로 이루어지므로, 보안 문제에 노출 가능성
  • 적절한 데이터 검증 및 보안 조치를 취하지 않으면 악의적인 사용자에게 취약점
• 검색 엔진 최적화(SEO) 문제
  
  • AJAX를 사용하여 동적으로 데이터를 로드하는 경우,
    일부 검색 엔진은 해당 데이터를 인덱싱하지 못할 수 있어서 최적화에 영향 가능
• 디버깅과 테스트의 어려움
  • 비동기적인 통신으로 인해 디버깅이나 테이트가 어려울 수 있다.
  • 데이터 흐름을 추적하거나 특정 시점에서의 상태를 확인하기 어려울 수 있다.