XMLHttpRequest는 뭐고 AJAX는 뭘까?

XMLHttpRequest는 뭐야?

XMLHttpRequest는 클라이언트 측에서 서버와 비동기적으로 상호 작용할 수 있도록 해주는 자바스크립트 객체입니다. 이를 사용하면 페이지의 새로고침 없이도 서버로부터 데이터를 요청하고 받을 수 있습니다. 주로 AJAX(Asynchronous JavaScript and XML) 기술에 사용되며, 최근에는 fetch API로 대체되는 경향이 있습니다.

 

 

XMLHttpRequest의 주요 메서드와 속성:

1. open(method, url, async) 메서드:
   • HTTP 요청을 초기화합니다.
   • method: HTTP 메서드 (GET, POST 등)
   • url: 요청을 보낼 URL
   • async: 비동기 여부를 나타내는 불리언 값
2. send(data) 메서드:
   • 요청을 서버로 보냅니다.
   • data: 요청과 함께 보낼 데이터 (POST 요청 시 사용)
3. setRequestHeader(header, value) 메서드:
   • HTTP 요청 헤더를 설정합니다.
   • header: 설정할 헤더의 이름
   • value: 설정할 헤더의 값
4. onreadystatechange 속성:
   • readyState 값이 변경될 때마다 호출되는 이벤트 핸들러를 설정합니다.
5. readyState 속성:
   • 현재 XMLHttpRequest 객체의 상태를 나타내는 값입니다.
     • 0: 초기화되지 않음
     • 1: 연결 설정됨
     • 2: 요청 받음
     • 3: 처리 중
     • 4: 요청이 완료되고 응답이 준비됨
6. status 속성:
   • 서버 응답의 HTTP 상태 코드를 나타냅니다.
     • 200: 성공
     • 404: 찾을 수 없음
     • 등등

 

XMLHttpRequest 사용 예시

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

// 요청 초기화
xhr.open('GET', 'https://api.example.com/data', true);

// 이벤트 핸들러 설정
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 요청이 완료되었고, 응답이 성공적으로 돌아왔을 때의 처리
    console.log(xhr.responseText);
  }
};

// 요청 보내기
xhr.send();

 

 

 

XMLHttpRequest를 해서 반환되는 값은 보통 어떤 데이터야?

XMLHttpRequest를 사용하여 서버로 요청을 보내고 응답을 받으면, 반환되는 값은 XMLHttpRequest 객체 자체입니다. 이 객체는 비동기적으로 데이터를 받아오기 위한 인터페이스를 제공하며, 서버 응답의 상태 및 데이터를 담고 있습니다.

서버 응답 데이터는 responseText 또는 responseXML 속성을 통해 접근할 수 있습니다. 어떤 속성을 사용할지는 서버에서 전송하는 데이터의 형식에 따라 달라집니다.

 

responseText:

• 텍스트 형식의 응답 데이터에 접근합니다.
• 주로 JSON, XML, HTML 등의 텍스트 형식으로 응답을 받을 때 사용됩니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const textData = xhr.responseText;
    console.log(textData);
  }
};
xhr.send();

 

 

responseXML:

• XML 형식의 응답 데이터에 접근합니다.
• 서버가 XML 형식의 데이터를 반환할 때 사용됩니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data.xml', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const xmlData = xhr.responseXML;
    console.log(xmlData);
  }
};
xhr.send();

 

이렇게 받은 데이터를 활용하여 클라이언트 측에서 원하는 작업을 수행할 수 있습니다. 일반적으로는 responseText를 사용하여 JSON 형태의 데이터를 받아오고, 이를 JSON.parse()를 이용하여 자바스크립트 객체로 파싱하는 경우가 많습니다.

 

 

responseXML을 받는거야? 이것도 객체의 인스턴스야?

네, responseXML은 XMLHttpRequest 객체의 속성 중 하나로서, 서버에서 받아온 XML 데이터를 나타내는 Document 객체의 인스턴스입니다. 이 객체는 DOM(Document Object Model) 인터페이스를 따르며, XML 문서의 구조를 나타내고 조작할 수 있는 메서드와 속성을 제공합니다.

