신기술 ajax(아약스)

네트워크의 속도가 아무리 빨라져도 새로운 컨텐츠를 보여주기 위해서 웹 페이지 전체가 매번 리로딩되는
것은 사용성과 응답성의 한계로 이어지죠.
그래서 아약스를 사용 함으로 웹 애플리케이션의 비효율성과 동기적인 액션의 단점을 보안하기 위해 나온
신 기술입니다.

www.google.com 의 Gmail 을 써보시면 아약스의 장점을 몸소 느끼실수 있습니다.
대표적으로 네이버나 야후에서 검색박스에 추천검색어를 페이지 리로딩 없이 보여줄 수 있는 기능이라고
생각하시면 됩니다.

웹 사이트를 운영하시는 분들은 앞으로 많이 접하시지 않을까 생각되서 이렇게 스크립틀르 class 화 시켜서 올려보았습니다.


var ajax = {
        XmlHttp: null,
        create: function () {
                try {
                        if (window.XMLHttpRequest) {
                                ajax.XmlHttp = new XMLHttpRequest();
                                // 일부의 모질라 버전을은 readyState property, onreadystate event
                                // 를 지원하지 않으므로. - from xmlextrs
                                if (this.XmlHttp.readyState == null) {
                                        this.XmlHttp.readyState = 1;
                                        this.XmlHttp.addEventListener("load", function () {
                                                this.XmlHttp.readyState = 4;
                                                if (typeof this.XmlHttp.onreadystatechange == "function")
                                                        tmpXmlHtp.onreadystatechange();
                                        }, false);
                                }
                        } else {
                                ajax.XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
                catch (e) {
                        alert("Your browser does not support XmlHttp objects");
                        //throw new Error("Your browser does not support XmlHttp objects");
                }
        }
}

ajax.openXML =  function (method, url, async, uname, pswd) {
        if (ajax.XmlHttp != null) {
                if (uname == undefined) {
                        ajax.XmlHttp.open(method, url, async, uname, pswd);
                } else {
                        ajax.XmlHttp.open(method, url, async);
                }
                ajax.XmlHttp.onreadystatechange = function () {
                        if (ajax.XmlHttp.readyState == 4) {
                                if (ajax.XmlHttp.status == 200) { // 200 은 HTTP에서 성공 i.e) 404 : not found
                                        AJAX.statusSuccessHandler(ajax.XmlHttp.responseXML.xml);
                                } else {
                                        ajax.statusErrorHandler();
                                        alert('Error while loading!');
                                }
                        }
                }
        } else {
                alert ("need to create xmlhttp object");
        }
}

ajax.openText =  function (method, url, async, uname, pswd) {
        if (ajax.XmlHttp != null) {
                if (uname == undefined) {
                        ajax.XmlHttp.open(method, url, async, uname, pswd);
                } else {
                        ajax.XmlHttp.open(method, url, async);
                }
                ajax.XmlHttp.onreadystatechange = function () {
                        if (ajax.XmlHttp.readyState == 4) {
                                if (ajax.XmlHttp.status == 200) { // 200 은 HTTP에서 성공 i.e) 404 : not found
                                        AJAX.statusSuccessHandler(ajax.XmlHttp.responseText);
                                } else {
                                        ajax.statusErrorHandler();
                                        alert('Error while loading!');
                                }
                        }
                }
        } else {
                alert ("need to create xmlhttp object");
        }
}

ajax.send = function (content) {
                if (content == undefined)
                        ajax.XmlHttp.send(null);
                else
                        ajax.XmlHttp.send(content);
}

ajax.setOnReadyStateChange = function (funcname) {
                if (ajax.XmlHttp) {
                        ajax.XmlHttp.onreadystatechange = funcname;
                } else {
                        alert ("need to create xmlhttp object");
                }
}

// status 200 일 때 처리 함수
ajax.statusSuccessHandler = function (data) {
                alert(data);
}

ajax.setStatusSuccessHandler = function (funcname) {
                ajax.statusSuccessHandler = funcname;
}

        // status 200 일 때 기본 처리 함수
        // setStatusSuccessHandler() 로 대체 가능
ajax.statusErrorHandler = function (status) {
                AJAX.rtnText = ajax.XmlHttp.responseText;
}

ajax.setStatusSuccessHandler = function (funcname) {
                ajax.statusSuccessHandler = funcname
}

ajax.setStatusErrorHandler = function (funcname) {
                ajax.statusErrorHandler = funcname
}

ajax.setRequestHeader = function (label, value)
{
        ajax.XmlHttp.setRequestHeader(label, value);
}

// 사용법
//        ajax.create();
//        ajax.openText('GET','jsontest.php', true);
//        ajax.setStatusSuccessHandler(proc);
//        ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//        ajax.send("test=테스트");
//
//        function proc(abc)
//        {
//                document.getElementById('test').innerHTML = abc;
//        }