[AJAX] Form 의 데이타를 POST 로 전송하기(또는 GET 으로 전송하기)

프로그래밍 TIP/AJAX

[AJAX] Form 의 데이타를 POST 로 전송하기(또는 GET 으로 전송하기)

여름나라겨울이야기 2008. 7. 4. 11:42

728x90

AJAX 를 이용해 Form 의 데이타를 POST 로 전송하기 소스이다.

현재 응답해줄 서버가 없기에 ㅡㅡ;

그냥 tistory.com 의 한 페이지를 보여줄 뿐이지만 수정해서 사용한다면 여러모로 유용할 

것이다. 수정이 필요한 부분은 ///* 로 표시해 두었다.

POST 로 보내가 싫다면 GET 으로 전송하기 위해 수정해야 할 곳에 역시 ///* 로 표시해 

두었다.

테스트:

이름
이야기

소스: (아래 부분을 클릭하고 Ctrl + A 를 누르면 깔끔하게 선택 완료)

<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>

'프로그래밍 TIP > AJAX' 카테고리의 다른 글

[AJAX] mms 주소를 AJAX 와 인코딩을 통해 숨기기 (4)	2009.02.16
[AJAX] request 객체의 기억해 둘 속성과 메소드 (0)	2008.07.04
[AJAX ] 웹페이지 소스 보기 (0)	2008.07.03

현재글[AJAX] Form 의 데이타를 POST 로 전송하기(또는 GET 으로 전송하기)

여름나라겨울이야기

@MVC, 뮤클캐스트, It, spring, 자바스크립트, 음악방송, di, Spring MVC, 추상화, Srping, 스프링, mvc, AOP, Spring @MVC, JavaScript, PSA, Servlet, 로엔, 의존성 주입, 털,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

여름나라겨울이야기