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