제이쿼리 Ajax

제이쿼리 Ajax

HTTP 요청방식

클라이언트인 브라우저가 서버에 HTTP 요청을 보낼때에는 다음 방식중 하나를 사용한다.

1. GET 방식

2. POST 방식

GET 방식

GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식이다. GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어 저장된다.하지만 GET 방식은 보통 쿼리 문자열에 포함되어 전송되기때문에, 길이즤 제한이 있고 보안상 취약점이 존재하기 때문에, 중요한 데이터인 경우 POST 방식을 사용하는 것이 좋다.

POST 방식

POST 방식은 데이터를 별도로 첨부하여 전달하는 방식으로, POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않는다.(서버에 데데이터가 저장되어 전송) 또한, HTTP 요청에 의한 데이터는 쿼리 문자열과 별도로 전송되기 때문에 데이터의 길이에 대한 제한도 없고, GET 방식보다 보안성이 높다. POST방식은 데이터의 길이에 제한이 없기 때문에, 파일을 전송할때에도 쓰인다.

$.get()메소드

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

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

여기서 URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소이다.

콜백 함수는 HTPP 요청이 성공했을때 실행할 함수를 정의한다.

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

$.post() 메소드

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

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

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

$.ajax() 메소드

제이쿼리는 Ajax와 관련된 다양한 메소드를 제공하는데, 그중에서도 $.ajax() 메소드는 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메소드 이다. $.ajax() 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공한다.

$.ajax(URL주소[,옵션])

URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소를 나타내고,

옵션은 HTTP 요청을 구성하는 키와 값의 쌍으로 구성되는 헤더의 집합이다.

$.ajax({
​
    url: "/examples/media/request_ajax.php", // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
    data: { name: "홍길동" },                          // HTTP 요청과 함께 서버로 보낼 데이터
    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);
})
​
// HTTP 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행됨.
​
.always(function(xhr, status) {
    $("#text").html("요청이 완료되었습니다!");
});

$.ajax() 메소드에는 다양한 옵션이 존재하는데, 따로 정리해두었다.

$.load()메소드

load() 메소드는 선택한 요소에서 호출하는 유일한 제이쿼리 Ajax 메소드이다.

load() 메소드는 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치한다. 또한, 선택자를 URL 주소와 함께 전송하면, 읽어 들인 HTML 코드 중에서 선택자와 일치하는 요소만을 배치한다.

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

AJax에서 서버와의 비동기식 통신을 위해 form 요소를 통해 입력받은 데이터를 직렬화(serialization) 하여 전송한다.

이때 직렬화(serialization)란 입력받은 여러 데이터를 하나의 쿼리 문자열로 만드는 것을 의미한다. 이렇게 함으로써 form 요소를 통해 입력받은 여러 데이터를 한 번에 서버로 보낼 수 있게 되는 것이다.

직렬화(serialization)

제이쿼리에서는 HTML form 요소를 통해 입력된 데이터의 직렬화 작업은 매우 간단하게 수핼할 수 있다.

.serialize() 메소드와 .serializeArray() 메소드를 이용한다.

.serialize() 메소드는 HTML form 요소에 입력된 데이터를 쿼리 문자열로 변환한다

.serializeArray() 메소드는 serialize() 메소드와는 달리 입력된 데이터를 문자열이 아닌 배열 객체로 변환한다.

$(function() {
​
    $("form").on("submit", function(event) {  // <form>요소에 "submit" 이벤트가 발생할 때,
        event.preventDefault();               // 서버로 전송하지 않음.
        $("#text").html($(this).serialize()); // 입력받은 데이터를 직렬화하여 나타냄.
​
    });
});

Reference

http://tcpschool.com/