Rev. 2.73

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>

Comments

Got something to add? You can just leave a comment.

  • 한 가지 여쭤볼게 있습니다.
    프로토타입과 스크립트아큘러스로 한 줄 게시판 같은 것을 만들었는데 말입니다.
    삭제 하거나 추가 할 때 하이라잇이나 fade 효과를 준 후에 서버 통신을 하려고 하는데
    이게 끝나는 시점을 알 수가 없어서 기껏 setTime 해서 사용하는데요
    더 좋은 방법이 있을까요?

    reply edit

  • 파이어준 파이어준

    스크립트아큘러스 이펙트의 공통 메서드로 끝나는 시점을 알 수 있는 명령이 습니다. 제가 사용한 코드의 일부를 보여 드리면, 아래와 같습니다.

    new Effect.Highlight('cart', {
    startcolor:'#a92929', endcolor:'#cccccc',
    afterFinish:function(){
    new Effect.Shake(element, {duration:1.0});
    $('msg').innerHTML='<span class=\"bd fred\">Photo Cart is Full<\/span> ';
    }
    })

    reply edit

  • 우와.. 저런 메서드가 있었군요.
    답변 감사합니다.

    reply edit

  • 파이어준 파이어준

    별말씀을요. 또다른 방법으로는 queue:'end' 메서드를 사용하실수도 있습니다. 완벽하진 않지만, 잘만 이용하면 연속된 애니메이션까지 가능합니다.

    reply edit

  • 왜 submit이 없는 폼을 이용하라고 하시나요? input type="submit"버튼을 넣어주고 form에서 onsubmit 이벤트를 이용해서 send()를 호출해도 동일하게 구현할 수 있습니다. ajax는 인터페이스일 뿐입니다. html을 극복 할 수는 없습니다.

    reply edit

  • 파이어준 파이어준

    제 블로그 툴에서는 댓글 표현방식이 xhtml 1.1에서 비표준이 되어버린 iframe을 통해서 이루어지기 때문에 부분 데이터 송/수신을 위해 prototype에서 ajax 업데이트가 이루어지도록 적용하고 공부한 내용을 남긴 것입니다. 뭐, 굳이 ajax로 사용하시라고 강요하지는 않습니다. 자신의 맘에 들게 잘 쓰시면 되지요. 전 이 방식이 매우 맘에듭니다.

    reply edit

  • ajax사용을 반대하는 것이 아니라 submit없는 폼을 사용한 것을 지적한 것입니다. submit 버튼을 이용해서도 ajax로 데이터 송/수신이 가능한데 마치 submit 버튼이 있으면 안되는 것 같이 작성을 하셨습니다. 말씀하신 것 처럼 "강요하는 것이 아니고 나는 이 방식이 맘에 든다"라고 하신다면 더이상 논의할 방법이 없겠지만 더좋은 방법을 잘못된 방법인것 처럼 말씀하시면 ajax를 처음 접하시는 분들께 많은 혼란을 가져올 것입니다.

    reply edit

  • 파이어준 파이어준

    지적해 주셔서 대단히 감사합니다. 저또한 입문하는 과정이라 이 시점에서 버튼을 button으로 지정하는 것과 submit으로 지정하는 것이 어떤 점에서 차이가 있으며, 왜 나쁜 방법 인지도 잘 이해가 되지 않는군요. 참고로 이 실습은 아래의 자료를 토대로 작성된 것입니다.

    http://julian.empiregn.com/2005-11/Easily_upgrade_your_forms_to_AJAX/

    reply edit

  • nohmad nohmad

    submit과 button은 완전히 다른 놈이죠. 동사무소에서 서류를 작성한다고 하면, 서류 작성을 위해 풀을 들거나, 도장에 인주를 묻히는 것은 onclick에 해당하고, 창구에 서류를 제출하는 것이 onsubmit 이죠.

    reply edit

  • 파이어준 파이어준

    그렇군요;; 완벽한 제출을 위해서 필요한 것이군요^^; 감사합니다.

    reply edit

  • smile smile

    where is the submit.php source?

    reply edit

  • 우노 우노

    script.aculo.us 의 ajax.in place editor 사용에 대하여 문의를 합니다.
    텍스트에디트박스 안에 /n (리턴값이) HTML에서 <br>로 상호변화하도록 하고 싶은데, 잘 안되네요.
    서버에서 여러가지 방법으로 값을 되돌려줘도 (서버에서 /n을 br로 변환하면), 한번은 되지만, 다시 이를 클라이언트에서 수정하면, /n 이 중복되는 결과를 보입니다.
    방법이 없을까요?

    reply edit

  • ㅡ.,ㅡ ㅡ.,ㅡ

    to smile //
    <?
    //submit.php
    print_r($_REQUEST);
    ?>

    reply edit

  • 혈무 혈무

    div 영역에만 결과값을 나타내고자 할 경우는 원래 만드신 소스가 맞지 않나요?
    신현석님 조언으로 새로작성하신건 div영역에 나타낸다음 바로 익스가 submit파일을 다시 호출하게 됩니다

    reply edit

  • input 서밋이나 함수의 적절한 곳에 return false;를 넣어주시면 되겠습니다.

    reply edit

  • 웹 접근성이 떨어진다는 말 같습니다.
    첫번째 경우 javascript가 disabled 되면 아무것도 submit 되지 않습니다.
    하지만 두번째 방식은 form기본의 action url과 submit 버튼이 존재 하기 때문에 javascript disabled인경우에도 폼이 제출 됩니다.

    reply edit

Your Reaction Time!

captcha

avatar