> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/js/jquery/ajax.md).

# ajax

## ajax

ajax(<mark style="color:red;">**A**</mark>synchronous <mark style="color:red;">**J**</mark>avascript <mark style="color:red;">**A**</mark>nd <mark style="color:red;">**X**</mark>ML)란 비동기적인 웹 애플리케이션의 제작을 위해 **XMLHttpRequest**를 사용하여 통신을 하는 기술을 말한다.

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

## jQuery ajax

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

```javascript
$.ajax({option})
```

{% hint style="info" %} <mark style="color:red;">jQuery slim 버전에는 ajax 기능이 존재하지 않는다</mark>
{% endhint %}

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

## BE 준비

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

{% embed url="<https://reqres.in/>" %}

## 예제 - User List (1)

{% tabs %}
{% tab title="jQuery" %}

```javascript
$(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");
            }
        });
    });
});
```

{% endtab %}

{% tab title="HTML" %}

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

{% endtab %}
{% endtabs %}

{% embed url="<https://codepen.io/hiphop5782/pen/GRGxWpp>" %}

## 예제 - User List (2)

{% tabs %}
{% tab title="jQuery" %}

```javascript
$(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");
            }
        });
    });
});
```

{% endtab %}

{% tab title="HTML" %}

```markup
<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>
```

{% endtab %}

{% tab title="CSS" %}

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

{% endtab %}
{% endtabs %}

{% embed url="<https://codepen.io/hiphop5782/pen/ExREWyO>" %}

## 예제 - User Detail

{% tabs %}
{% tab title="jQuery" %}

```javascript
$(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>");
            }
        });
    });
});
```

{% endtab %}

{% tab title="HTML" %}

```markup
<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>
```

{% endtab %}

{% tab title="CSS" %}

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

{% endtab %}
{% endtabs %}

{% embed url="<https://codepen.io/hiphop5782/pen/NWzYpjv>" %}