JQuery_Ajax 비동기 통신

Ajax 비동기 통신

: Asynchronous Javascript And XML의 약자로 자바스크립트의 라이브러리 중 하나이다.

자바스크립트를 통해서 비동기식으로 서버에 데이터를 요청하여 필요한 데이터를 받아와 전체 페이지를 새로 고치지 않고 변경이 필요한 페이지 부분만 고치는 기법 

→ 화면 전환 없이 클라이언트와 서버 간의 정보를 교환하기 위해 사용한다.

 
 

Ajax 사용법

$.ajax({
    type: "get", // 요청 방식
    url: "https://jsonplaceholder.typicode.com/posts/" + postsId, // 요청 url
    contentType: "application/json; charset=utf-8",
    dataType: "json", // 서버에서 반환되는 데이터 형식
    data: JSON.stringify(requestParam) // 전달할 파라미터
}).done(function(response){
    // 통신 성공시
    console.log(response);
}).fail(function(error){
    // 통신 실패시
    console.log(error);
});

 

Ajax 예제

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>  
    .change--span{
        text-decoration: line-through;
    }
</style>

<h1>To-Do List</h1>
<div class="render">
    <button id="todoBtn">Todo 가져오기</button>
</div>

<script>
    $(document).ready(function() {
        let postId = 1;
        $("#todoBtn").on("click", ()=>{
            $.ajax({
                type: "get",
                url: "https://jsonplaceholder.typicode.com/posts/" + postsId,
                contentType: "application/json; charset=utf-8"
            }).done((data, textStatus, xhr)=>{
                let posts = xhr.responseJSON;
                
                let appendDiv = document.querySelector("div");
                
                for(let i = 0; i < 1; i++) {
                    // 전부 출력
                    // appendDiv.append(render(i, posts[i].title));
                    
                    // 하나씩 출력
                    appendDiv.append(render(i, posts.title));
                }
            }).fail(error=>{
                console.log("error : " + error);
            });
        });
        
        function render(id, title) {
        let posts = document.createElement("div");
        posts.setAttribute("class", "render");
        
        let inputNode = document.createElement("input");
        let pNode = document.createElement("span");
        
        inputNode.setAttribute("type", "checkbox");
        inputNode.setAttribute("id", "title");
        inputNode.setAttribute("class", "check");
        pNode.setAttribute("id", "checked");
        
        posts.append(inputNode);
        pNode.append(title);
        posts.append(pNode);
        
        inputNode.addEventListener("change", function() {
            pNode.classList.toggle("change--span");
        });
        
        postsId++;
        return posts;
    }
        
});
</script>