[jQuery] 제이쿼리에서 아작스(AJAX) 사용

 

#7 jQuery에서 Ajax 사용하기

제이쿼리를 사용하면 자바스크립트에서보다 쉽게 아작스 기술을 사용할 수 있습니다.(xhr을 사용하지 않아도 됨) 아작스는 페이지를 새로 로딩하지 않고 동적으로 페이지의 내용을 바꿀 수 있는 기술입니다.

Ajax 지원 메서드

$(document).ready(function () {
    // 1.html 등의 text 문서 읽기
    $("#t1").click(function () {
        // $("#disp").load("jq9_a.html");// load() : Ajax 관련 메소드
        $("#disp").hide().load("jq9_a.html", function () {
​
            $(this).fadeIn();// fade effect
        });
    });
​
    // 2. json 문서 읽기
    $("#t2").click(function () {
        $("#disp").empty();
        $.getJSON("jq9_b.json", function (data) {
            // alert(data);
            $.each(data, function (index, value) {
                var ss = "<ol>";
                ss += "<li>" + value["title"] + "</li>";
                ss += "<li>" + value["desc"] + "</li>";
                ss += "<li>" + value["author"] + "</li>";
                ss += "</ol>";
                $("#disp").append(ss);
            });
        });
    });
​
    // 3. xml 문서 읽기
    $("#t3").click(function () {
        $("#disp").empty();
        $.get("jq9_c.xml", function (data) {
            // $.post("jq9_c.xml",function(data){
            // alert($(data).find("aa").size());
            $(data).find("aa").each(function () {
                var aadata = $(this);// 현재 읽힌 aa 요소
                var ss = "<div>";
                // 속성 값 읽기
                ss += aadata.attr("part") + " " + aadata.attr("term");
                ss += " - ";
                ss += aadata.find("desc").text();
                ss += "</div>";
            });
        });
    });
});

$.ajax() - 아작스 전담 메서드

$.ajax()는 제이쿼리에서 지원하는 아작스 전담 메서드로 가장 많이 사용하는 방법입니다. 메서드의 인자로 객체를 던져주고, success를 정의하여 처리합니다. 실패했을 경우의 처리는 error정의하여 처리합니다.

$(document).ready(function () {
    // XML
    $("#btn1").click(function () {
        $.ajax({
            type: "get",
            url: "jq10_1.jsp",
            dataType: "xml",
            success: function(data) {
                //alert(data);
                var str = "";
                $(data).find("person").each(function () {
                    str += $(this).find("irum").text() + " ";
                });
                $("#disp").html(str);
            },
            error: function () {
                $("#disp").text("에러 발생");
                //$("#disp").html();
                //$("#disp").append();
            }
        });
    });
​
    $("#btn2").click(function () {    // parameter가 있는 형태
        $.ajax({
            //type: "get",
            //url: "jq10_2.jsp?irum=tom",
            type: "post",
            url: "jq10_2.jsp",
            //data: "irum=" + "손오공",
            data: {"irum":"사오정"},
            dataType: "xml",
            success: function(data) {
                var str = "";
                $(data).find("person").each(function () {
                    str += $(this).find("irum").text() + " ";
                });
                $("#disp").html(str);
            },
            error: function () {
                $("#disp").text("에러 발생");
            }
        });
    });
​
    //JSON
    $("#btn3").click(function () {
        $.ajax({
            type: "get",
            url: "jq10_3.jsp",
            dataType: "json",
            success: function (data) {
                //alert(data);
                var ss = "";
                // json은 배열이므로 each
                $.each(data,function (index, entry) {     // data를 타고 index, entry(value)
                    ss += entry["name"] + ", " + entry.age;    // []해도되고 . 해도되고
                });
                // $("#disp").append(ss);
                $("#disp").text(ss);
            },
            error: function () {
                $("#disp").text("에러발생");
            }
        });
    });
​
    $("#btn4").click(function () {
        $.ajax({
            type: "post",
            url: "jq10_4.jsp",
            data: {"irum": "장비", "nai": "33"},
            dataType: "json",
            success: function (data) {
                //alert(data);
                var ss = "";
                // json은 배열이므로 each
                $.each(data,function (index, entry) {     // data를 타고 index, entry(value)
                    ss += entry["name"] + ", " + entry.age;    // []해도되고 . 해도되고
                });
                // $("#disp").append(ss);
                $("#disp").text(ss);
            },
            error: function () {
                $("#disp").text("에러발생");
            }
        });
    });
});

xml, json 형식의 문서에서 데이터를 가져오는 예제입니다.

 

출처 : kyun2.tistory.com/55?category=739343