prototype을 이용한 Ajax 멀티 request

prototype을 이용해 비동기 방식의 요청을 여러건 해서 순서 상관없이 응답을 받아 처리하는 부분을 구현해 봤다. 

원래 목적은 fund 정보를 웹에서 관리하기 위해 만들려 한것인데...
미완성 프로젝트다..
엑셀에선 간단하던 수식들을 웹으로 옮기려니 만만치 않더라 ㅡㅡ;

소스에는 포함된 내용들은 아래와 같다.
   - Prototype Javascript Lib 사용
   - Javascript Calendar Javascript Lib 사용(한국어 처리 부분 소스 약간 수정)
   - 멀티 Ajax 요청 처리
   - 요청 처리중일때 모래 시계 보여주기
   - Msg 출력을 동적으로
   - select Object에 요청 받은 내용 동적으로 append

common.js

// 결과를 보여줄 영역을 동적 생성
function getMsgElement()
{
    var id = 'result';
    var element = $(id);

      if ( !element || Object.isUndefined(element) )
      {
          element=document.createElement('DIV');
          element.setAttribute('ID', id);
          document.body.appendChild(element);
      }

      return element;
};


// 에러 메시지 출력
function writeErrorMsg(msg)
{
    var eResult = getMsgElement();
      var eError = document.createElement('div');
      eError.className='error';

      eResult.appendChild(eError);
     Element.insert(eError, Object.toHTML(msg + '<br/>'));
};

// 일반 메시지 출력
function writeMsg(msg)
{
      var eResult = getMsgElement();

    Element.insert(eResult, Object.toHTML(msg + '<br/>'));
};

// 처리중 모래시계를 element 앞에 삽입
function beginWaiting(element)
{
    var elementImage;
    var next = element;
    var id = element.id + 'WaitingImage';
    element = $(id);
   
    if ( !element || Object.isUndefined(element) )
    {
         element = document.createElement('IMG');
        element.setAttribute('id', id);
        element.setAttribute('src', '../images/waiting.gif');
        
        next.parentNode.insertBefore(element, next);
    }
};

// 처리중 모래시계를 지운다.
function endWaiting(element)
{
    var parent = element.parentNode;
    var id = element.id + 'WaitingImage';
    element = $(id);
   
    if ( !element || Object.isUndefined(element) )    return;
   
    parent.removeChild(element);
};


// select에 OPTION 태그를 추가한다.
function addOption(parent, value, text)
{
    var element = document.createElement('OPTION');
    element.value = value;
    element.text = text;

    if ( !parent || Object.isUndefined(parent) ) return;

    try {
        parent.add(element, null);        // from standard
    } catch(ex) {
        parent.add(element);            // from IE
    }
}

// option용 데이타를 서버 요청(prototype ajax class)
var FillOptions = Class.create();
FillOptions.prototype = {
    initialize: function(url, field, key) {
        this.url = url;
        this.field = field;
        this.key = key;
        this.tryReq = false;
    },
    addOption: function(value, text) {
        addOption( $(this.field), value, text );
    },
    beginWaiting: function() {
        this.tryReq = true;
        beginWaiting($(this.field));
    },
    endWaiting: function() {
        this.tryReq = false;
        endWaiting($(this.field));
    },
    run: function() {
        if ( $(this.field).firstChild ) return;

        if ( this.tryReq == true )
        {
            writeErrorMsg('승질은!, 요청 중.. 잠시만 기둘리삼');
            return;
        }
        this.beginWaiting();

        new Ajax.Request(this.url,
            {
                method:'post',
                parameters: { field:this.field, key:this.key },
                onSuccess:this.onSucc.bind(this),
                onFailure:this.onFail.bind(this)
            }
        );
    },
    onSucc: function(transport) {
          var response = transport.responseText || '';
          var list = response.split('\n');                 // record separator
          if ( list[0] == 'OK' )
          {
              // callback function 'beforeOption' check
              if ( Object.isFunction(parent.beforeOption) )
              {
                  beforeOption($(this.field));
              }

            for(i=1; i<list.length; i++)
            {
                var record = list[i].split('\t');        // field separator
                this.addOption(record[0], record[1]);
            }

              // callback function 'afterOption' check
              if ( Object.isFunction(parent.afterOption) )
              {
                  afterOption($(this.field));
              }

          } else {
            writeErrorMsg(response);
          }
          this.endWaiting();
    },
    onFail: function() {
        writeErrorMsg('요청 실패!');
        this.endWaiting();
    }
};

