[JS] vanilla JS로 Ajax 통신하기

ajax 통신은 많이 써봤지만

vanilla js 에서 ajax 통신은 안써본것같아서 공부해보려고 한다.

 

자바스크립트로 ajax통신을 할 때 흔히 jquery를 사용하지만, 

순수 javascript를 통해 ajax 통신을 할때는 XMLHttpRequest 라는 API를 이용한다.

 

XML은 원래 XML만을 전송하는 목적을 갖고 있었지만, 

JSON 이나 일반 텍스트는 물론 파일까지도 전송이 가능하다.

 

AJAX라는 이름도 비동기 자바스크립트와 XML이다.

(Asynchronous JavaScript And XML)

<script>
	/*vanilla js 로 구현한 ajax (GET)*/
		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
				console.log(xhr.response);
			}
		}
</script>

<script>
    /*vanilla js 로 구현한 ajax (POST)*/
    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()메소드 안에 넣어서 전송해야함.