# 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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sysout.co.kr/web/develop-page/js/jquery/ajax.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.