제이쿼리(JQuery) AJAX 요청 문법 정리

제이쿼리 Ajax 메소드

요즘 대부분은 ajax 요청을 보낼때 fetch() 나 axios 라이브러리를 사용하지만, 몇몇 전통이 있는 기업에선 레거시 프로젝트 때문에 jQuery AJAX를 사용하곤 합니다.

그리고 POST와 GET 타입 외에도 PUT과 DELETE도 있는 만큼, PUT과 DELETE를 사용하고 싶다면 다른 라이브러리를 사용하는 것도 고려해보아야 합니다.

$.get()

제이쿼리에서는 Ajax를 이용하여 GET 방식의 HTTP 요청을 구현한 $.get() 메소드를 제공합니다.

URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소입니다. 그리고 HTTP 요청이 성공했을 때  콜백 함수가 실행되게 됩니다.

$.get(URL주소, 콜백함수]); 

// GET 방식으로 서버에 HTTP Request를 보냄.
$.get("/examples/media/request_ajax.php",
    // 서버가 필요한 정보를 같이 보냄.
    {  
       species: "고양이", 
       name: "나비", 
       age: 3, 
    }, 
    // 응답이 오면 호출되는 콜백 함수
    function(data, status) {
        $("#text").html(data + "<br>" + status); // 전송받은 데이터와 전송 성공 여부를 보여줌.
    }
);

$.post()

제이쿼리에서는 Ajax를 이용하여 POST 방식의 HTTP 요청을 구현한 $.post() 메소드를 제공합니다.

$.post(URL주소, 데이터, 콜백함수);

// POST 방식으로 서버에 HTTP Request를 보냄.
$.post("/examples/media/request_ajax.php",
    { 
       name: "홍길동", 
       grade: "A" 
    },              // 서버가 필요한 정보를 같이 보냄.
    function(data, status) {
       $("#text").html(data + "<br>" + status); // 전송받은 데이터와 전송 성공 여부를 보여줌.
    }
);

GET 방식와 POST 방식의 비교

$.ajax()

$.ajax() 메소드는 위에서 배운 제이쿼리 get, post 메소드를 하나로 합친 한방 메소드라고 보면 됩니다. 이 메서드 하나로 다양한 요청을 서버에 보낼 수 있습니다. (type 속성이나 method 속성으로 http 메서드를 지정하여 보낼 수 있습니다)

JAVASCRIPT

$.ajax(URL주소, 옵션)

$.ajax({
    url: "/examples/media/request_ajax.php", // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
    data: { name: "홍길동" },                // HTTP 요청과 함께 서버로 보낼 데이터
    method: "GET",                           // HTTP 요청 방식(GET, POST)
    dataType: "json"                         // 서버에서 보내줄 데이터의 타입
})

    // HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
    .done(function(json) {
    })

    // HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.
    .fail(function(xhr, status, errorThrown) {
    })

    // HTTP 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행됨.
    .always(function(xhr, status) {
    });

$.ajax({
    url: 'http://example.com/api/users/1',
    method: 'DELETE', // delete 요청
    success: function(response) {
        console.log('User deleted successfully!');
    },
    error: function(error) {
        console.error('Error deleting user:', error);
    }
}); 

.load()

load() 메소드는 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 표시하는 일종의 한방 단축 메서드라 보면 된다.

// demo_test.txt 내용을 응답받은 뒤에 id가 list인 요소에 표시함
$("#list").load("/demo_test.txt");

제이쿼리 ajax 다양한 문법

제이쿼리 ajax 메서드를 이용할때 성공, 에러 처리를 위한 굉장히 다양한 문법 방식이 존재합니다. 자신이 편한 것을 골라 사용하면 됩니다.

콜백 방식

심플하게 하나의 응답에 대한 콜백 함수를 실행에 콜백 내부에서 에러나 다양한 처리를 하는 방법입니다.

$.get('url', function(data) {
  console.log(data);
});

프로퍼티 방식

콜백 함수 대신 함수를 포함한 자바스크립트 객체 자체를 인자로 줄수도 있습니다.

$.get('url', {
  success: function(data) {
    console.log(data);
  },
  error: function() {
    console.log('요청이 실패하였습니다.');
  },
  always: function() {
    console.log('요청이 완료되었습니다.'); // always 프로퍼티는 요청이 성공하든 실패하든 항상 실
  }
});

프로미스 방식

프로미스 객체를 통한 메서드 체이닝 문법입니다.

$.get('url')
    .done(function() {
      console.log('요청이 성공하였습니다.');
    })
    .fail(function() {
      console.log('요청이 실패하였습니다.');
    })
    .always(function() {
      console.log('요청이 완료되었습니다.');
 		});

헤더 설정하기

만일 추가적은 http 헤더를 설정하고 요청을 보내야 할 경우 아래와 같이 사용합니다.

$.ajax({
    type: "GET",
    url: "/api/me",
    beforeSend: function (xhr) { // 서버에 요청 보내기전 헤더 설정
        xhr.setRequestHeader("Content-type", "application/json");
				xhr.setRequestHeader("ApiKey", "asdfasxdfasdfasdf"); 
    }
});

동기식으로 처리하기

정리예정입니다

참고 문헌

• http://tcpschool.com/jquery/jq_ajax_httpRequest

• https://www.zerocho.com/category/jQuery/post/57b1a48f432b8e586ae4a973