JavaScript Ajax 비동기 통신 방법

JavaScript에서 Ajax를 사용하여 서버와 비동기 통신을 하는 방법은 다음과 같습니다:

 

 1. XMLHttpRequest 객체를 생성합니다.

 

var xhttp = new XMLHttpRequest();

 

 

 2. 서버로 요청을 보냅니다.

 

xhttp.open("GET", "url", true);
xhttp.send();

 

 

위의 코드에서 "GET"은 HTTP 메소드입니다. HTTP 메소드는 서버에 요청을 보낼 때 사용되며, "GET"은 서버로부터 정보를 받아오는 메소드입니다. "url"은 요청을 보낼 서버의 주소입니다. "true"는 비동기식 요청을 의미합니다.

 

 

 3. 요청 상태를 확인합니다.

 

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // 요청이 완료되고 응답이 성공적으로 돌아왔을 때 실행될 코드
    console.log(this.responseText);
  }
};

 

 

위의 코드에서는 요청 상태를 확인하는 이벤트 리스너를 등록합니다. 이벤트 리스너는 요청이 완료되었을 때 실행됩니다. this.readyState는 요청 상태를 나타내며, 4는 요청이 완료되었다는 것을 의미합니다. this.status는 응답 상태 코드를 나타내며, 200은 성공적으로 응답을 받았음을 나타냅니다.

 

 

4.서버에서 받아온 응답을 처리합니다.

 

 

console.log(xhttp.responseText);

 

 

 

위의 코드에서 responseText는 서버로부터 받은 응답 데이터입니다. 이 데이터를 적절하게 처리하여 사용하면 됩니다.

이외에도, POST 메소드를 사용하여 데이터를 서버로 전송하거나, JSON 형태로 데이터를 전송하는 등 다양한 방법으로 Ajax를 사용할 수 있습니다.