AJAX의 특성은 다음과 같습니다.
- 페이지가 로드된 후에도 데이터를 서버로부터 읽어들일 수 있습니다.
- 페이지를 리로딩하지 않고도 해당 웹 페이지를 업데이트 할 수 있습니다.
- 웹서버로 데이터를 백그라운드를 통해 보낼 수 있습니다.
AJAX란 그럼 무엇일까요?
Asynchronous Javascript Anx XML의 약자로, 비동기적인 자바스크립트와 XML이란 뜻입니다.
이는 프로그래밍 언어가 아니라, 단순히 브라우저 안에 빌트인(Built-in)되있는 XMLHttpRequest라는 객체와, JavaScript + HTML DOM의 조합입니다.
자바스크립트와 HTML DOM의 경우는 전에도 계속 다뤘듯, HTML의 각 ELEMENT에 접근해 생성, 수정, 삭제 등등을 할 수 있으며, 이는 유저에게 데이터를 보여주거나 데이터를 사용하는 부분입니다.
XMLHttpRequest는 웹서버로부터 데이터를 요청하기 위해 사용됩니다.
따라서, 정리하면
XMLHttpRequest를 통해 웹서버에게 데이터 전송을 요청하고,
전송받은 데이터를 JS + HTML DOM을 통해 데이터를 사용함과 동시에 유저에게 보여줍니다.
AJAX자체는 잘못된 이름인데, 이 AJAX를 XML을 이용해 데이터를 전송할 수도 있겠지만, 지금은 일반 텍스트나 JSON 텍스트를 전송하는데 쓰이므로, 엄연히 말하면 AJAJ(Asynchrorous JavaScript And JSON)이 맞겠네요. 물론 어감은 전자가 훨씬 멋지게 들리지만 말이죠.
AJAX는 백그라운드에서 웹페이지가 비동기적으로 웹서버와 데이터를 교환한 뒤, 업데이트 될 수 있도록 해줍니다. 이것은 전체 페이지를 리로딩 하지 않고도, 웹페이지의 특정 부분을 업데이트 할 수 있다는 얘기가 됩니다.
출처 : https://www.w3schools.com/js/js_ajax_intro.asp
AJAX 동작 순서는 다음와 같습니다.
1. 웹 페이지에서 이벤트가 발생합니다. (예를 들어, 데이터를 읽어오는 버튼이 클릭됨)
2. XMLHttpRequest(줄여서 XHR이라고 부르겠습니다.) 객체가 JS에 의해 생성됩니다.
3. XHR 객체는 웹 서버에게 데이터에 대한 요청을 보냅니다.
4. 서버는 요청을 처리합니다. (XHR 객체가 나에게 데이터를 보내달라 요청했군)
5. 서버는 요청을 다시 웹페이지에게 돌려줍니다. (여기 알겠다는 OK 표시와 데이터야)
6. JS에 의해 이 요청이 읽혀집니다.
7. JS에 의해 적절한 액션이 수행됩니다. (페이지 업데이트 같은)
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<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>w3school.com에 올라온 코드는 다음과 같은데,
여기서 status == 200은, OK가 됩니다. 404의 경우 Page Not Found, 304의 경우 Not Modified 등등 다양한 숫자에 맞는 결과값이 있는데 200은 OK라고 알아두시면 됩니다.
