쉽게 이해 하는 AJAX (비동기 자바스크립트)

AJAX (Asynchronous JavaScript And XML)


AJAX는 비동기 자바스크립트 XML이라는 건데, 이게 이해하기가 참 애매했다. 

일단 기본적인 AJAX코드를 가지고 어떤 역할을 하는지 알아보자.

아직 JS에 익숙하지 않으며,
JS는 필요할 때만 공부 하다 보니
잘못 설명 된 부분이 있을 수 있습니다.
이점을 유의 바랍니다.

Basic AJAX Code

도메인 :  “http://localhost/”
AJAX 실행 위치: “/ajax-test/index.php”

<?php
echo $_GET['TXT'];
?>

위와 같은 환경일 때, 아래의 코드를 보자.

var xhttpReq = new XMLHttpRequest();
xhttpReq.open('GET', '?TXT=Hello', false);
xhttpReq.send(null);
console.log(xhttpReq.responseText);

해당 코드는 http://localhost/ajax-test/index.php?echo=Hello를 요청하고 그 결과를 콘솔 창에 출력 해주는 코드이다.

이 코드를 분석해보자.
제일 첫 번째 줄에서 
var xhttpReq = new XMLHttpRequest();
이 XMLHttpRequest를 xhttpReq에 넣는 부분이다. 단순히 XMLHttpRequest 사용을 준비하는 정도로 봐도 무방하다.

두 번째 코드를 보면
xhttpReq.open('GET', '?TXT=Hello', false);
‘GET’ 방식으로 ‘?TXT=Hello’요청해 응답을 받겠다는 뜻이다.

세 번째 줄에선
xhttpReq.send(null);
send()함수를 통해 요청을 전송하는 것이다.
만약, POST로 데이터를 보내고 싶다면 send("TXT=Hello") 이런 식으로 넣어 주면 된다.

그리고 마지막 줄에선
console.log(xhttpReq.responseText);
send로 보낸 요정의 결과를 Text로 출력해준다.

console
> Hello

그냥 보면 비동기라는 점을 느끼지 못할 만큼 다를 게 없다.

맞다. 없다.
두 번째 줄을 다시 한번 보자. 
xhttpReq.open('GET', '?TXT=Hello', false);
open 함수의 false는 비동기적으로 처리하지 않겠다는 것을 의미한다.(동기적 처리)
반대로 true일 경우 비동기적으로 처리하겠다는 의미다.

현재는 FALSE를 사용했으니 동기적으로 처리 되었다.
즉, 서버로부터 응답을 받은 후 나머지 스크립트를 실행 시켰다는 것이다.
하지만, TRUE로 설정해 비동기방식을 선택하여 실행하면,
서버로부터 응답을 받지 않더라도 나머지 스크립트를 실행 한다.

테스트를 해보면,
동기화 방식(false)을 설정하고 실행하면, Hello가 뜨는 걸 볼 수 있지만,
비동기화 방식(true)를 설정하고 실행하면, 아무것도 뜨지 않는다.
    즉, 서버로부터 응답을 받지 않아도 실행 시켰다는 것이다.

참고 사이트
https://developer.mozilla.org/ko/docs/AJAX/Getting_Started

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

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