최근 블로그 리뉴얼을 하면서 코멘트 달기 등을 ajax로 구현하기 위해 여러 웹 문서를 뒤져봤지만 폼의 내용을 xmlhttp를 이용해 POST로 보내는 스크립트가 없더군요. 심지어 올 1월 31일 에 출판된 ajax 관련 서적에서마저도 폼 값을 전송할 때 일일히 xmlhttp.send("data1="+data1.value+"&data2="+data1.value) 처럼 불편하게 처리하고 있는 것에 경악하고 만든 간단한 스크립트입니다.
예제 HTML 파일 안의 스크립트를 사용할 곳에 적절히 삽입하고 해당 폼에 onsubmit="postForm(this,콜백함수 이름);return false;"만을 추가하면 폼의 데이터들을 xmlhttp를 이용해 POST해 줍니다.
또한 text,password 타입의 input이나 select 택에 required="required"를 추가해주면 해당 값이 없을 경우 사용자에게 입력을 지시합니다. (비표준이긴 하지만;;)
수신이 완료되었을 경우의 처리는 콜백함수에서 해 주면 됩니다.
말로 설명하자니 난잡하네요. 간단한 계산 기능을 하는 예제 파일입니다. 나름대로 다양한 예외상황에 대한 결과도 보실 수 있으니 이것저것 해 보세요. 역시 나름대로; 주석도 충실하게 달아두었으니 소스보기를 하시면 쉽게 알 수 있으실 겁니다.
예제보기
서버스크립트 소스 보기


Recently Comments