AJAX+PROTOTYPE.JS+ASP 기본 패턴 > ajax

이제 AJAX는 많은 개발 패턴과 지원 하는 프레임웍이 많이 나온 상태입니다. 지금까지는 자체 AJax 프레임웍
을 이용한 개발을 진행하여 왔는데 팀내부적으로 prototype.js를 이용하여 보다 고급적이고 객체 지향적인
Ajax개발을 하기로 결정하고 향후 2~3년 후에는 prototype.js가 javascript의 표준으로 자리 매김할지도 모른다
는 말에 함 써봤습니다.

 저는 크게 3가지 JS를 이용하였습니다. prototype_1_5_1.js와 이벤트 처리및 String의 조합 다양한 잡다한 메소
드들을 모아놓은 protoCommon.js, 핵심적인 Ajax처리와 View를 담당하는 process.js로 구성하였습니다.

물론 사내에서 사용하는 js 파일까지 합하면 꽤 되겠죠...

<script language="javascript" type="text/javascript" src="/include/js/prototype_1_5_1.js"></script>
<script language="javascript" type="text/javascript" src="protoCommon.js"></script>
<script language="javascript" type="text/javascript" src="process.js"></script>

오늘의 중심은 Ajax이기 때문에 process.js를 중점적으로 말씀 드릴꼐여~
바로 소스 들어 갑니다..

process.js 의 가장 상단에 이벤트 옵져버를 등록 해줍니다. Event.observe는 prototype.js에 정의된 메소드로
윈도우 load시 다양한 이벤트를 등록해 주는 것을 의미 합니다. 해석을 해보면 "btnNew" 라는 라는 id를 엘레
먼트에서 click 이벤트를 발생하면 objEvent이벤트 클래스의 fnWriteFrmView 메소드를 호출해라!! 라는 것을 의
미합니다.

하나 더 해보면 "btnNew" 라는 id를 엘레먼트에서 click 이벤트를 발생하면 objEvent.fnWriteFrmView 메소드를
발생시켜라! 라는 의미 입니다. 다른것들은 한번씩 해석해 보세요~

 Event.observe(window, "load", function(){
   Event.observe("btnNew","click",objEvent.fnWriteFrmView);
   Event.observe("btnWriteFrmHide","click",objEvent.fnHideWriteFrm);
   Event.observe("btnNewList","click",objCallProc.FnsetContAdd);
   Event.observe("btnSaveList","click",objCallProc.FnsetContSave);
   Event.observe("btnView","click",objCallProc.FnsetCont);
   Event.observe("btnWriteFrm","click",objCallProc.FnsetWriteFrm);

 });

그럼 다음단계는 무었을 해야할까요!! 당연히 선언을 했으면 구현을 해야겠죠~

객체 지향적 Javascript 에서는 관련되는 메소드들을 묶는 클래스가 필요합니다. objCallProc  라는 클래스를
사용하여 매소드들로 구현하였습니다.

 

 //*******************************************
 //Ajax의 보내는 부분 담당
 //Ajax요소 호출 Object
 //*******************************************
 var objCallProc = {

  //메소드1-->
  Fnsetsub:function(){

   var URL ="/lib/json/action.asp";
   new Ajax.Request(URL,{

     method:"post",
     asynchronous: true,

     onSuccess: function(xmlHttp) {
      objView.Fngetsub(xmlHttp);
     },
     onFailure: function(xmlHttp) {
      objMsg.FnAlertMsg(URL + "에러발생");
     }
   });
  },
  FnMethod2:function(){
   //어쩌구 저쩌구
  }

}

위부분이 바로 이벤트를 발생시켰을때 호출되는 구현부 입니다.

prototype.js에서 지원하는 AJAX객체를 이용하여 간단하게 처리 해야할 서버쪽 스크립트의 경로를 호출 하였
습니다. 몃가지 속성들에 대한 설명을 드릴꼐요~~parameter부분도 포함해서 적겠습니다.

method : "get" , "post" --> 전송방식을 설정하는 부분

asynchronous : true, false --> 동기화 설정 유무

parameters:{"intSeq" : intSeq,"conNo" : conNo,"deltype" : type }

--> 전송할 파라미터을 설정하는 부분입니다.

여기서 한가지 Tip!!

개발시에 우리는 Form 을 많이 사용합니다.
prototype.js에서는 다양한 Form 헨들링하는 객체를 지원하는데 그중 한가지를 소개 시켜 드릴께요~~

var parameters = Form.serialize($("폼이름"));

요 렇게 하고 alert(parameters); 해보면 폼값들이 한번에 전송될 파라미터 값으로 쭉 생성이 됩니다. 정말 요긴
한부분이에요. 꼭 한번 이용해 보세요!! 그럼 구지

parameters:{"intSeq" : intSeq,"conNo" : conNo,"deltype" : type }  요 방식처럼 일일이 구현을 해주지 않아도 가
능합니다.

onSuccess: function(xmlHttp) ->Ajax처리후에 정상처리일경우 호출되는 이벤트
onFailure: function(xmlHttp) ->Ajax처리후에 문제 발생시 처리 되는 이벤트

요정도 정리하면 될꺼 같네요. 나머지 속성들은 한번씩 찾아 보세요..^^
이렇게 하면 전송부는 끝난겁니다.

