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