09.15(제이퀴리와 Ajax)

제이쿼리와 Ajax

Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 함

그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)

 

 

$.ajax() 메소드

$.ajax() 메소드는 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메소드입니다.

HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공

 

 

$.ajax() 메소드의 원형

$.ajax([옵션])

 

 

$.ajax() 메소드에서 사용할 수 있는 대표적인 옵션>

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

// HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
.done(function(json) {
    $("<h1>").text(json.title).appendTo("body");
    $("<div class=\"content\">").html(json.html).appendTo("body");
})

// HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.
.fail(function(xhr, status, errorThrown) {
    $("#text").html("오류가 발생했습니다.<br>")
    .append("오류명: " + errorThrown + "<br>")
    .append("상태: " + status);
})

// HTTP 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행됨.
.always(function(xhr, status) {
    $("#text").html("요청이 완료되었습니다!");
});

 

예제>

$(function() {

    $("#requestBtn").on("click", function() {
        $.ajax("/examples/media/request_ajax.php")
        .done(function() {
            alert("요청 성공");
        })

        .fail(function() {
            alert("요청 실패");
        })

        .always(function() {
            alert("요청 완료");

        });
    });
});