그럼 다음은 서버 처리 부분을 봐야 겟죠?
간단한 서버쪽 ASP 처리 예제 입니다.

/lib/json/action.asp 파일 내용

<%@LANGUAGE="VBSCRIPT" %>
<%

 Response.Expires = -1
 Response.AddHeader "progma","no-cache"
 Response.AddHeader "cache-control","no-store"
 Response.ContentType = "text/html"

 '//post방식의 폼전송시에는 요부분을 UTF-8 과 pagecode 도 변경해주셔야 됩니다.
 Response.CharSet = "euc-kr"

 Dim strSQL,arrRows
 Dim intX
 Dim objConn
 Dim objRs
 Dim arrRows
 Dim strSQL
 Dim strConnection

 strConnection = "DB 연결문.. 이건생략"
 '// db 연결
 Set objConn = Server.CreateObject("Adodb.Connection")
 objConn.Open strConnection

 '// recordset 생성
 Set objRs = Server.CreateObject("Adodb.RecordSet")

 '//추출할 쿼리
 strSQL = "select top 10 name, zipcode from member"

 '// 레코드가 있으면 arrRows 변수에 레코드셋 배열을 담는다.
 If Not objRs.EOF Then arrRows = objRs.GetRows()

 '// 레코드셋 개체 소멸
 objRs.Close
 Set objRs = Nothing

 '// db 연결 개체 소멸
 objConn.Close
 Set objConn = Nothing

 'JSON 타입 데이터 조합
 If IsArray(arrRows) Then
  Response.write "{""menu"":["
  For intX = 0 To UBound(arrRows, 2)

   If intX = lngRecCnt - 1 Then
    Response.write "{""name"":"""& arrRows(0,intX) &""",""zipcode "":"""& arrRows(1,intX) &"""}"
   Else
    Response.write "{""name"":"""& arrRows(0,intX) &""",""zipcode "":"""& arrRows(1,intX) &"""},"

   End If
  Next
  Response.write "]}"
 Else
  '//JSON 데이터 타입으로 반환한다.
  Response.write "{""menu"":["
  Response.write "{""item_code"":""N"",""item_title"":""N""}"
  Response.write "]}"
 End If
%>

저희가 항상 해오던 ASP 코딩 방법과 다른바가 없습니다.
그냥 값 체크해서 DB에서 받아와야할 처리 부분 해서 JSON이라는 자바스크립트 데이터
타입으로 그냥 Response 해준거 밖에 없어요.
그럼 여기서 JSON 타입에 대하여 알아 보겠습니다.

JSON데이타 구조:
{
          “names”: [“microsoft”, “oracle”, “suns”],
          “fields”:[“.net”, “pl-sql”, “java”]
}

JSON은 javascript신택스를 사용한 lightweight 데이타 으로  Ajax가 웹 상에서 뜨기 시작하면서 사용된 것이
다. Ajax라면 xml을 주고 받는 걸로 알고 있지만 왜 JSON이란 포멧을 대신 사용 하는 것일까요?? 궁금...

대략 저의 생각은..Xml데이타가 서버에서 생성되어 클라이언트쪽으로 보내졌다면 그 xml데이타를 이용하기
위해 파싱을 하고 파싱된 데이타를 다시 Object객체로 옮기는 과정이 필요 합니다. 하지만 JSON을 이용함으
로 파싱부분과 xml데이타를 다시 Object객체로 변환 시키는 작업을 할 필요가 없게 되어 속도 면에서 좀더 효
과를 볼수 있지 않을까 생각이 드네요..하지만 정해진 규약이나 표준 성을 본다면 XML 이 보다 데이터 사용하
는데 장점이 있지 않을까 생각이 드네요...제생각입니다. ^^

정상적으로 /lib/json/action.asp 요 경로로 갔을때 데이터형태가 정상페이지로 출력된다면 서버쪽의 처리는
끝난것입니다.

그럼 마지막 으로 Request된 데이터를 브라우져에서 처리 해주는 부분입니다. 전 objView 라는 공용 클래스
로 구현 하였습니다. 소스 보시면 대략 느낌이 오실꺼에여~~^.^

 var objView = {

   //세부 항목 선택 메소드
   Fngetsub:function(xmlHttp){
     var ReJSon = objString.Fngetescape(xmlHttp.responseText);

    //넘어온 타입을 JSON Object 형태로 변환
    var evalData = eval("(" + ReJSon + ")");

   var strHTML="";
    for (var i=0; i<evalData.menu.length;i++)
    {
       var name= evalData.menu[i].name;
       var zipcode = evalData.menu[i].zipcode;
       if (zipcode =="N")
       {
          strHTML += "<li>검색내용이 없습니다.<li>";
          break;
       }
       else{
           strHTML +="<li>"+zipcode+"</li>";
        }
    }
     $("zipcode").innerHTML = strHTML;
   }
}

prototype.js의 사용으로 분명 코딩은 쉬워졌어요. 단점보다는 아직까지는 장점이 많은 것 같습니다. 점점 개발
자가 공부 해야 할게 많아지는 요즘 현실이..그래도 재미는 있네요.. 그럼 모두들 즐프~!!!

출처 : 태오닷넷 신상철님, http://taeyo.net/threadboard/Content.asp?table=Board_Knowhow&seqs=1202