[FrontEnd] JavaScript - AJAX

AJAX

• 비동기 통신
  fetch() : 비동기 통신으로써 promise 객체를 반환
  .then : http 요청을 보낸 후, 다른 코드를 실행하다가 응답이 도착했을 때 해당 함수를 실행하라는 의미

    <div class="mag">책 정보가 없습니다.</div>
    <table></table>
    <button onclick="getBooks()">책정보 얻어오기</button>

    <script>
      function getBooks() {
        fetch("http://127.0.0.1:5502/data.json") // fetch : 비동기 통신
          .then(function (response) {
            return response.json();
          })
          .then(function (data) {
            console.log(data);
            // 데이터를 성공적으로 얻어왔을 때 <tr> 태그 채워 넣기
            if (response.status == 200) {
              let html = "";
              for (let book of data) {
                html += `
                        <tr>
                            <td>${book.title}</td>
                            <td>${book.price}</td>
                            <td>${book.author}</td>
                        <tr>
                    `;
              }
              const table = document.querySelector("table");
              table.innerHTML += html;
            } else {
              console.log("실패");
            }
          });
      }
    </script>