ajax form 전송

Form을 이용하여 서버에 자료전송할 때 Ajax를 통해서 필요한 자료만 서버에 보내세요. 빠르고 다이네믹한 웹을 구현해 줄 것입니다. 이 곳에는 프로토타입 자바스크립트 라이브러리(Prototype JavaScript Library를 사용하여 서버에 자료를 전달하고 응답된 자료를 업데이트거나 요청하는 것을 다룰것 입니다.

* Ajax.Request: 자료를 서버에 보내고 응답에 따른 로컬 자바스크립트를 변형한다.
* Ajax.Updater: 자료를 서버에 보내고 지정한 DIV에 있는 응답을 표시한다.

Ajax.Updater 또는 Ajax.Request를 사용하기 위해서는 prototype.js를 해더에서 아래와같이 로드해야 한다.

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

다음으로, 간단한 html모양을 만든다. submit 타입이 아닌 버튼을 넣어야 하고, onclick 이벤트 핸들러를 function send() 자바스크립트로 지정한다.

<div id="updateDiv">
<form id="commentsForm">
<input name="name" type="text"><br>
<textarea name="comment" cols="20" rows="3"></textarea><br>
<input name="sendbutton" type="button" value="Send" onclick="send();">
</form>
</div>

자, 이제 마술을 걸어 봅시다. send() 자바스크립트 함수는 서버에 form 정보를 전달하기 위해서 name 또는 value 등을 를 합산해야 할 필요가 있다. 우리는 이것의 전송을 위해 일일히 만들어 줄 수도 있다. 하지만 프로토타입에는 수작업을 줄여주는 Form.serialize 명령과 $를 사용하는 매개변수를 사용하여 매우 간단하게 한다. 

<script type="text/javascript">
function send(){
var params = Form.serialize($('commentsForm'));
new Ajax.Updater('updateDiv', 'submit.php', {asynchronous:true, parameters:params});
}
</script>

Ajax.Updater 명령의 사용법을 살펴보자. updateDiv는 서버에서 돌려보내지는 자료를 업데이트할 엘리먼트 영역이다. submit.php는 서버측의 전송요청을 처리하는 파일이름이다. 그리고 매개변수를 지정한다. 메서드의 사용방법은 script.aculo.us의 ajax.updater,ajax.request위키를 참조하자. 폼의 메서드는 기본으로 'post'로 잡혀 있으며 method:'get'을 추가함으로 get방식으로 변경할 수 있다. onLoading과 onComplete 옵션을 사용하여 작동상태에 따른 액션을 지정할 수 있으며, evalScripts 옵션을 사용하면 서버의 응답을 자바스크립트형태로 수신할 수 있게 한다.

ajax.request의 사용방법은 업데이트할 엘리먼트를 지정하지 않는 것 외에 이와 크게 다르지 않다.

덧. 수신되는 데이터는 HTML해더가 제거된 일반 HTML형식이거나 텍스트 또는 XML형식이면 됩니다.
덧. 위에서 사용한 form은 접근성을 떨어뜨린다는 신현석님의 조언으로 아래와 같은 폼으로 작성해 보았습니다. 지적 감사드립니다.

<div id="updateDiv">
<form id="commentsForm" name="commentsForm" action="submit.php" onsubmit="return send(this, 'updateDiv')">
<input name="name" type="text" />
<textarea name="comment" cols="20" rows="3"></textarea>
<input name="sendbutton" type="submit" value="Send" />
</form>
</div>

<script type="text/javascript">
function send(form, element){
var params = Form.serialize($(commentsForm));
new Ajax.Updater(element, 'submit.php', {asynchronous:true, parameters:params});
}
</script>

2008.08.29