[jQuery] Ajax

• ajax는 캐시를 저장하는 옵션이 default이다.cache:true

• { ... cache:false, ... }로 지정해주면 History back(브라우저에서 뒤로가기 누르는 것)을 해도 캐시를 불러오지 않음

  • 예를 들어, 쿠폰이 10장이였다가 다음 페이지에서 5장을 얻어 15장이 되었다. 이 때, 뒤로가기 버튼을 누르면 캐시 로드로 인해 10장으로 다시 돌아오면 안되기 때문에 이럴 때 cache:false를 지정해주어야 함

1. ajax

$.ajax({
    url: "/rest/1/pages/245", // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
    data: { name: "홍길동" },  // HTTP 요청과 함께 서버로 보낼 데이터 (JSON - key: value)
    method: "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);
})
// 항상 (Java try-catch문의 finally와 같음)
.always(function(xhr, status) {
    $("#text").html("요청이 완료되었습니다!");
});

2. get

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

3. post

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