//오늘 날짜를 리턴 한다.
function getDate()
{
    var szResult;
    var today=new Date();
   
    szResult = today.getFullYear() + "-";
   
    if ( today.getMonth() < 10 )    szResult += "0" + (today.getMonth() + 1);
    else                            szResult += (today.getMonth() + 1);
       
    szResult += "-";
       
    if ( today.getDate() < 10 )    szResult += "0" + today.getDate();
    else                        szResult += today.getDate();
       
    return szResult;
}

list.html

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>목록</title>
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="http://newtype.pe.kr/jscalendar-1.0/skins/aqua/theme.css" title="Aqua" />
<script  type="text/javascript" src="../js/prototype.js">
/*http://prototypejs.org/*/
</script>
<script type="text/javascript" src="../js/jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="../js/jscalendar-1.0/lang/calendar-ko-utf8.js"></script>
<script type="text/javascript" src="../js/jscalendar-1.0/calendar-setup.js"></script>

<script type="text/javascript" src="./common.js"></script>
<script language="javascript">

    var isTry = false;
    var cName = new FillOptions('./fund_list.php', 'name', 'seq');
    var cScope = new FillOptions('./fund_list.php', 'scope', 'scope');
    var cType = new FillOptions('./fund_list.php', 'type', 'type');
    var cCompany = new FillOptions('./fund_list.php', 'company', 'company');

    function beforeOption(oSel)
    {
        addOption(oSel, "All", "모두" );
    }

    function init()
    {
        cName.run();
        cScope.run();
        cType.run();
        cCompany.run();
       
        $('startDate').value = '2005-01-01';
        $('endDate').value = getDate();
    }

    function doRequest()
    {
        var element = $('timer');
       
        if ( isTry == true )
        {
            writeErrorMsg("승질은!, 요청중.. 잠시만 기둘리삼");
            return;
        }

        isTry = true;
        beginWaiting(element);

        new Ajax.Request('./process.php',
            {
                method:'post',
                parameters: { fundpk:    $F("name"),
                              scope:     $F("scope"),
                              type:      $F("type"),
                              company:   $F("company"),
                              startDate: $F("startDate"),
                              endDate:   $F("endDate")
                },
                onSuccess: function(transport){
                  var response = transport.responseText || "";
                  if ( response != "" )
                  {
                    Element.insert( $("data"), Object.toHTML(response) );

                  } else {

                    writeErrorMsg("요청 결과가 없습니다");
                  }
                  endWaiting(element);
                  isTry = false;
                },
                onFailure: function(){
                    writeErrorMsg("Something went wrong...");
                    endWaiting( $("stateRequest"));
                    isTry = false;
                }
            }
        );
    }


</script>
</head>

<body onLoad="init();">
<TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
<TR height=10><TD></TD></TR>
<TR valign=top><TD align=left>
    <TABLE>
        <TR>
            <TD>펀드명</TD>
            <TD><SELECT name="name" id="name"></SELECT>
        </TR>
        <TR>
            <TD>펀드 구분</TD>
            <TD><SELECT name="scope" id="scope"></SELECT></TD>
        </TR>
        <TR>
            <TD>납입 방법</TD>
            <TD><SELECT name="type" id="type"></SELECT></TD>
        </TR>
        <TR>
            <TD>운용사</TD>
            <TD><SELECT name="company" id="company"></SELECT></TD>
        </TR>
        <TR>
            <TD>조회 시작일</TD>
            <TD>
                <input type="text" name="startDate" id="startDate" size="12">
            </TD>
        </TR>
        <TR>
            <TD>조회 종료일</TD>
            <TD>
                <input type="text" name="endDate" id="endDate" size="12">
            </TD>
        </TR>
        <TR>
            <TD align=right><span id=timer></span></TD>
            <TD>
                <input type="submit" value="조회" onClick="doRequest()">
                <input type="button" value="입력" onClick="location.href='./in_trade.html'">
            </TD>
        </TR>
    </TABLE>
    <span id="data"></span>
</TD></TR>
</TABLE>
<script type="text/javascript">
    Calendar.setup({
        inputField     :    "startDate",
        ifFormat       :    "%Y-%m-%d",
        showsTime      :    false
    });
    Calendar.setup({
        inputField     :    "endDate",
        ifFormat       :    "%Y-%m-%d",
        showsTime      :    false
    });
</script>

</body>
</html>

url
http://www.panghosting.net/~newtype/fund/list.html