AJAX로 Form데이터 전송 (Post/Get)

<SCRIPT LANGUAGE="JavaScript">

<!--

var request;    // URL 요청에 대한 응답을 받아올 객체

var queryString;  // 폼의 모든 입력컨트롤의 값을 QueryString 형태로 저장

/*  

  요청 객체 생성을 위한 랩퍼 함수 

  

  매개변수:

    regType: HTTP 요청 유형. GET 또는 POST

    url: 서버 프로그램의 URL

    asynch: 동기 또는 비동기 모드 선택

*/

function httpRequest(reqType, url, asynch)

{

  if(window.XMLHttpRequest)    // 모질라 기반 브라우저(네스케이프, 파이어폭스)

  {

    request = new XMLHttpRequest();

  }

  else if(window.ActiveXObject)  // IE 기반 브라우저

  {  

    request = new ActiveXObject("MSXML2.XMLHTTP");  // IE 6 이만

    

    if(!request)

    {

      request = new ActiveXObject("Microsoft.XMLHTTP");  // IE 6 이상      

    }

  }

  if(request)

  {

    initReq(reqType, url, asynch);

  }

  else

  {

    alert("이 브라우저는 Ajax 를 지원하지 않습니다.");

  }

}

/*

  생성된 요청 객체의 초기화

  

  매개변수:

    regType: HTTP 요청 유형. GET 또는 POST

    url: 서버 프로그램의 URL

    asynch: 동기 또는 비동기 모드 선택. true 또는 false

*/

function initReq(reqType, url, asynch)

{

  request.onreadystatechange = handleRespone;  // CallBack 함수 지정  

  if(reqType.toLowerCase() == "post")

  {

    // 전송이 post 방식인 경우

    request.open(reqType, url, asynch);

    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charaset=UTF-8");

    request.send(queryString);

  }

  else

  {

    // 전송이 get 방식인 경우

    request.open(reqType, url + queryString, asynch);

    request.send(null);

  }

}

/*

  Ajax 실행 후 CallBack 함수

*/

function handleRespone()

{

  if(request.readyState == 4)

  {

  // 문서 다운로드가 완료되었는가?

    if(request.status == 200)

    {

    // 문서가 정상적으로 로드되었는가?

      result = request.responseText;

      alert(result); ///* 의미 있는 코드를 넣어두면 되겠지

    }

    else

    {

      alert("해당 URL 에 정상적으로 접근하지 못 했습니다.");

    }

  }

}

/*

  시작 포인트 함수

*/

function sendData()

{

  var url = "http://expert0226.tistory.com/52";

  setQueryString();

  httpRequest("POST", url, true);    ///* GET 으로 전송하고 싶다면 주석 설정

  //httpRequest("GET", url, true);  ///* GET 으로 전송하고 싶다면 주석 해제

}

/*

  폼의 모든 입력컨트롤의 값을 QueryString 형태로 저장

*/

function setQueryString()

{

  queryString = "";

  var frm = document.forms[0];

  var numberElements = frm.elements.length;

  for(var i = 0; i < numberElements; i++)

  {

    input = frm.elements[i];

    if(i < numberElements - 1)

    {

      queryString += input.name + "=" + encodeURIComponent(input.value) + "&";

    }

    else

    {

      queryString += input.name + "=" + encodeURIComponent(input.value);

    }

  }

}

//-->

</SCRIPT>

<TABLE width="100%" height="100%">

<FORM METHOD="POST" ACTION="javascript:void%200;" onSubmit="sendData(); return false;">

<TR height="23px">

  <TD width="140px">이름</TD>

  <TD><INPUT TYPE="text" NAME="txtName" value="여름나라" style="width: 100%;" onFocus="this.select();"></TD>

</TR>

<TR>

  <TD>이야기</TD>

  <TD><INPUT TYPE="text" NAME="txtStory" value="겨울이야기" style="width: 100%;" onFocus="this.select();"></TD>

</TR>

<TR>

  <TD colspan="2" align="center"><INPUT TYPE="submit"></TD>

</TR>

</FORM>

</TABLE>