닉스로그

지금까지는 AJAX 를 부분적으로만 써왔는데

아예 폼의 데이터를 ajax 로 넘길수 있도록 하면 더 편할꺼 같아서 만들어보았다.

form 의 데이터를 post 형태로 ajax 로 자동으로 넘겨주는 소스이다.

[code]// AJAX POST SEND
var ajaxFormProcessing = false;
var ajaxProcessing = false;
var ajaxXmlHttp = null;
var ajaxForm = null;
function ajaxFormAction(form) {
 if (ajaxFormProcessing) {
  alert("현재 처리중입니다.");
  return;
 }
ajaxForm = form;
 ajaxFormProcessing = true;
 var inputObjs = form.getElementsByTagName("input");
 var param = "";
 for(var i=0;i<inputObjs.length;i++) {
  var inputObj = inputObjs[i];
  if (inputObj.name && inputObj.value) {
   if (inputObj.type == "text" || inputObj.type == "hidden" || inputObj.type == "password") {
    param += inputObj.name + "=" + encodeURIComponent(inputObj.value) + "&";
   }
   else if (inputObj.type == "radio" || inputObj.type == "checkbox") {
    if (inputObj.checked)
     param += inputObj.name + "=" + encodeURIComponent(inputObj.value) + "&";
   }
  }
 }
 
 var selectObjs = form.getElementsByTagName("select");
 for(var i=0;i<selectObjs.length;i++) {
  var selectObj = selectObjs[i];
  if (selectObj.name && selectObj.value) {
   param += selectObj.name + "=" + encodeURIComponent(selectObj.value) + "&";
  }
 }
 
 var textAreaObjs = form.getElementsByTagName("textarea");
 for(var i=0;i<textAreaObjs.length;i++) {
  if (textAreaObjs[i].name && textAreaObjs[i].value) {
   param += textAreaObjs[i].name + "=" + encodeURIComponent(textAreaObjs[i].value) + "&";
  }
 }
 param += "1=1";

 ajaxAction(param);
 return false;
}

function ajaxAction(param) {
 if (ajaxProcessing) {
  alert("현재 처리중입니다.");
  return;
 }
 ajaxProcessing = true;
 ajaxXmlHttp = createXMLHttpRequest();
 ajaxXmlHttp.onreadystatechange = function() {
  if (ajaxXmlHttp.readyState == 4) {
   //alert(ajaxXmlHttp.responseText);
   ajaxParseAction(ajaxXmlHttp.responseXML);
  }
 }
 ajaxXmlHttp.open("POST",ajaxForm.action,true);
 ajaxXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 ajaxXmlHttp.setRequestHeader("Content-length", param.length);
 ajaxXmlHttp.setRequestHeader("Connection", "close");
 ajaxXmlHttp.send(param);
}


function ajaxParseAction(xmlObj) {
// 넘어온 xmlObj 로 결과 처리 해 주면 된다.
}[/code]

위 소스를 스크립트에 집어넣어 놨다면 폼에다가는 아래와같이 해주면 알아서 넘어간다.

[code]<form name="formname" action="index.php" onsubmit="return ajaxFormAction(this)">
 
</form>[/code]

이렇게 해서 넘길수 있는데.

이 방법의 단점은 파일은 못 넘긴다는 것이다.