다른 분들은 어떨지 모르나 UI 개발자인 데꾸벅의 경우는 프로젝트를 할때 마다 느끼는 거지만 어떤 Ajax framework를 쓸지 고민을 많이 하는 편이다. 그냥 규모가 좀 되는곳이라면 jQuery나 prototype을.. 그리고 내부 애플리케이션이라면 extjs를... 혹은 작더라도 struts2를 쓸때는 dojo를... 근데 문제가 되는것은 아주 작은 소규모 프로젝트의 경우는 이러한 ajax framework나 libraries를 사용하기가 좀 그래서 단순 XHR Wrapper를 만들어 사용한다
[데꾸벅이 사용하는 Ajax Wrapper 01]
function createHttp() { try { return new XMLHttpRequest(); } catch (e) { var objectNames = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i = 0; i < objectNames.length; i ++) { try { return new ActiveXObject(objectNames[i]); break; } catch (e) { } } return null; } }
var loading = false; function getResponse(uri,content) { try { loading = true var body = document.body; var oHttp = createHttp(); if(uri.indexOf('?') ==-1) aux = '?'; else aux = '&'; oHttp.open("POST", uri + aux+"time=" + (new Date()).getTime(), false); if(content == undefined) { content = ''; } else { oHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } oHttp.send(content); result = new Array(); if(isSafari || isOpera) { resultNodes = oHttp.responseXML.firstChild.childNodes; for(var i=0; i<resultNodes.length; i++) { if(resultNodes.item(i).firstChild != null) result[resultNodes.item(i).nodeName]=resultNodes.item(i).firstChild.nodeValue; } loading = false delete oHttp; return result; } else if(isIE) { resultNodes = oHttp.responseXML.documentElement.childNodes; result = new Array(); for(var i=0; i<resultNodes.length; i++) { result[resultNodes[i].nodeName] = resultNodes[i].text; } loading = false delete oHttp; return result; } else { loading = false var returnValue = oHttp.responseXML.selectNodes("/response/descendant::*"); delete oHttp; return returnValue; } delete oHttp; } catch(e) { alert("exception"); loading = false var escapeSpace = document.getElementsByName('body'); var iframeElement = document.createElement('div'); document.body.appendChild(iframeElement); iframeElement.innerHTML = '<iframe src="'+uri+'"style="display:none" onload="location.href=location.href"></iframe>';
return false; } }
function requestHttp(uri) { try{ var oHttp = createHttp(); oHttp.open("GET", uri + "&time=" + (new Date()).getTime(), false); oHttp.send(""); if(isSafari || isOpera) { var returnValue = oHttp.responseXML.firstChild.firstChild.nextSibling.firstChild.nodeValue; delete oHttp; return returnValue; } else { var returnValue = oHttp.responseXML.selectSingleNode("/response/error").text; delete oHttp; return returnValue; } } catch (e) { window.status = e.messge; } }
function requestHttpText(uri) { var oHttp = createHttp(); oHttp.open("POST", uri + "&time=" + (new Date()).getTime(), false); oHttp.send(""); var returnValue = oHttp.responseText; delete oHttp; return returnValue; }
function requestHttpXml(uri) { var oHttp = createHttp(); oHttp.open("GET", uri + "&time=" + (new Date()).getTime(), false); oHttp.send(""); var returnValue = oHttp.responseXML; delete oHttp; return returnValue; }
function requestPost(uri, content) { var oHttp = createHttp(); oHttp.open("POST", uri + "&time=" + (new Date()).getTime(), false); oHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); oHttp.send(content+ "&time=" + (new Date()).getTime()); var returnValue = oHttp.responseXML.selectSingleNode("/response/error").text; delete oHttp; return returnValue; }
function requestPostText(uri, content) { var oHttp = createHttp(); oHttp.open("POST", uri + "&time=" + (new Date()).getTime(), false); oHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); oHttp.send(content); var returnValue = oHttp.responseText; delete oHttp; return returnValue; }
function setRequestBody(elementName, elementValue, boundary){ var body = ""; body += "--" + boundary + "\r\n"; body += "Content-Disposition: form-data; name=\"" + elementName + "\"" + "\r\n\r\n"; body += elementValue + "\r\n"; return body; }
[모 프로젝트에서 사용했던 예~ ]
/** * HTTP 혹은 HTTPS 방식의 통신을 제공하는 클래스객체를 생성합니다. * @class EnHttp * */ function EnHttp(){
this.dialBack =""; //컴포넌트와 컨테이너 인증에 사용합니다. this.extraInfo =""; //Url의 추가 정보를 지정합니다. this.host = "127.0.0.1"; //호스트 이름을 지정합니다. this.method = "POST"; //메쏘드(HTTP의 Verb)를 지정합니다. this.optionalHeaders = ""; //HTTP요청의 추가 헤더를 지정합니다. this.password = ""; //패스워드를 지정합니다. this.port = "80"; //포트를 지정합니다. this.postData =""; //POST, PUT 요청에 사용되는 데이터를 지정합니다. this.protocol ="HTTP"; //프로토콜을 지정합니다. this.proxy =""; //프록시가 설정된 환경인 경우, 프록시설정 정보를 지정합니다. this.referer = ""; //HTTP요청의 Referer를 지정합니다. this.responseContents=""; //응답 내용 문자열을 전달합니다. this.responseHeaders =""; //응답헤더 문자열을 전달합니다. this.responseStatusCode =""; //응답상태코드를 문자열로 전달합니다 (예: "404") this.responseStatusText =""; //응답상태를 문자열로 전달합니다.(예: "Not Found") this.ssl = false; //SSL 사용여부를 지정합니다. this.timeout = 0; //HTTP요청의 timeout을 지정합니다. this.urlPath=""; //경로를 지정합니다. this.user =""; //사용자 이름을 지정합니다. this.version =""; //HTTP버전 문자열을 지정합니다. this.url = ""; //전체 URL을 지정 합니다.
W3C에서 제안한 cross-site acess 를 사용하는 대신에 IE8의 XDR(XDomainRequest)와 새로운 cross-site request를 추가하였다고 한다. 이번에 출시된 IE8은 표준을 모두 따른다고 하더니만.... 또다시 IE8용으로 분기를 해줘야 한다.. ㅡ.,ㅡ;
어떤 AJAX Framework를 선택할 것인가.? 넥스트리내 세미나 때문에 자료를 찾다가 괜찮은 사이트를 발견했다. 번역이 매끄럽지 못하고 의역이라 왠지...
올들어 500개 이상의 Ajax Framework이 생겨났다. (2007년 기준) 프레임웍 선택은 프로젝트에 상당히 신중한 작업이다. 개발시간 및 유지보수도 프레임웍선택에 상당히 의존적이기 때문이다.
1. 서버 의존성.
서버 독립적인 프레임웍은 mashing-up 서버 기술을 가능하게 할것이며 소프트웨어 아키텍쳐를 lowly ties하게 만든다. 반면, 서버 의존적인 프레임웍은 생산력을 높이나 프로젝트를 매우 어렵게 만들게 한다.
2. 구조화된 자바스크립트 향상
만일 팀원들이 공통된 개발방법론을 공유하지 않는다면 자바스크립트는 상당히 개발하기 곤란할것이다. 생성된 DOM 객체를 접근하는 방법은 여러가지가 있다. 이것을 프레임웍이 가지고 잇는 on-demand Javascript, 패키징 능력, 향상된 OOP와 같이 정형화할 필요가 있다.
extjs의 경우는 OOP기준으로 작성된 아주 좋은 소스네..
3. 만들어진 컴포넌트의 재사용성
다음 프로젝트에서도 재사용할수 있는지 검토한다.
4.프레임워크의 현재 문서화 레벨
대부분의 프로젝트에서 주위해야 할 문제
이런점에서 본다면 extjs는 킹왕짱이네...
5. 프로젝트에서 필요로 하는것
프로젝트에서 프레임웍을 필요로 하거나 다룰수 있는가 또는 어떤것들은 GUI지향적이고, 다른기능에 중점을 두고 있고 아니면 커뮤니케이션 위주인지를 확인한다.
복잡한 폼을 다루는 금융권 사이트에서는 extjs를 쓰기가 좀 그렇다는 의미..
6. 최신버전이 얼마나 오래된 것인가?
대부분 프로젝트는 자사소유이다. 프레임웍의 발전은 프로젝트를 발전시키고 유지보수하는 능력에 달려있다. 좋은 커뮤니티 사용자는 더 기능적인것을 필요로하는 개발자와 얘기하는것 만큼 중요하다. 스폰서의 조심성과 현재 제품웹사이트에서 사용하는 프레임웍은 수년을 지속되거나 단지 6개월만에 끝나는지를 추정할수 있는 좋은 시작이다.
extjs의 경우는 다른 ajax framework에 비해 상당히 활발하고 자주 업데이트 되고 버전 호환성도 상당히 뛰어나다.
7. 어떤종류를 지원하는가?
커뮤니티 지원, 상업적 지원, 테스트하는동안 테스트반응(?)이 있는가?
jsUnit으로 테스트주도개발을 할수도 있고.. 여기서 말하는 테스트는 해당 프레임웍에 대한 지원을 말하는것 같다.