ajax

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

ajax

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

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

jQuery ajax

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

$.ajax({option})

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

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

BE 준비

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

Reqres - A hosted REST-API ready to respond to your AJAX requests

예제 - 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

<button class="load-btn">Load</button>
<hr>
<pre class="load-result"></pre>

예제 - 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

<script type="text/template" id="result-item-template">
    <div>
        <ul>
            <li><img class="avatar"></li>
            <li>[ID] <span class="id"></span></li>
            <li>[E-mail] <span class="email"></span></li>
            <li>
                [Name] 
                <span class="last_name"></span>
                <span class="first_name"></span>
            </li>
            </ul>
        </ul>
    </div>
</script>
<button class="load-btn">Load</button>
<hr>
<div class="load-result"></div>

CSS

.load-result ul {
    list-style: none;
}

예제 - 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

<script type="text/template" id="result-item-template">
    <div>
        <ul>
            <li><img class="avatar"></li>
            <li>[ID] <span class="id"></span></li>
            <li>[E-mail] <span class="email"></span></li>
            <li>
                [Name] 
                <span class="last_name"></span>
                <span class="first_name"></span>
            </li>
            </ul>
        </ul>
    </div>
</script>
<input type="text" name="id">
<button class="search-btn">search</button>
<hr>
<div class="search-result"></div>

CSS

.search-result ul {
    list-style: none;
}