[Jquery] $.ajax() - 사용 방법

   

 

이번 글에서는 $.ajax() 메소드에 대하여 알아보도록 하겠습니다.

다음 예제를 통하여 $.ajax() 메소드에서 사용할 수 있는 대표적인 옵션을 살펴봅시다.

<script>
    $.ajax({
        url: "URL 주소",          
        data: { name: "조하림"},  
        method: "GET",            
        dataType : "json"         
    })
    .done(function(json) {
        $("<h1>").text(json.title).appendTo("body");
        $("<div class=\"content\">).html(json.html).appendTo("body");
    })
    .fail(function(xhr, status, errorThrown) {
        $("#text").html("오류가 발생하였습니다.<br>")
            .append("오류명: " + errorThrown + "<br>")
            .append("상태: " + status);
    })
    .always(function(xhr, status) {
        $("#text").html("요청이 완료되었습니다.");
    })
</script>

url	클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
data	HTTP 요청과 함께 서버로 보낼 데이터
method	HTTP 요청 방식(GET, POST)
dataType	HTTP 요청 방식(GET, POST)

 

 

ajax() 메소드 이후에 실행되는 .done(), .fail(), .always()에 대하여 알아볼까요?

.done()	HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
.fail()	HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.
.always()	HTTP 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행됨.

 

 

아래 소스는 위의 표에서 배운 $.ajax() 메소드의 동작을 간단하게 표시한 예제입니다.

<script>
    $(function() {
        $("#requestBtn").on("click", function() {
            $.ajax("URL 주소"),
                .done(function() {
                    alert("요청 성공");
                })
                .fail(function() {
                    alert("요청 실패");
                })
                .always(function() {
                    alert("요청 완료");
                })
        })
    })
</script>

 

추가로 유일한 제이쿼리 Ajax 메소드인 load() 에 대하여 알아보도록 하겠습니다.

 

 

load() 메소드

서버에서 데이터를 읽은 후, 읽은 코드를 선택한 요소에 배치합니다.

또한, 선택자를 URL과 함께 전송하면, 읽은 코드 중에서 선택자와 일치하는 요소만을 배치합니다.

<script>
    $(function() {
         $("#requestBtn").on("click", function() {
             // URL 주소에 존재하는 HTML 코드에서 <li>요소를 읽은 후에 id가 "list"인 요소에 배치함.
             $("#list").load("/examples/");
         });
    });
</script>

 

ajax() 같은 경우 처음 보기에는 어려워서 많이 접해봐야 이해가 잘 되실겁니다.