자바스크립트(JavaScript)/웹(Web) - AJAX

글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다.!

 

AJAX

ajax는 Asynchronous JavaScript and XML약자이며 비동기적으로 자바스크립트를 이용하여 서버와 통신하는 기술입니다.

 

예전에는 XML을 많이 사용했지만 요즘은 더 좋은 JSON을 사용하여 데이터를 통신합니다.

 

서버와 통신하면서 페이지 내용을 가져와 바뀌어야 하면 페이지가 새로 고침 되어야 했습니다. 

 

하지만 ajax를 이용하면 비동기로 서버와 통신하여 DOM을 이용해 페이지를 그대로 사용하면서 일부를 실시간으로 변경합니다. 

메서드 알아보기

open 메서드는 요청을 초기화하는 데 사용됩니다.

• 첫 번째 인수는 서버에 요청하는 요청 메서드입니다. GET, POST, PUT, DELETE 등이 있습니다.
• 두 번째 인수는 서버에 요청하는 URI 요청 주소입니다.
• 세 번째 인수는 동기 또는 비동기 방법을 정합니다. 기본 값은 비동기 true입니다.
• 네 번째, 다섯 번째 인수는 아이디와 패스워드입니다.

send 메서드는 open에서 초기화한 정보를 토대로 서버에 요청을 보냅니다.

• 첫 번째 인수는 서버에 보낼 데이터를 지정합니다. 보통 POST로 서버에 보낼 데이터를 지정합니다.

setRequestHeader 메서드는 헤더를 추가합니다. 요청 헤더를 추가하려면 open 메서드가 호출되고 해당 메서드를 이용해 요청 헤더를 추가해야 합니다.

• 첫 번째 인수는 추가하려는 헤더입니다.
• 두 번째 인수는 헤더의 값을 설정합니다.

서버와 통신 하기

ajax를 이용해 서버와 통신을 하려면 XMLHttpRequest 객체를 생성해야 합니다.

 

해당 객체로 요청과 응답을 진행합니다. 해당 예제는 동일 출처 정책으로 인해 서버에서 하지 않는 이상 에러가 나타납니다. 동일 출처 정책을 확인하시기 바랍니다.

 

<button id="btn">클릭!</button>

<script>
  var btn = document.getElementById("btn");
  btn.addEventListener("click",function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        if(xhr.status == 200) {
          alert(xhr.responseText);
        }
        else {
          alert(`에러! > ${xhr.status}`);
        }
      }
    }
    xhr.open("GET","test.html");
    xhr.send();
  })
</script>

XMLHttpRequest 객체에서 이벤트 처리를 하여 통신상태를 확인해야 합니다.

 

따라서 addEventListener 메서드를 이용해서 이벤트를 등록하거나 이벤트 처리기를 이용해 onreadystatechange 이벤트를 처리해야 합니다.

 

onreadystatechange 이벤트는 서버와 통신을 시작할 때 현재 상태가 변경될 때 발생합니다.

 

이벤트 등록을 마치고 open 메서드를 통해 원하는 주소를 지정하고 send 메서드를 통해 데이터를 요청하면 됩니다.

 

readyState 프로퍼티가 통신상태에 따라서 변경이 되는데 이벤트를 이용해 변경이 되었을 때마다 확인을 하는 것입니다.

 

readyState 프로퍼티의 값

• 0(UNSENT) - 초기화되지 않은 상태(open 메서드가 호출되지 않은 상태)
• 1(OPENED) - open 메서드가 호출된 상태
• 2(HEADERS_RECEIVED) - send 메서드가 호출된 상태(헤더 설정과 state 프로퍼티를 사용이 가능)
• 3(LOADING) - 응답을 수신 중인 상태
• 4(DONE) - 응답이 끝난 상태(모든 데이터를 수신 완료한 상태)

해당 정보를 가지고 통신 상태를 확인합니다.

 

통신 상태를 확인했다면 이제 응답 상태를 확인합니다. 응답 상태는 state 프로퍼티를 사용하여 확인할 수 있습니다.

 

200이라면 정상적인 응답을 했다는 상태입니다.

 

더 많은 코드는 HTTP 응답 상태 코드를 참고하시기 바랍니다.

 

응답이 완료된 데이터는 XMLHttpRequest 객체의 response, responseText, responseXML 프로퍼티를 이용해 가져올 수 있습니다.

 

XMLHttpRequest 이벤트 종류

XMLHttpRequest 에는 다양한 이벤트가 있습니다. readystatechange 이벤트는 한 곳에서 모든 걸 처리해야 했다면

 

따로 나누어져 있는 이벤트를 이용해 좀 더 보기 좋게 이벤트들을 처리할 수 있습니다.

 

이벤트 종류

• abort - 요청이 중단되었을 때
• error - 요철에 에러가 발생할 때
• load - 서버와 통신이 성공했을 때
• loadend - 서버와 통신이 종료될 때(load, abort 나 error가 발생된 후)
• loadstart - 서버와 통신이 시작될 때
• progress - 서버와 통신이 이루어지고 있을 때

해당 이벤트들 모두 이벤트 리스너로 등록이 가능하며 이벤트 처리기도 가능합니다.

 

<button id="btn">클릭!</button>
<script>
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function () {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", () => {
      alert(`성공! > ${xhr.responseText} `);
    });
    xhr.addEventListener("error", () => {
      alert(`에러! > ${xhr.statusText} `);
    });
    xhr.open("GET", "test.html");
    xhr.send();
  });
</script>

에러 같은 경우는 status 프로퍼티를 상황에 맞게 사용하여 처리를 해야 합니다.

 

참고

모던 자바스크립트 입문(이소 히로시 지음, 서재원 옮김)

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

XMLHttpRequest - Web APIs | MDN