XMLHttpRequest(네트워킹과 웹 성능 최적화 기법)

XMLHttpRequest

XMLHttpRequest

XMLHttpRequest는 웹 브라우저에서 제공하는 JavaScript 객체로, 

서버와 상호작용하기 위해 사용됩니다. 

주로 비동기적으로 서버에 데이터를 요청하고 응답을 처리하는 데에 쓰입니다. 

이 객체는 AJAX(Asynchronous JavaScript and XML) 기술을 구현하는 데 사용되며, 

최근에는 JSON과 같은 다양한 형식의 데이터를 다룰 수 있도록 발전해왔습니다.

XMLHttpRequest를 사용하면 웹 페이지를 새로 고치지 않고도 서버로부터 데이터를 가져와 페이지의 

일부를 업데이트할 수 있습니다.

 

주요 메서드와 이벤트

 

주요 메서드:
open(method, url, async, user, password): HTTP 요청을 초기화합니다.

method: HTTP 메서드 (GET, POST 등)
url: 요청할 URL
async: 비동기 여부를 나타내는 불리언 값
user: 옵션 - 인증에 사용할 사용자 이름
password: 옵션 - 인증에 사용할 비밀번호
send(data): 요청을 서버로 보냅니다.
data: POST 요청 시에 보낼 데이터를 지정합니다.

 

주요 이벤트:
onreadystatechange: readyState 속성이 변경될 때마다 호출되는 이벤트 핸들러입니다.
onload: 요청이 성공적으로 완료되었을 때 호출되는 이벤트 핸들러입니다.
onerror: 요청이 실패했을 때 호출되는 이벤트 핸들러입니다.

 

기본 사용 법

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/data", true);

xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // 요청이 완료되고 응답이 성공인 경우
    console.log(xhr.responseText);
  }
};

xhr.send();

 

주로 사용 예시

 

XMLHttpRequest는 웹 브라우저에서 제공되는 JavaScript 객체로, 

주로 웹 페이지에서 서버와 상호작용할 때 사용됩니다. 

예를 들어, 웹 페이지를 로드한 후에 사용자가 특정 기능을 수행하면서 서버에 데이터를 요청하거나 

서버에 데이터를 보내고, 그 결과를 받아와서 동적으로 화면을 업데이트할 수 있습니다.

한 가지 일반적인 사용 사례는 사용자가 웹 페이지에서 어떤 동작을 하면, 

JavaScript를 사용하여 XMLHttpRequest를 통해 서버에 데이터를 요청하고 

그 결과를 받아와서 페이지의 일부를 업데이트하는 것입니다.

이렇게 함으로써 사용자는 페이지를 새로고침하지 않고도 실시간으로 데이터를 확인하거나

업데이트할 수 있습니다.

또 다른 예시로는 사용자가 웹 폼을 작성하고 제출할 때, 

해당 폼의 데이터를 XMLHttpRequest를 사용하여 서버로 보내고 서버는 

그 데이터를 처리한 후에 응답을 보내주는 것입니다. 

이를 통해 웹 애플리케이션은 사용자와 서버 간에 실시간으로 소통할 수 있게 됩니다.

요약하면, XMLHttpRequest는 웹 페이지에서 비동기적으로 서버와 통신하고, 

그 결과를 처리하여 동적으로 웹 페이지를 업데이트하는 데에 사용되는 JavaScript 객체입니다. 

이를 통해 브라우저와 서버 간에 데이터를 주고받을 수 있어, 보다 동적이고 실시간으로 반응하는 

웹 애플리케이션을 구현할 수 있습니다.

*바쁜 사람을 위한 정리

XMLHttpRequest이라는 것은 웹 브라우저에서 제공하는 자바스크립트 객체를 말한 것으로 서버와 상호작용하기 위해 사용됩니다. 주로 비동기적인 경우에 사용하는데 비동기적이라는 말은 웹 페이지 화면이 리플레쉬 즉 쉽게 말해 새로고침이 안되는 상황들에 사용되는 기술이다. 예를들면 실시간 주식 종목이 올라오는 사이트면 계속 새로 고침을 할 수 없으니 실시간으로 바뀌는 걸 보여주는 것 처럼 이럴 경우에 많이 사용되는 기술이라고 이해하면 쉬울거 같다.