목표.
단순하고 간단하고 범용적인 Ajax Framework의 제작.
(JQuery 나 Prototype은 매우 뛰어나나. 용량의 단점이..)
1. CreateAjax 객체 생성.
function Createajax()
{
var request = false;
try
{
// FF, Sapari
request = new XMLHttpRequest();
}
catch (err1)
{
try
{
//IE7
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (err2)
{
try
{
//IE6 이하 버전
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (err3)
{
request =false;
}
}
}
return request;
}
브라우저의 종류 버전에 따라 AJAX 생성하는 법이 다르다.
함수를 FF용 AJAX, IE용 AJAX 이렇게 따로 제작할 수 있으나, CreateAjax 라는 통합 함수를 통해 AJAX 객체를 생성하는 것는 것이 여러모로 편리하다. ( 디자인 패턴에서 퍼사드 패턴이라고 함)
Façade 패턴!?
1. 컨텍스트
Façade 패턴은 복잡한 서브 시스템에 통일된 인터페이스를 제공함으로써 복잡한 API를 단순화 시켜준다. 시스템을 서브 시스템 단위로 나누어 구성하는 것은 시스템의 복잡도를 낮춰주지만, 동시에 서브 시스템 사이에서의 통신 부하와 결합도가 증가하게 된다. 이러한 서브 시스템 사이의 의존도를 낮추고, 서브 시스템의 사용자 입장에서 사용하기 편리한 인터페이스를 제공하고자 하는 것이 façade 객체이다.
Façade 객체는 실생활에서의 고객 서비스 센터와 유사하다. 가령, 어떤 상품을 구매하는 과정에서 문제가 생겼다고 가정할 때, 고객이 문제의 성격에 따라 해당 부서에 직접 연락하는 것이 아니라 고객 서비스 센터를 통하는 것은 Façade 패턴에 대한 좋은 유추 사례가 될 수 있다.
2. 적용 영역
l 복잡한 서브 시스템에 대해 간단한 인터페이스를 제공하기를 원하는 경우
l 클라이언트와 인터페이스의 구현 클래스 사이에 의존도가 높은 경우
l 서브 시스템을 레이어(layer)로 구분하고자 하는 경우
http://www.javaworld.com/javaworld/jw-05-1999/jw-05-cooltools_p.html
Ajax 객체를 만들었다면 이제 콜백함수를 연결하는 부분에 대한 적용이 필요한데.
만약 Page에서 하나의 Ajax객체를 이용해서 요청한다면 아래 처럼 단순히 적용시켜도 될듯하다.
//전역
var myajax = false;
window.onload = function()
{
myajax = Createajax();
}
function 요청()
{
myajax.onreadystatechange = myResponse ;
}
function myResponse //응답처리
하지만 위의 처럼 쓸 경우는 거의 없기 때문에 이와는 다른 처리가 필요하다.
기본틀은 아래와 같다고 생각된다.
1. 사용자의 요청 -> 2. CreateAjax -> 3. Send(응답함수 다르게지정) -> 4. 각 응답함수에서 처리.
위의 코드를 Ajax 인 액션 - 85p에 따라 리팩토링 해보자.
var rAjax = new Object() ; 네임스페이스용 객체
// 속성 지정
rAjax.READY_STATE_UNINITIALIZED = 0 ;
rAjax.READY_STATE_LOADING = 1 ;
rAjax.READY_STATE_LOADED = 2 ;
rAjax.READY_STATE_INTERACTIVE = 3 ;
rAjax.READY_STATE_COMPLETE = 4 ;
// 속성 지정
rAjax.ContentLoader = function(url , onload ,onError)
{
this.url = url;
this.req = null;
this.onload = onload;
this.onerror = (onerror) ? onerror : this.defaultError;
this.loadXMLDoc(url);
}
rAjax.ContentLoader.prototype = {
loadXMLDoc:function(url){
// ajax 객체 생성
// req에 ajax 담는다.
}
if(this.req)
{
try
{
var loader = this;
this.req.onreadystatechange = function(){
loader.onReadyState.call(loader);
this.req.open('GET',url,true);
this.req.send(null);
}
}catch(err)
{
this.onerror.call(this);
}
},
onReadyState:function()
{
var req = this.req;
var ready = req.readyState;
if( ready == net.READY_STATE_COMPLETE)
{
var httpStatus = req.status;
if(httpStatus == 200 || httpStatus == 0 )
{
this.onload.call(this);
}
else
{
this.onerror.call(this);
}
}
},
defaultError:function()
{
alert("error fetching data" + "\n\nreadyState:" + this.req.readyState
+ "\nStatus:" + this.req.status + "\nheader:" + this.req.getAllResponseHeaders());
}
}
위와 같이 하면
Get 방식으로 ContentLoader("요청URL",콜백함수이름)
이런식으로 좀더 다이나믹한 요청을 할 수 있다.
