모든 모던한(최신의) 브라우저는 XMLHttpRequest 객체를 지원합니다.
지금부터는 XMLHttpRequest => XHR로 부르겠습니다. 너무 기네요.
XHR 객체는 전 편에도 말씀드렸듯이, 웹 서버와 데이터 교환을 백그라운드에서 비동기적으로 가능하게 해줍니다. 안드로이드에서 AsyncTask클래스 같은 느낌이죠.
비동기적으로 데이터를 주고받음과 동시에 데이터가 도착했을 때, 리로드 하지 않고도 페이지의 일부 파트를 수정할 수 있게 해줍니다.
단순히 XMLHttpRequest를 생성만 할 경우에는
const variable = new XMLHttpRequest(); 처럼 변수에 넣어주면 됩니다.
AJAX의 단점이라고 해야할까요. 아.. 이러면 싶은 부분이 있는데,
모던 브라우저들은 Access Across Domains를 보안적인 이유로 허용하지 않습니다.
이것은, 웹 페이지와 XML 파일이 로드하려고 시도하려면, 같은 서버안에 있어야 합니다.
이 말은, 즉 다른 서버에 있는 XML파일이나 JSON로 된 API파일들을 가져올 때는 AJAX를 쓸 수 없다는 의미인 것 같은데.. 그럼 솔직히 이게 무슨 큰 소용이 있을까 좀 의아한 점이 있는건 사실이네요. 조금 더 알아보긴 해야겠지만.
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();
}이 부분은 AJAX를 구현하는 부분인데, 번호별로 나눠보겠습니다.
1. XHR 객체를 생성합니다.
2.onreadystatechange라는 것을 사용합니다. 이 부분은 readyState 속성값에 변화가 있으면, 불러야할 함수를 정의하는 부분입니다.
3.open은 Request를 구현하는 부분입니다. 매개변수로는 method, url, async, user, password가 있는데, 뒤에 user, password는 따로 명시하지 않는 이상 필요없는 부분인 것 같습니다. 여기서 async부분에 true가 들어가면서, 비동기로 해당 통신이 이뤄질 것이란걸 짐작할 수 있습니다.
4. send를 사용하여 open에서 명시한 request를 서버에 보내게 됩니다.
5. readyState의 경우 속성값이 여러번 변경되는데,
- 0: 요청이 아직 초기화되지 않음
- 1: 서버와 연결이 완료됨
- 2: 요청을 서버가 받음
- 3: 요청에 대한 처리중
- 4: 요청이 완료되었고 응답이 대기중
이렇게 총 5개의 경우를 가지고 있고, 0~4순으로 변경이 됩니다. 그러다보니xhttp.onreadystatechange가 여러번 호출됩니다. 하지만 조건문에 의해readyState가 4, 그리고 잘 리턴되었을때의 번호가200인 경우에만 텍스트를 출력할 수 있게 합니다.
