[JavaScript]Ajax 통신

어플리케이션에서 API를 사용하기 위해 라이브러리를 사용했던 것보다도 훨씬 간단하게 통신이 가능했다.

또한, 웹 페이지에 대한 모든 정보를 한 번에 로딩하는 것이 아니라 이벤트에 따라 ajax를 통해 필요한 시점에 정보를 받아올 수 있다는 점이 놀라웠다.

 

AJAX 실행코드

아래 방법은 XMLHTTPRequest 객체를 사용하는 표준방법이다.

function ajax(data) {

    var oReq = new XMLHttpRequest();

    oReq.addEventListener("load", function() {

         console.log(this.responseText);

    });

    oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음.

    oReq.send();

}

 

ajax 함수가 먼저 실행되고 난 후에, addEventListener가 나중에 실행된다. 

위의 코드는 get 방식으로 통신한 것이다. 

post 방식의 경우, 따로 파라미터를 설정해줘야 한다. 

 

추가적으로 ajax나 Fetch와 같은 API에서 CORS를 사용하여 교차 출처 HTTP 요청의 위험을 완화한다.

링크 참조 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS)