Ajax 통신 정의, 필요성, 예제

Ajax 통신 정의

Ajax 통신은 비동기적인 웹 어플리케이션의 제작을 위한 웹 개발 기법이다.

*여기서 비동기적인이란 서버에 웹페이지를 요청할 때 정식루트로 데이터가 오가든 말든 서버에 요청을 따로 요구할 수 있다는 것이다.

쉽게 얘기하면 한 페이지에서 어느 부분에 대한 변화를 요청한다면( 예시: 네이버 메인에서 웹툰, 푸드 카테고리 변화) 그 부분에 대해서만 통신하여 결과를 변화로 반영하는 형식이다.

Ajax 통신의 필요성

단적으로 말해서 Ajax 통신이 없다면 페이지의 한 부분만 변화시키고 싶어도 항상 서버와 클라이언트사이에는 전체 페이지의 데이터를 주고받아야한다. 이는 중복되는 데이터를 계속주고 받음으로써 대역폭낭비를 야기하고 대역폭 낭비는 곧 금전적 손실과 속도 하향 등 많은 문제를 야기한다.

따라서 Ajax 통신을 사용하여 필요한 부분만 데이터를 주고 받게 함으로써 중복성을 피할 수 있다.

Ajax 통신의 예제

위 사진에서 카테고리를 선택하면 아래의 화면이 부분적으로 빠르게 변화하는 것을 볼 수 있을 것이다. 여기서 Ajax 통신을 사용하고있다. 단순한 카테고리 변화이기 때문에 각 카테고리의 해당 부분만 서버에서 가져오면 되는 것이다.

예시 코드

예시는 많지만 HTTP예제중 하나인  XMLHTTPRequest를 사용해서 작성해보도록 한다.
Ajax의 예시는 다양하게 있으니 검색해서 알아보는게 좋은 것이다.

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();
}

1.open을 하면 해당 URL에 데이터를 요청을 준비한다.
2.send를 통해서 해당 서버에 데이터를 요청합니다.
3.addEventListener에 load이벤트 리스너를 추가하여 데이터가 load되면 해당 함수를 실행합니다.

Ajax통신에는 XML뿐만 아니라 다양한 데이터형식들을 주고받을 수 있습니다.


출처:https://www.edwith.org/boostcourse-web/lecture/16701/