jQuery - 9 [Ajax, 개요, HTTP요청, 메소드, Form요소]

Ajax

코딩의 시작, TCP School

Ajax의 개요

Ajax란?

• Ajax란 Asynchronous JavaScript and XML을 의미.
• 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 가능
• Ajax는 백그라운드 영역에서 서버와 데이터를 교환하여 웹 페이지에 표시.

$(function() {
    $("#requestBtn").on("click",  function() {
        $("#text").load("/examples/media/jquery_ajax_data.txt");
    });
});

Ajax 프레임워크

• Ajax를 사용하여 손쉽게 개발할 수 있도록 미리 여러 가지 기능들을 포함해 놓은 개발 환경

제이쿼리와 Ajax

• 제이쿼리에서는 Ajax 기능을 손쉽게 사용할 수 있도록 여러 메소드를 제공
  • 이러한 메소드를 사용하면 HTTP 요청(request)을 손쉽게 보낼 수 있다.

또한, 데이터의 종류에 따라 그에 알맞는 메소드를 사용하여 서버에 데이터를 요청할 수 있습니다.

Ajax : HTTP 요청

HTTP 요청 방식

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

1. GET 방식
2. POST 방식

GET 방식

• GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식
  • GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장된다.
  • GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있다.

POST 방식

• POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식.
  • POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않는다.
  • 또한, POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송.

따라서 데이터의 길이에 대한 제한이 없다.

GET 방식와 POST 방식의 비교

---

특징	GET 방식	POST 방식
캐시화(cached)	캐시될 수 있음.	캐시되지 않음.
브라우저 히스토리	히스토리에 쿼리 문자열이 기록됨.	히스토리에 기록되지 않음.
데이터 길이	데이터의 길이가 URL 주소의 길이 이내로 제한됨.	(익스플로러에서 URL 주소가 가질 수 있는 최대 길이는 2,083자이며, 이 중에서 순수 경로 길이는 2,048자까지만 허용됨)
데이터 타입	오직 ASCII 문자 타입의 데이터만 전송할 수 있음.	제한 없음.
보안성	데이터가 URL 주소에 포함되어 전송되므로, 아무나 볼 수 있어 보안에 매우 취약함.	브라우저 히스토리에도 기록되지 않고, 데이터가 따로 전송되므로, GET 방식보다 보안성이 높음.

현재 주요 웹 브라우저에서 사용할 수 있는 URL 주소의 최대 길이는 익스플로러를 제외하면, 제한을 두지 않고 않는다.

---

$.get() 메소드

• 제이쿼리에서는 Ajax를 이용하여 GET 방식의 HTTP 요청을 구현한 $.get() 메소드를 제공.
• 이 메소드를 사용하면 서버에 GET 방식의 HTTP 요청을 보낼 수 있다.

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

• URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소.
• 콜백 함수는 HTTP 요청이 성공했을 때 실행할 함수를 정의.

$(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);  // 전송받은 데이터와 전송 성공 여부를 보여줌.
            }
        );
    });
});

$.post() 메소드

• 제이쿼리에서는 Ajax를 이용하여 POST 방식의 HTTP 요청을 구현한 $.post() 메소드를 제공.
• 이 메소드를 사용하면 서버에 POST 방식의 HTTP 요청 가능

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

• URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소.
• 데이터는 HTTP 요청과 함께 서버로 보낼 데이터를 전달.
• 콜백 함수는 HTTP 요청이 성공했을 때 실행할 함수를 정의.

$(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("요청이 완료되었습니다!");
});

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 메소드

---

메소드	설명
$.ajax()	비동기식 Ajax를 이용하여 HTTP 요청을 전송함.
$.get()	전달받은 주소로 GET 방식의 HTTP 요청을 전송함.
$.post()	전달받은 주소로 POST 방식의 HTTP 요청을 전송함.
$.getScript()	웹 페이지에 스크립트를 추가함.
$.getJSON()	전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음.
.load()	서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함.

---

Ajax와 Form 요소

Ajax와 Form 요소

• Ajax에서는 서버와의 비동기식 통신을 위해 form 요소를 통해 입력받은 데이터를 직렬화(serialization)하여 전송
  • 이때 직렬화(serialization)란 입력받은 여러 데이터를 하나의 쿼리 문자열로 만드는 것을 의미.

이렇게 함으로써 form 요소를 통해 입력받은 데이터를 한 번에 서버로 보낼 수 있게 된다.

직렬화(serializatio)

• 제이쿼리에서는 HTML form 요소를 통해 입력된 데이터의 직렬화 작업을 매우 간단하게 수행 가능
  • .serialize() 메소드와 .serializeArray() 메소드를 이용하여 손쉽게 데이터를 직렬화

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

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

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

// 한글이 포함된 입력 데이터가 쿼리 문자열로 변환될 때는 퍼센트 인코딩(percent-encoding)을 통해 변환.  
// 이때 모든 한글 문자는 퍼센트 기호(%)를 포함한 16진수 값으로 변환.