prototype을 이용한 Ajax 멀티 request

// 결과를 보여줄 영역을 동적 생성
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;
}

<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>