AJAX 간단 클래스

invalid-file

 

간단하게나마 만들어본 ajax 간단 클래스입니다.

사용법)

//클래스 생성

var AjaxClass = new AjaxCls();

// xml을 받아올 페이지 설정

AjaxClass.URI = "test.asp";

// 쿼리스트링 등록

AjaxClass.addQuery("v1","value1");

AjaxClass.addQuery("v2","value2");

.....

//현 페이지의 document개체 저장

AjaxClass.pageObject = document;

// 응답이 오면 호출될 핸들러함수 등록

AjaxClass.handlerFunc = function(res) {

//처리 내용....;;

};

//전송방식 설정(기본값은 POST입니다.)

AjaxClass.method = "GET";

// 쿼리 전송

AjaxClass.Send();

그냥 이렇게 쓰면 됩니다.

추가설명//

AjaxCls.ErrMsg에 처리중 발생된 에러메세지가 저장됩니다.

AjaxCls.Send()함수는 처리결과를 t/f로 리턴하므로

if(AjaxCls.Send()) .. 이런식으로 쓰면 되고,

document개체를 저장하는 이유는 다음과 같습니다.

script src="ajax.js"처럼 외부에서 파일을 불러왔을 경우엔

현 페이지의 document개체와 ajax.js에서 실행되는 document개체가 틀립니다.

그래서 결과가 왔을때 실행될 핸들러함수에서 쓸 페이지 객체를 저장해 두는 것이고

(C로 말하자면 포인터만 저장해두는게 됩니다. 자바에선 레퍼런스죠.)

핸들러 함수는 AjaxCls.handlerFunc = function(res){...}; 처럼 쓰면 됩니다만

길어서 보기 싫다면 따로 빼서,

AjaxCls.handlerFunc = myHandler();

function myHandler() {

    return function(res) {

    //res는 httpRequest개체입니다.

    //결과로 받은 텍스트는 res.responseText로, XML객체는 res.responseXML로 받으면 됩니다.

   };

}

이런식으로 따로 빼도 됩니다.

그리고 클래스 내부적으로 handlerFunc가 호출되는때는,

readyState가 4일경우(결과 돌아옴)에 HTTP 상태가 200일경우(정상처리됨)에만 호출됩니다.

4일경우엔 HTTP에러가 ErrMsg에 저장되지만

readyState가 4가 아닐 경우엔 그냥 종료됩니다.

원하시는 처리가 있으면 클래스 js를 수정해서 쓰시면 되겠습니다.

(클래스 내의 StateChange()에서 처리를 합니다.)

그리고 브라우저에 따른 XMLHttp객체 생성 부분은 생성자 부분에 있습니다.

추가는 그쪽에 하시면 됩니다.

마지막으로 한가지 더 덧붙이자면,

전송 방식(POST, GET)에 대해서...

보통 설명하는것에서의 구별은 주소 뒤에 붙는게 GET, 안붙는게 POST라고 설명들을 합니다만,

ajax같은 경우는 브라우저 내부적으로 처리가 되기 때문에 겉으로 구별할수는 없습니다,

하지만 GET보다 POST가 전송할수 있는 데이터량이 더 많고(라고 알고있는데 맞나...?)

암튼 세부적인 사항이 틀리므로 구별해서 쓰시길 바라며,

asp에서는 Request.QueryString=GET, Request.form=POST,

php에서는 $_GET[], $_POST[],

jsp(서블릿)에서는 doPost(), doGet()처럼 POST/GET일때의 처리가 나뉘어져 있으니

각자 알아서 처리를 하면 되겠습니다.

물론..request(), $변수명, doService()처럼 구분안하고 받는 방법도 있습니다만...-_-