[FrontEnd] Javascript - Ajax 통신

Ajax 통신은 웹에 데이터를 갱신 할 때 웹페이지를 새로고침하지 않고 일부 데이터만 서버로 부터 불러오기 위해 사용된다. 

네이버 같은 사이트에 들어가면

이렇게 메뉴가 있고 메뉴를 누를때마다 내용이 바뀌는 UI를 본적이 있을 것이다. 

Ajax를 사용하지 않으면 누르지도 않은 메뉴를 서버로 부터 불러와야해서 로딩시간이 오래 걸린다.

 

Ajaxs는 Asynchronous JavaScript And XML의 줄인말인데 여기서 XML도 데이터 형식으로 자바스크립트를 이용해서

비동기로 통신을 한다는 뜻이다. 

여기서 일반적으로 Ajax통신을 할떄 XML을 사용 할 수도 있지만, 일반적으로는 JSON형식을 사용한다고한다.이름을 약간 잘못 지은것 같다.

 

비동기식으로 통신을 한다는 것은 서버로 request를 보냈을 때 response를 받을 때까지 기다리지 않는 다는 것이다. 보통 동기식의 방식은 클라이언트가 서버로 request를 보내면 response가 올때까지 기다린다. 즉, response를 받기 전까지는 아무작업도 수행 할 수 없다. 하지만 비동기식으로 데이터를 주고 받게 되면 response를 기다리지 않고 작업을 할 수 있기 때문에 성능이 더 좋다. 하지만 데이터에 대한 처리결과를 보장받아야 하는 작업에는 적절하지 않다.

 

그렇다면 비동기식은 어떻게 response를 처리할까?

바로 콜백함수를 미리 정의를 하는 것이다.

response가 왔을때 수행할 일을 콜백함수에 넣어놓고 알아서 함수가 response도착시 실행되게 한다.

그리고 이는 XMLHttpRequest객체를 사용한다. 이 객체를 만들어서 먼저 콜백함수를 정의해주어야한다. 

그 후 XMLHttpRequest로 서버로 Request를 보내면 된다.

const xhttp = new XMLHttpRequest(); // 먼저 XMLHttpRequest 객체를 만든다.

xhttp.onload = function() {			// 콜백 함수를 정의한다.
  // 서버로 부터 받은 데이터로 구현
}

xhttp.open("GET", "ajax_info.txt");	// Request를 보낸다
xhttp.send();

 

참고로 현대의 브라우저들은 XMLHttpRequest대신 Fetch Api를 쓰는 경우도 있다고 한다. Fetch Api를 사용하면 같은 작업을 더 간단하게 할 수 있다. 

그리고 현대의 브라우저들은 보안의 이유로 웹페이지의 서버와 XMLHttpRequest를 요청하는 서버가 같아야 한다고 한다.

 

또 한 사이트에서 여러번의 Ajax통신을 하도록 구현한다면 다음과 같이 해야한다.

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}

function myFunction1(xhttp) {
  // action goes here
}
function myFunction2(xhttp) {
  // action goes here
}

 

웹 공부 카테고리의 글들은 boostcourse의 웹 프로그래밍(풀스택) 강의를 듣고 관련내용을 구글에 검색해서 공부한 내용을 바탕으로 작성하고 있다.

 

https://www.boostcourse.org/web316/joinLectures/12943

웹 프로그래밍(풀스택)

https://www.w3schools.com/js/js_ajax_intro.asp

AJAX Introduction