jQuery - $.ajax()

자바스크립트 AJAX 는 그 과정이 약간 까다로울 수 있는데, 이 역시 제이쿼리가 훨씬 수월하게 해줄 수 있습니다. 그리고 AJAX 는 요청이 다른 도메인이라면 데이터를 정상적으로 받아올 수 없습니다.

다음 형식으로 사용할 수 있습니다.

// url 문자열로 데이터를 요청
$.ajax(url);

// url 과 설정 객체 배열로 요청
$.ajax(url [, options]);

// 설정 객체 배열로 요청
$.ajax({options});

객체 배열에는 다음 표를 사용합니다.

프로퍼티	설 명
url	전송될 URL
Options	서버에서 데이터를 전송하기 위한 설정옵션 $.get(), $.post(), $.getJSON() 기능을 한꺼번에 관리 Options 에는 다음 값으로 설정 url: 전송될 URL type: GET | POST 중 하나   기본값 GET method: GET | POST 중 하나   기본값 GET async: true | false 중 하나   기본값 true. true 이면 비동기. data: 서버에 요청을 보낼 때 파라미터 값   ‘객체 배열’ | ‘문자열’ 중 하나 dataType: 데이터를 받아올 때 데이터의 형식   xml, json, jsonp, script, text, html 중 하나 processData: 요청과 함께 데이터를 쿼리 문자열로 전송할지 여부   true | false 중 하나. 기본값 true   Ex.) key1=val1&key2=val2 인 형식 contentType: 전송 데이터의 Content-type 형식   기본값 application/x-www-form-urlencoded; charset=UTF-8 complete: 응답이 완료되었을 때 실행될 콜백 함수 error: 에러가 발생하면 실행될 콜백 함수   Ex.) function(xhr,status,error){ … } success: 요청이 정상적으로 연결되면 실행될 콜백 함수   Ex.) function(result, status, xhr){ … } timeout: 요청 시간을 제한. 기본값 밀리 초 beforeSend: 요청하기 전에 실행될 콜백 함수 cache: 요청 페이지를 캐시 할지 여부.   true | false 중 하나. 기본값 true username: HTTP 액세스 인증 요청에 사용자 이름을 지정 password: HTTP 액세스 인증 요청에 사용할 암호를 지정 statusCode: 404와 같은 HTTP 코드가 있을 경우.   기본값 : {}

POST 와 GET 요청시 함께 사용할 수 있는 메소드는 .done(), .fail(), .always() 이며 버전 1.5부터 사용할 수 있습니다. 요청이 종료될 때 호출하는 함수입니다.

메소드	설 명
.done()	요청 성공시 실행할 콜백 함수
.fail()	요청 실패시 실행할 콜백 함수
.always()	요청 완료/성공시 실행할 콜백 함수

GET 요청

GET 으로 url 에 요청만 보냅니다.

$.ajax("example.php?name=하보니&age=20&job=IT");

GET 으로 url 과 객체 배열을 이용하여 결과 값을 받아오는 예제입니다.

<script>
$(function(){
 $("button").click(function(){
   $.ajax("test.php?name=하보니", {
     success: function(data){
       $("#user").html(data);
     }
   });
 });
});
</script>

<button>ajax 받아오기</button>
<div id="user"></div>

POST 요청

POST 로 요청하려면 객체 배열을 이용해야 합니다. data 형식에는 'name=하보니&age=20&job=IT' 로 요청하거나 객체 배열 {'name': '하보니', 'age': '20', 'job': 'IT'} 로 데이터를 보낼 수 있습니다.

<script>
$(function(){
 $("button").click(function(){
   $.ajax("test.php", {
     type: 'POST',
     // name=하보니&age=20&job=IT 로 전송해도 동일
     data: {'name': '하보니', 'age': '20', 'job': 'IT'},
     success: function(data){
       $("#user").html(data);
     }
   });
 });
});
</script>

<button>ajax 받아오기</button>
<div id="user"></div>

객체 배열로 POST 로 전송해서 값을 받아옵니다.

$.ajax({
  url: 'test.php', 
  type: 'POST',
  data: 'name=하보니&age=20&job=IT',
  success: function(data){
    $("#user").html(data);
  }
});

Header 추가

제이쿼리에서 헤더를 전송할 수 있는 방법은 의외로 간단합니다. beforeSend 를 이용해 헤더를 추가합니다.

$.ajax('example.php',{
 beforeSend : function(xhr) {
   xhr.setRequestHeader("userid", "habonyphp");
   xhr.setRequestHeader(
     "Content-type","application/x-www-form-urlencoded"
   );
 },
 error: function(xhr, status, error){
   alert(error);
 },
 success : function(data){
   alert(data);
 }
});

.done(), .fail(), .always()

.done(), .fail(), .always() 메소드는 요청이 이미 완료되면 즉시 콜백 함수가 시작됩니다.

$.ajax('test.php')
 .done(function(){
   console.log("요청이 성공하였습니다.");
 })
 .fail(function(){
   console.log("알수없는 에러가 발생하였습니다.");
 })
 .always(function(){
   console.log("응답이 완료하였습니다.");
});