Ajax와 제이쿼리

Ajax와 제이쿼리

---

제이쿼리와 Ajax

---

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

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

$.ajax( ) 메소드

---

제이쿼리는 Ajax와 관련된 다양하고도 편리한 메소드를 많이 제공하고 있다.

그중에서도 $.ajax( ) 메소드는 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메소드이다.

$.ajax( ) 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공한다.

$.ajax( ) 메소드의 원형은 다음과 같다.

원형

$.ajax([옵션])

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

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

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

});

다음 예제는 $.ajax( ) 메소드의 동작을 보여주는 간단한 예제이다.

문법

$(function() {

    $("#requestBtn").on("click", function() {

        $.ajax("/examples/media/request_ajax.php")

        .done(function() {

            alert("요청 성공");

        })

        .fail(function() {

            alert("요청 실패");

        })

        .always(function() {

            alert("요청 완료");

        });

    });

});

$.get( ) 메소드

---

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

이 메소드를 사용하면 서버에 GET 방식의 HTTP 요청을 보낼 수 있다.

$.get( ) 메소드의 원형은 다음과 같다.

원형

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

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

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

예제

$(function() {

    $("#requestBtn").on("click", function() {

        // GET 방식으로 서버에 HTTP 요청을 보냄.

        $.get("/examples/media/jquery_ajax_data.txt",

        function(data, status) {

            $("#text").html(data + status); // 전송받은 데이터와 전송 성공 여부를 보여줌.

        });

    });

});

$.post( ) 메소드

---

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

이 메소드를 사용하면 서버에 POST 방식의 HTTP 요청을 보낼 수 있다.

$.post( ) 메소드의 원형은 다음과 같다.

원형

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

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

데이터는 HTTP 요청과 함께 서버로 보낼 데이터를 전달한다.

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

예제

$(function() {

    $("#requestBtn").on("click", function() {

        // POST 방식으로 서버에 HTTP 요청을 보냄.

        $.post("/examples/media/request_ajax.php",

            { name: "이순신", grade: "A+" },             // 서버가 필요한 정보를 같이 보냄.

            function(data, status) {

                $("#text").html(data + "<br>" + status); // 전송받은 데이터와 전송 성공 여부를 보여줌.

            }

        );

    });

});

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");

    });

})

load( ) 메소드의 인수로 URL 주소와 함께 선택자를 전달할 때는 위의 예제와 같이 하나의 문자열로 전송해야 한다.

이때 URL 주소와 선택자는 띄어쓰기로 구분할 수 있다.

다음 예제는 test.txt 파일 내에서 아이디가 para인 요소만을 읽어 들여, 아이디가 box인 요소 안에 배치하는 예제이다.

예제

$("#box").load("test.txt #para");

Ajax 메소드

---

제이쿼리는 $.ajax( ) 메소드뿐만 아니라 Ajax와 관련된 다양한 메소드를 제공하고 있다.

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