ajax

jQuery에서 ajax를 사용하기 위한 방법에 대해서 살펴본다.

ajax

ajax(Asynchronous Javascript And XML)란 비동기적인 웹 애플리케이션의 제작을 위해 XMLHttpRequest를 사용하여 통신을 하는 기술을 말한다.

페이지 전환 없이 요청을 보낼 수 있도록 설계되어 이를 이용해 사용자에게 이질감 없이 자연스러운 홈페이지 이용 경험을 선사할 수 있어 갈수록 많이 이용하는 추세이다.

jQuery ajax

jQuery에는 ajax를 사용하기 위한 명령이 존재한다.

$.ajax({option})

jQuery slim 버전에는 ajax 기능이 존재하지 않는다

option에 정보를 채워 통신을 진행한다

BE 준비

ajax는 통신이므로 통신할 대상(서버)이 필요하다. 서버는 직접 구현해도 되며, 더미 데이터를 제공하는 사이트를 이용할 수도 있다. 문서에서는 더미 데이터 제공 사이트를 이용하여 진행한다.

ReqRes – Frontend-first backend you call with fetch()reqres.in

예제 - User List (1)

jQuery

$(function(){
    $(".load-btn").click(function(){
        $.ajax({
            url:"https://reqres.in/api/users",
            method:"get",
            dataType:"json",
            success:function(resp) {
                const data = JSON.stringify(resp, null, 3);
                $(".load-result").html(data);
            },
            error:function(e){
                window.alert("Ajax error");
            }
        });
    });
});

HTML

예제 - User List (2)

jQuery

$(function(){
    $(".load-btn").click(function(){
        $.ajax({
            url:"https://reqres.in/api/users",
            method:"get",
            dataType:"json",
            success:function(resp) {
                const data = resp.data;
                const template = $("#result-item-template").html();
                for(let i=0; i < data.length; i++){
                    const html = $.parseHTML(template);
                    console.log(html, $(html));
                    $(html).find(".avatar").attr("src", data[i].avatar);
                    $(html).find(".id").text(data[i].id);
                    $(html).find(".email").text(data[i].email);
                    $(html).find(".first_name").text(data[i].first_name);
                    $(html).find(".last_name").text(data[i].last_name);
                    $(".load-result").append(html);
                }
            },
            error:function(e){
                window.alert("Ajax error");
            }
        });
    });
});

HTML

CSS

예제 - User Detail

jQuery

$(function(){
    $(".search-btn").click(function(){
        const userId = $("[name=id]").val();
        if(!userId) return;

        $.ajax({
            url:"https://reqres.in/api/users/"+userId,
            method:"get",
            dataType:"json",
            success:function(resp) {
                const data = resp.data;
                const template = $("#result-item-template").html();
                const html = $.parseHTML(template);
                $(html).find(".avatar").attr("src", data.avatar);
                $(html).find(".id").text(data.id);
                $(html).find(".email").text(data.email);
                $(html).find(".first_name").text(data.first_name);
                $(html).find(".last_name").text(data.last_name);
                $(".search-result").html(html);
            },
            error:function(e){
                $(".search-result").html("<h1>Not found</h1>");
            }
        });
    });
});

HTML

CSS