XMLHttpRequest 오브젝트 사용

http://blog.naver.com/jinoxst/140021512014 에 트랙백.

XHR이라 불리는 XMLHttpRequest 객체의 사용에 대한 개괄적인 내용.
아마도 Ajax를 처음 시작하면서 가장 중요한 부분의 내용인 것 같다. ^^

XHR의 객체 생성은 IE와 나머지 브라우져가 방식이 다르기 때문에 '형식화된' 객체 생성 함수가 있다. 이름하여 createXMLHttpRequest().
딱히 수정할 필요 없이 이대로 사용하면 될 듯 하다.

var xmlHttp;

function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

그리고 중요한 함수로는 open, send 와 속성으로 onreadystatechange, readyState, reponseText와 responseXML, status가 있다. Ajax의 작동 구조상 알아야 하는 내용으로 작동 순서는 다음과 같다.

일단 밑의 simpleRequest.html로 들어가 버튼을 누른다면, startRequest()라는 함수가 실행된다. 이 함수는 createXMLHttpRequest()를 실행, XHR 객체를 생성한다.
그런 후 xmlHttp.onreadystatechange에 handleStateChange 콜백함수를 지정하는데 이는 나중에 send함수를 실행 후 돌아올 결과에 따른 처리를 할 함수가 된다. (즉 성공이나 실패, 또는 처리중을 나타내거나 결과를 뿌려주게 하는 내용이 들어가는 실제적인 결과 처리 함수가 된다.)

그 후 open 함수로 GET 또는 POST 로 처리할지, 어느 파일에 요청할지, 동기/비동기로 할지를 정해 send 함수로 요청을 보내게 된다.

그러면 좀 앞에 말했듯이 콜백함수가 작동하며 결과가 오면 콜백함수에서 정의한 내용에 따른 처리를 하게 된다.
(자세한 소스 등은 상단의 jinoxst님의 강의를 참고.)

일단 중요한 점 중 하나가 XHR 객체는 요청가능한 서버 url이 제한되어 있어 같은 도메인에서만 쓸 수 있다는 점이다.
아마 다른 url에서 가져와야 할 경우... 간단히 내 맘대로 생각하기에는 중계해주는 서버스크립트 파일을 만들면 되지 않을까 한다. 너무 단순히만 생각한 것일까? -_-;;

따라해 보면서 만든 소스의 작동하는 링크는 다음과 같다.
이후도 마찬가지겠지만 내 맘대로 조금씩 소스가 수정되어 있다 --;
특히 UTF-8 인코딩을 추가했는데, 내 IE가 UTF-8로된 것을 자꾸 euc-kr로 잡아서 글짜가 깨지는 것이 짜증나서기도 하고 -_-
이후 나올 한글 인코딩 문제를 해결하기 위해서이기도 하다.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

그리고 내 데비안 리눅스 서버는 기본 작동 환경이 euc-kr이다.
따라서 vi + 터미널에서 설정을 이리저리 변경해도 곤란하게 나타나서
아크로에디트(AcroEdit)를 쓰게 되었다.
아래 사이트에서 내려받기가 가능하다. (회원가입 필요없음.)

http://acrosoft.co.kr/

델파이로 작성된 에디터로 무료인데다 강력하고 가볍고 좋아 추천한다. =)
(이것 이전에는 이클립스, 이맥스, 메모장- _- 등 여러 삽질을 했었다;;)
아크로에디트 사용팁에도 나타나 있듯이, 처음 불러왔을 때 유니코드가 깨져 나온다면,
파일->다시읽기를 해주면 깨끗이 나타나게 된다. 아크로에디트 쓰실 분은 참고하시길...

작동하는 예제:
http://tarho.iptime.org/~progh2/ajax/simpleRequest.html
소스:
http://tarho.iptime.org/~progh2/ajax/simpleRequest.html.phps
http://tarho.iptime.org/~progh2/ajax/simpleResponse.xml.phps