'javascript'에 해당되는 글 1건
- 2008/05/15 AJAX OR 맵핑 및 유틸리티.
AJAX를 많이 사용을 하기때문에 일일이 코드를 작성하는 귀차니즘이 발생해서
최대한 JAVA 처럼 사용하게끔 좋은 유틸리티를 소개하고자 한다.
JSON 등 이미 만들어진 유틸이 있지만 내스타일이 아니어서 ^^;
그나마 맘에드는게 YAHOO 의 YUI ??
머 아직 시간도 있는데다 급한것도 아니어서 내스타일대로 만드는것도 나쁠거없으니 하고
만들었다.
물론 오늘 만든 따끈한 소스이다.
거의 모든 페이지가 AJAX로 돌아가기때문에 코딩의 간소하겸 XML 데이터를 쉽게 가져오고
편리하게 사용하기 위해서 만들었다.
추가되었으면 좋겠다는 기능이나. 개선점을 알려주면 수정 보완 하겠습니다.
먼저 XML 데이터
/duronex/xml/data.xml 이 존재한다고 가정한다.
해당 xml의 내용은 아래와 같다.
주의 할점은 해당 값 사이에 값이 없더라도 CDATA를 해줘야한다.
NULL 처리를 안해서 .. ^^;;
---------------------------------------------------------------------------------
data.xml : ajax에 사용될 data
---------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?><root>
<RoomLists>
<test1><![CDATA[1_1]]></test1>
<test2><![CDATA[1_2]]></test2>
<test3><![CDATA[1_3]]></test3>
</RoomLists>
<RoomLists>
<test1><![CDATA[2_1]]></test1>
<test2><![CDATA[2_2]]></test2>
<test3><![CDATA[2_3]]></test3>
</RoomLists>
</root>
---------------------------------------------------------------------------------
소스를 보면 알다시피 startAjax 함수에서 handlerFunction은 성공했을때 핸들링할 함수
errorFunction은 실패했을때 핸들링 하는 함수명이다.
getAjaxList함수는 특정 XML에 대한 데이터를 가져올때 사용되는데
List형이 아닌것도 그냥 귀찮아서 ㅡㅡ;;
1개만있을때도 배열로 반환해주니깐 arr[0] 으로 map으로 받아서 사용하자 ^^;
getAjaxList 함수에서 formBeanObj는 xml데이터의 Loop될 노드 네이밍 안의 노드네임이다.
xDomLoopNodeName 는 Loop될 즉 반복되는 노드명이다.
---------------------------------------------------------------------------------
Ajax.js : Ajax 유틸이다
---------------------------------------------------------------------------------
function startAjax(uri, query, handlerFunction, errorFunction){
var contentType = "application/x-www-form-urlencoded; charset=UTF-8";
if (errorFunction==null) errorFunction = function () {};
if (r)
{
r.onreadystatechange = function(){
//alert(r.readyState);
if (r.readyState == 4){
//alert(r.status);
if (r.status == 200){
xmlDoc = r.responseXML;
//alert(xmlDoc);
txt = r.responseText;
handlerFunction(txt, xmlDoc);
//handlerFunction(txt, r);
}
else{
errorFunction();
}
}
}
r.open("POST", uri, true);
r.setRequestHeader("Content-Type", contentType);
r.send(query);
return true;
}
else
{
errorFunction();
return false;
}
}
var lst = new Array();
var loopObj = xDom.getElementsByTagName(xDomLoopNodeName)
//xDom loop
for(var i=0; i<loopObj.length; i++){
var map = new Map();
//form bean loop
for(var j=0; j<formBeanObj.length; j++){
map.put(formBeanObj[j], loopObj[i].getElementsByTagName(formBeanObj[j])[0].childNodes[0].nodeValue);
}
lst[lst.length] = map
}
return lst
}
function Map(){
this.pointer = 0;
for(var i=0; i< this._array.length; i++){
if(key == this._array[i][0])
{
return i;
}
}
return -1;
}
this.put = function(key,value){
var index = this._getIndexByKey(key)
var newArray = new Array();
newArray[0] = key;
newArray[1] = value;
this._array[this._array.length] = newArray;
}
else{
this._array[index][1] = value;
}
}
for(var i=0; i < this._array.length; i++){
if(this._array[i][0] == key)
return this._array[i][1];
}
}
var result;
if(this._array.length > this.pointer){
result = true;
}
else{
result = false;
}
this.pointer++;
}
return this._array.length;
}
return this._array[this.pointer -1][0];
}
return this._array[this.pointer -1][1];
}
}
---------------------------------------------------------------------------------
formBean.js : OR 맵핑할 폼빈
---------------------------------------------------------------------------------
function getTestFB(){
var arr = new Array("test1","test2","test3");
return arr;
}
---------------------------------------------------------------------------------
xml 데이터가 반복되는 노드명이 RoomLists으로 두번돈다.
lst 가 반환되는 값은 Array 이며 그안의 값은 Map 형태로 되어있다
- 물론 실질적으로 배열아에 또 다른 배열이 있는것이지만-
또한 파라미터에 대한 노가다 작업또한
http://duronex.tistory.com/5 여기에 작성된 함수를 이용해서 자동으로 가져 올수있다.
---------------------------------------------------------------------------------
test.html : ajax 사용예
---------------------------------------------------------------------------------
<script language="javascript" src="/duronex/js/Ajax.js"></script>
<script language="javascript" src="/duronex/js/formBean.js"></script>
<script language="javascript">
function getXmlData(){
var params = "파라미터들.";
var url = "/duronex/xml/data.xml";
startAjax(url, params, testSucc, testErr);
}
function testSucc(txt, xDom){
var duronexFB = getTestFB();
var lst = getAjaxList(duronexFB, xDom, "RoomLists");
alert(lst[1].get("test1"));
}
function testErr(){
alert("error");
}
</script>
잘못된 부분이 있으면 덧글을 남겨주세요.^^
Prev
Rss Feed