본문 바로가기
프로그래밍/jQuery

jQuery.post(), Ajax HTTP POST 방식 요청

by zoo10 2012. 7. 2.

jQuery.post()

원문 링크 http://api.jquery.com/jQuery.post/

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )Returns : jqXHR

개요 : HTTP POST 방식 요청을 통해 서버로부터 데이터를 받습니다.

  • jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )
  • url 정보를 요청할 URL
  • data 서버로 보낼 data
  • success(data, textStatus, jqXHR) 요청이 성공하면 실행될 콜백 함수
  • dataType 서버에서 반환되는 데이터의 타입. Default: 지능형 추측 (xml, json, script, html)

이 함수의 가장 간단한 사용법은 아래와 같습니다.

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

success 콜백 함수는 응답받은 MIME 타입별로 XML, text 문자열, JSON 객체 등과 같은 데이터가 전달되어 집니다. 또한 응답상태값도 문자열로 넘어옵니다.

jQuery 1.5부터 success 콜백 함수는 "jqXHR" 객체도 받을 수 있게 되었습니다.(jQuery 1.4까지는 XMLHttpRequest 객체를 받았음). 하지만, JSONP 나 크로스도메인(cross-domain)의 GET 요청 시에는 XHR을 사용하지 못합니다. 이러한 경우에서는 (j)XHR 나 textStatus 인자는 success 콜백 함수에서 "undefined"으로 인식됩니다.

대부분 성공 시의 핸들러를 지정하여 사용하게 됩니다.

$.post('ajax/test.html', function(data) {
  $('.result').html(data);
});

위 예제는 HTML을 받아서 처리하고 페이지에 집어넣는 것입니다.

POST 방식은 절대 캐시 데이터를 사용하지 않습니다. 그래서 jQuery.ajaxSetup() 에서 설정한cache 와 ifModified 옵션은 이 방식의 요청에 영향을 주지 않습니다.

The jqXHR Object

jQuery 1.5부터, 모든 jQuery의 Ajax 함수는 XMLHTTPRequest 객체의 상위집합을 반환받을 수 있게 되었습니다. 이것을 jQuery XHR 객체 또는 "jqXHR" 라고 하며, $.get()을 사용하면 반환받을 수 있도록 구성되었습니다. 이런 약속된 인터페이스 구조는, 모든 속성들, 함수들 그리고 약속된 동작들을 포함합니다.(Deferred object 를 참고하세요). 편의성과 지속성을 위해 콜백명을 $.ajax()에서 사용할 수 있고, 여기에서 .error(), .success(), .complete() 함수들을 이용할 수 있습니다. 이런 함수들은 모두 동일한 이름으로 사용할 수 있는 인자들을 반환받아 처리할 수 있습니다.

또한, jQuery 1.5부터 $.get()을 포함하여 체인 형태로 엮어진 여러개의 .success(), .complete(), .error() 들을 단일 요청에 사용할 수 있게 되었고, 요청이 완료된 후에도 이들 콜백을 저정할 수 있습니다. 만일 요청이 이미 완료되었다 하더라도, 다시 불러서 쓸 수 있습니다.

