AJAX를 통해 보는 동기 방식과 비동기 방식의 이해

AJAX를 통해 보는 동기 방식과 비동기 방식의 이해


이전 글 에선 비동기 방식에 대한 자세한 설명을 하지 않았다.
이해가 힘들기도 하고 단지 AJAX가 어떻게 동작하는 지에 대한 간단한 개념 만을 설명 했기 때문이다.
이번 글에선 비동기 방식에 대해서 좀 더 자세히 알아보자. 

AJXA예제 설명

이해를 쉽게 하기 위해 w3schoos.com에 있는 AJAX 예제를 사용하겠다.
이 예제에 대한 코드 설명을 하면,

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
</script>

</body>
</html>

Change Content 버튼을 누르면
loadDoc함수가 작동하는 코드이다.

loadDoc함수는 xhttp에 XMLHttpRequest()함수를 넣고
xhttp.onreadystatechange를 통해 xhttp의 readyState를 계속 감시한다.

readyState는

  • 0 (uninitialized)
  • 1 (loading)
  • 2 (loaded)
  • 3 (interactive)
  • 4 (complete)

로 구성 되어 있으며 onreadystatechange는 readyState가 4가 될 때까지 지속적으로 function(){ … }를 실행 시킨다.

 

동기 방식

쉽게 이야기하면, 하나의 함수가 끝나고 반환 값을 받은 뒤 다음 함수를 실행하는 것.
아래 코드는 w3school.com에 있는 AJAX 예제를 살짝 수정 한 것 이다.

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    console.log('> '+xhttp.readyState);      // xhttp.readyState 표시
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", FALSE); // 동기 방식 사용
  xhttp.send();
}
</script>

</body>
</html>

14번째 줄에서 xhttp의 readyState를 콘솔창에 표시해주는 코드와
20번째 줄에 open 함수에서 동기 방식을 사용하기 위해 false로 설정 해주었다.

이렇게 코드를 변경한 뒤 F12를 눌러 console창을 띄우고 “Change Content” 버튼을 누르면
 > 1
 > 4
이렇게 뜰 것이다. xhttp의 readyState가 1(Loading) 이후 바로 4(Complete)가 되었다.
send후 응답 결과를 받은 후 function(){ … }가 실행 됨을 알 수 있다.

즉, 동기 방식은 코드에 쓰여진 대로 “실행하고 마치고 실행하고 마치고”를 반복한다.


비동기 방식

쉽게 이야기하면 함수를 실행 시켜 놓고 다음 함수로 넘어가는 방식이다.

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    console.log('> '+xhttp.readyState);      // xhttp.readyState 표시
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", TRUE); // 비동기 방식 사용
  xhttp.send();
}
</script>

</body>
</html>

14번째 줄에서 xhttp의 readyState를 콘솔창에 표시해주는 코드와
20번째 줄에 open 함수에서 비동기 방식을 사용하기 위해 true로 설정 해주었다.

이렇게 코드를 변경한 뒤 F12를 눌러 console창을 띄우고 “Change Content” 버튼을 누르면
 > 1
 > 2
 > 3

 > 4
이렇게 뜰 것이다. xhttp의 readyState의 모든 상태가 표시 되었다.는 것을 알 수 있다.
send후 응답 결과를 받지 않고 계속해서 function(){ … }를 실행 하고 있음을 알 수 있다.

즉, 비동기 방식은 “실행하고 마치기”전에 다른 함수를 “실행”한다.

그래서 이걸 어따 씀?

가장 직관적으로 격을 수 있는 경우가 있다.

거의 모든 html 구성을 JS로 만들고, 외부의 값들을 불러와 만들 때
일일히 외부의 값이 오기까지 기다리면 웹페이지의 로딩 속도가 굉장히 느려진다.
그럴 때 일단 모든 부분들을 표시해 놓고 비동기 방식으로 외부 값이 오면 그때 그때 그 값을 페이지에 넣는 방식을 사용하면 웹페이지의 로딩이 빨라지게 된다.

참고
https://www.w3schools.com/js/js_ajax_http.asp
https://developer.mozilla.org/ko/docs/AJAX/Getting_Started

글의 문제가 있다면 댓글을 달아 주세요.

This site uses Akismet to reduce spam. Learn how your comment data is processed.