Javascript ajax XMLHttpRequest 통신 구현

 

Javascript ajax XMLHttpRequest 통신 구현

 

최근 웹 개발 트랜드

최근 React, Angular, Vue, GO 등 다양한 Javascript 프레임워크들이 대두되면서 Jquery 의 점유율이 떨어지고 있는 것이 추세입니다.

2006년 jQuery 가 발표된 이후 브라우저간 갖고 있던 이질성이 해결되고, DOM 또한 효율적으로 다룰 수 있게 되면서 Javascript 프레임워크 1위 자리를 유지했었죠. 현재도 많은 사용자가 jQuery를 사용하고 있는 것도 사실입니다. 

하지만, 스마트폰의 시대가 열리면서 한정적인 CPU와 메모리, 데이터의 사용으로 불필요한 코드들이 많아 무거운 jQuery는 개발자들이 점점 배제하기 시작합니다.

 

Link : 다양한 javascript 프레임워크

 

Vanila JS?

그러면서 순수한 Javascript 만을  사용해 개발을 하는 Vanila JS가 이슈가 되게 됩니다.

프레임워크를 사용하지 않아도 충분히 웹 개발이 가능하고 성능 또한 떨어지지 않기 때문이죠.

Vanila js 홈페이에서 .js 파일을 다운로드 받으면 아무 코드도 없는 이유가 이것 입니다. 

 

ajax 구현

그럼 이제 javascript의 XMLHttpRequest를 이용하여 비동기 통신을 구현하는 방법을 살펴보겠습니다.

 

const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'json';
xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8;');
xhr.onload = function(e) {
    if (this.status == 200) {
    	alert('성공');
    }
}
xhr.send(JSON.stringify(data));

 

간단히 json 데이터를 주고 받는 예제 입니다. 

 

Open(Http Request Method, URL, async)

 

HTTP Request Method 에는 'GET', 'POST', 'PUT', 'DELETE' 가 있으며

open 함수의 세번째 파라메터는 비동기 여부 입니다. (true : 비동기, false : 동기)

 

setRequestHeader()

 

Content-type 은 서버쪽에 나 이런 형태로 보낼꺼야 하는 내용이고

주로 사용하는 Content-type에는 아래와 같습니다.

 

json - application/json

form - application/x-www-form-urlencoded

file - multipart/form-data

 

application/json 으로 content-type을 설정할 경우 Request Payload에 json 데이터가 실리며,

application/x-www-form-urlencoded, multipart/form-data 의 경우 form 데이터가 직렬화되어 전송되게 됩니다.

 

send()

 

Controller에서 @ReqeustBody 로 Payload에 실린 json 데이터를

Jackson ObjectMapper를 통해 Java Object로 변환 하기 위해 Javascript Object를 json 데이터로 변환하여 전송하게 됩니다.

 

 

onload()

 

서버로 부터 응답이 오면 실행되게 됩니다.

 

 

onreadystatechange()

 

위에서 사용하진 않았지만 onreadystatechange 함수를 통해 readyState 가 변경되는 순간을 감지할 수 있습니다.

 

xhr.onreadystatechange = function() {
	console.log(this);
    if (this.readyState == 4 && this.status == 200) {
       
    }
};

 

readyState

 

0 : 요청이 초기화되지 않음
1 : 서버 연결 설정
2 : 요청 수신
3 : 처리 요청
4 : 요청 완료 및 응답 준비