// 요청이 완료된 후에 핸들러를 할당하고,
    //  이 요청에 대한 jqxhr 객체는 기억되어 집니다.
    var jqxhr = $.post("example.php", function() {
      alert("success");
    })
    .success(function() { alert("second success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });

    // 이 부분에서 다른 작업을 수행한 후에도 ...

    // 또 다른 완료에 대한 함수를 적용할 수 있습니다.
    jqxhr.complete(function(){ alert("second complete"); });

Additional Notes: 브라우저 보안 정책에 의거하여 대부분의 "Ajax" 사용 시 same origin policy를 적용받게 됩니다. Ajax 요청은 다른 도메인, 다른 서브도메인, 다른 프로토콜 간에는 성공되지 못합니다. 만일jQuery.get()를 수행하면 error 코드가 넘어오고, .ajaxError() 함수에서 다루지 않는 한 따로 처리되지 않습니다. Alternatively, as of jQuery 1.5 부터는, jqXHR 객체를 가지고 .error() 함수에서 다룰 수도 있습니다. Script 와 JSONP 요청은 same origin policy restrictions 이 적용되지 않습니다.

예 제   test.php 에 요청하지만, 반환 결과는 무시합니다.

$.post("test.php");

 

예 제   데이터를 포함하여 test.php 에 요청합니다.(단, 반환 결과는 무시합니다.)

$.post("test.php", { name: "John", time: "2pm" } );

 

예 제   배열 형태의 데이터를 서버로 보냅니다.(여전히 반환 결과에는 신경쓰지 않습니다.)

$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

 

예 제   폼 데이터를 보냅니다.

$.post("test.php", $("#testform").serialize());

 

예 제   test.php 의 요청 결과를 알림창으로 보여 줍니다.

$.post("test.php", function(data) {
   alert("Data Loaded: " + data);
 });

 

예 제   test.php에 데이터를 보내고 반환된 결과를 알림창으로 보여 줍니다.

$.post("test.php", { name: "John", time: "2pm" },
   function(data) {
     alert("Data Loaded: " + data);
   });

 

예 제   test.php에 데이터를 보내고 반환된 결과를 process() JavaScript 함수로 전달합니다.

$.post("test.php", { name: "John", time: "2pm" },
 function(data) {
   process(data);
 }, 
 "xml"
);

 

예 제   test.php 페이지가 json 형태의 데이터 (<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>)를 반환하면 그 데이터를 디버그를 위한 콘솔에 뿌립니다.

$.post("test.php", { "func": "getNameAndTime" },
 function(data){
   console.log(data.name); // John
   console.log(data.time); //  2pm
 }, "json");

 

예 제  
POST 방식으로 폼 데이터를 전송하고 결과를 div 에 표시합니다.(이 예제는 여기서 작동하지 않습니다.)

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form action="/" id="searchForm">
   <input type="text" name="s" placeholder="Search..." />
   <input type="submit" value="Search" />
  </form>
  <!-- the result of the search will be rendered inside this div -->
  <div id="result"></div>

<script>
  /* attach a submit handler to the form */
  $("#searchForm").submit(function(event) {

    /* stop form from submitting normally */
    event.preventDefault(); 
        
    /* get some values from elements on the page: */
    var $form = $( this ),
        term = $form.find( 'input[name="s"]' ).val(),
        url = $form.attr( 'action' );

    /* Send the data using post and put the results in a div */
    $.post( url, { s: term },
      function( data ) {
          var content = $( data ).find( '#content' );
          $( "#result" ).empty().append( content );
      }
    );
  });
</script>

</body>
</html>

미리보기

아쉽지만 이 예제는 도메인이 달라서 여기서 작동하지 않습니다. 알고 계시죠??

 

jQuery.get() 의 쌍둥이입니다. 단, post()는 캐시된 정보를 절대 사용하지 않는다는 커다란 차이점이 있습니다. 구분해서 잘 사용하시기 바랍니다.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

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

jQuery.extend(), 두개 이상의 객체를 합치기(Merge)  (0) 2012.07.02
jQuery.each(), 일반적인 반복 함수  (2) 2012.07.02
serializeArray(), 폼 요소를 names와 values 배열로 인코딩  (0) 2012.07.02
serialize(), 폼 요소 집합을 인코딩  (2) 2012.07.02
jQuery.param(), Ajax 데이터용 배열이나 객체를 직렬화  (0) 2012.07.02
load(), Ajax로 받은 HTML을 일치하는 요소 안에 추가  (2) 2012.07.02
jQuery.getScript, JavaScript 파일을 로드하고 실행  (2) 2012.07.02
jQuery.getJSON, JSON 데이터를 로드  (4) 2012.07.02

관련글

티스토리툴바