[Javascript] AJAX 기본 : XMLHttpRequest를 통한 비동기 호출

AJAX는 이제 어느새 한물간듯한 지겨운 단어가 되어버렸지만 그 개념은 여전히 남아있으며, HTML5의 기본 프레임워크 안에 그 개념은 내제되어있다.

이제는 자바스크립트를 이용하는 어떠한 패러다임을 일컫는데 AJAX를 쓰기 보다는 자바스크립트를 말 할때 AJAX라는 말을 쓰지 않아도 기본적으로 비동기라는 개념이 들어가있게 된 것이다.

비동기처리를 하기 위해 AJAX라는 단어가 나오기 이전부터 XMLHttpRequest를 이용해왔고 HTML5로 넘어가는 앞으로도 이 XMLHttpRequest를 통해서 비동기적인 처리가 이루어질것이다.

따라서 굳이 AJAX라고 강조를 하지 않아도 '자바스크립트'라 하면 데이터는 비동기적으로 가져온다고 생각을 하면 된다. (물론 페이지 refresh를 하는 경우 등 비동기적이 아닐수도 있다. )

jQuery의 $.ajax()등과 같은 비동기 호출로 편하게 사용하기도 하지만 그 모든것의 기본은 XMLHttpRequest로부터 나온다고 봐도 된다.

---

* XMLHttpRequest 사용하기

* 주의: IE 7+를 지원하므로 그 이전 버전의 고대 유물은 무시하자. 이미 고인이 된 IE6의 사용자들의 대부분은 비동기가 뭔지도 이해하기 힘들것이다. (고인이 된 IE6: http://ie6funeral.com/)

<script>

    var xhr = new XMLHttpRequest();

    xhr.open("GET" , encodeURI(url) , true);

    xhr.onreadystatechange = function() {

        if(xhr.readyState == 4 && xhr.status == 200)

        {

            alert(xhr.responseText);

        }

    }

    xhr.send();

</script>

: 내용은 직관적이다. xhr.open을 하는 것은 실제로 보내는 부분이 아니라 request를 보내고자하는 사이트의 url을 세팅하는 부분이고, xhr.send를 하게 되면 실제로 보내게 되는 것이다.

: xhr.open(보내는 방식, 주소(URL), 비동기 여부);

- 보내는 방식은 GET, POST등으로 파일을 첨부하거나 할때에는 POST로 해야하며 RESTful 아키텍쳐를 사용하는 경우 다르게 설정해야한다.

- 주소는 말그대로 request를 보내고자하는 주소, encodeURI로 인코딩을 해서 보내는 것이 좋다.

- 비동기 여부는 true이면 비동기적으로, false면 동기적으로 호출을 하여, response가 올때까지 xhr.send()에서 브라우저는 대기하고 있을 것이다.

: xhr.onreadystatechange는 HttpRequest의 상태가 변화 되었을 때 이벤트로 호출되는 함수이다. 

: xhr.readyState상태는 0에서부터 아래에 명시된 것과 같이 상태가 바뀌어감에 따라 호출이 된다.

• 0 : request가 초기화가 안된 상태
• 1 : 서버에 연결이 완료 된 상태
• 2 : 서버가 request를 받은 상태
• 3 : 서버가 request를 처리하고 있는 상태
• 4 : request처리가 끝나고 response가 준비된 상태

: 따라서 xhr.readyState == 4 인 경우 xhr.response를 읽어들여서 읽어온 데이터에 대한 처리를 하면 되는 것이다.

: xhr.response는 순전히 서버쪽의 처리 방법에 달려있으며, json이 될수도 있고, html을 직접 쓸수도 있고, 단순히 개발자가 프로토콜을 정의하여 해당하는 프로토콜에 대한 처리를 클라이언트쪽에서 결정할 수도 있다. 결국 이것을 어떻게 응용하느냐는 전부다 '개발자 맘'

: xhr.status 는 200인 경우 "OK", 404인 경우 Page not found를 의미하며 에러 처리를 하고자 한다면 if를 따로 분리하면 된다.

* 굳이, 꼭 굳이 IE6나 그 이전 버전을 고려하고 싶다면 xhr을 다음과 같이 하면 된다.

var xhr = new ActiveXObject("Microsoft.XMLHttp");

- 하지만 IE6 이용자들에게 보안으로도 기능적으로도 향상된 최신 브라우저를 추천하는게 그들을 위해서도 좋을 것이다. 

끝.