[JS] 자바스크립트 Ajax 통신 예제 (vanilla JS)

 

 

 

 

 

 

 

📌 vanilla JS로 Ajax 통신하기

자바스크립트로 Ajax 통신을 할 때 흔히 Jquery를 사용하지만 순수 Javascript 를 통해 Ajax통신을 할 때는 XMLHttpRequest라는 API를 이용한다.

 

XML는 원래 XML만을 전송하는 목적을 갖고 있었지만 Json이나 일반 텍스트는 물론 파일까지도 전송이 가능하다. ajax라는 이름도 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)다.

 

 

 

1️⃣ GET

<input type="button" id="btn-ajax">
<script>
    var btn = document.getElementById("btn-ajax");

    btn.addEventListener("click", () => {
        //XMLHttpRequest 객체 생성
        var xhr = new XMLHttpRequest();

        //요청을 보낼 방식, url, 비동기여부 설정
        xhr.open('GET', 'url', true);

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

        //Callback
        xhr.onload = () => {
            if (xhr.status == 200) {
            	//success
                console.log(xhr.response);
            } else {
                //failed
            }
        }
    });
</script>

 

 

- XMLHttpRequest()를 실행하여 통신에 사용될 XMLHttpRequest(XHR) 객체를 생성한다.

- 생성된 객체에 .open()으로 요청을 초기화한다.

- open('전송 방식', 'url', '비동기 여부')형식으로 작성한다.

- send()로 요청을 전송하고 .onload로 통신 후 콜백처리한다.

- status는 XHR객체의 응답 상태를 반환한다. (통신 성공시 200 반환)

- response를 사용하면 요청 후 서버에서 전송한 데이터를 사용할 수 있다.

 

 

 

2️⃣ POST

<input type="button" id="btn-ajax">
<script>
    var btn = document.getElementById("btn-ajax");

    btn.addEventListener("click", () => {
        //XMLHttpRequest 객체 생성
        var xhr = new XMLHttpRequest();

        //요청을 보낼 방식, url, 비동기여부 설정
        xhr.open('POST', 'url', true);
        
        //HTTP 요청 헤더 설정
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        
        //요청 전송
        xhr.send("id=post_ajax");

        //Callback
        xhr.onload = function () {
            if (xhr.status == 200) {
                //success 
                console.log(xhr.response);
            } else {
                //failed
            }
        }
    });
</script>

 

POST 방식은 GET방식과 거의 같지만 setRequestHeader()를 통해 헤더 설정을 추가해야한다.

또한, 전송할 데이터도 url가 아닌 .send()메소드 안에 넣어서 전송 해야 한다.