즉, responseXML은 XML 데이터를 자바스크립트에서 다룰 수 있도록 하는 Document 객체입니다.

 

 

XMLHttpRequest와 AJAX의 정확한 관계에 대해서 알고싶어. 뭐가 더 큰 범위야?

• AJAX (Asynchronous JavaScript and XML):
  • 비동기적으로 서버와 브라우저 간에 데이터를 교환하기 위한 전반적인 기술 개념.
  • XMLHttpRequest, fetch API 등을 사용하여 비동기 통신을 구현하는데 활용됨.
  • 데이터 형식으로 XML을 사용하는 경우도 있지만, 현대에는 주로 JSON을 사용하는 추세.
• XMLHttpRequest:
  • AJAX를 구현하기 위한 핵심 객체 중 하나.
  • 브라우저에서 제공되는 객체로, 서버로의 비동기 HTTP 요청을 생성하고 응답을 받아올 수 있음.
  • 초기에는 주로 XML 데이터를 주고받는 데 사용되었지만, 현대에는 다양한 데이터 형식 (주로 JSON)으로의 통신에 활용됨.

 

 

XMLHttpRequest를 성공해서 받아오는 값은 Promise객체가 아니라 다른거야?

맞습니다. XMLHttpRequest를 사용하여 비동기적으로 데이터를 받아오면 반환되는 값은 Promise 객체가 아닙니다. XMLHttpRequest는 Promise 기반 API가 아니며, 비동기 작업의 완료나 실패를 다루기 위해서는 이벤트 핸들러를 활용해야 합니다.

그러나 fetch API는 Promise 기반으로 구현되어 있습니다. 따라서 fetch를 사용하면 비동기 요청을 Promise로 다룰 수 있습니다. 아래는 fetch를 사용한 예제입니다:

 

 

promise도 비동기 통신을 위한 특수한 객체이고 XMLHttpRequest도 비동기 통신을 위한 특수한 객체지만 둘은 서로 다른거네?

네, 맞습니다. Promise와 XMLHttpRequest는 모두 비동기 통신을 위한 객체로 사용됩니다.

 

 

 

AJAX가 나오기 전에도 서버와 브라우저 간의 통신은 있었잖아. AJAX가 나오기 전과 AJAX가 제공하는 기술이랑 다른게 뭔데?

1. 페이지 전체의 리로딩 없이 데이터 교환:
   • AJAX 이전: 데이터를 요청하면 페이지 전체가 리로드되어야 했습니다.
   • AJAX 이후: 페이지 전체를 리로드하지 않고도 비동기적으로 데이터를 요청하고 업데이트할 수 있게 되었습니다.
2. 사용자 경험의 향상:
   • AJAX 이전: 사용자가 요청할 때마다 새로운 페이지를 로드해야 했기 때문에 사용자 경험이 상대적으로 불편했습니다.
   • AJAX 이후: 데이터를 비동기적으로 가져오기 때문에 사용자는 페이지를 리로드하지 않고도 동적으로 업데이트된 내용을 볼 수 있게 되었습니다.
3. 비동기 통신의 도입:
   • AJAX 이전: 주로 동기식 통신 방식이 사용되었으며, 요청과 응답이 차단되었습니다.
   • AJAX 이후: 비동기식 통신이 도입되어 요청과 응답이 차단되지 않고 비동기적으로 처리됩니다.
     
     

요약

즉, AJAX는 동기적으로 전체 페이지를 불러오던 옛날 방식 HTML/CSS/JS 방식이 아니라,

비동기적으로 서버 통신을 해서 부분적으로 업데이트하게 해주는 기술이며, 이러한 기술 전반을 뜻한다.

 

AJAX란 개념과 함께 XMLHttpRequest API가 나와서

AJAX라 하면 XMLHttpRequest를 뜻하는 느낌이 강하지만

사실 추후 등장한 fetch API 때문에 이젠 조금 모호한 개념이 되었다.

 

엄밀히 말하면 fetch API도 AJAX(클라이언트-서버 비동기 통신)라고 할 수 있지만, 

AJAX라 하면 보통 XMLHttpRequest를 이용한 통신을 연상하게 되기 때문이다.