[TIL] JS: Ajax

송나은·2021년 1월 29일

Poiemaweb js

JavaScript

목록 보기

9/23

Ajax

1. Ajax

(=Asynchronouse JavaScript and XML)
자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신방식이다.
페이지 전체를 로드하여 렌더링할 필요가 없고 갱신이 필요한 일부만 로드하여 빠르고 부드러운 화면 표시 효과를 기대할 수 있다.

2. JSON

(=JavaScript Object Natation)
클라이언트와 서버 간 데이터 교환을 위한 데이터 포맷이다.

순수한 텍스트로 구성된 규칙이 있는 데이터 구조로 key는 반드시 큰따옴표로 둘러싸야 한다.
JSON.stringify 객체를 JSON 형식의 문자열로 반환한다.
JSON.parse JSON 데이터를 가진 문자열을 객체로 변환한다.

배열의 요소가 객체인 경우 배열의 요소까지 객체로 변환한다.

3. XMLHttpRequest

서버가 브라우저의 요청에 대해 응답을 반환하면 같은 XMLHttpRequest 객체가 그 결과를 처리한다.

XMLhttpRequest.open 서버로 요청을 준비한다.

XMLhttpRequest.open(method, url[, async])
HTTP method Get, Post, Put, Delete 등
XMLhttpRequest.send 서버로 요청을 전달한다.
XMLHttpRequest.setRequestHeader
RequestHead Content-type, Accept
XMLHttpRequest.readyState
response가 클라이언트에 도달했는지를 추적할 수 있는 프로퍼티이다. 값이 4인 경우, 정상적으로 서버 응답이 완료된 것이다.

4. Web Server

브라우저와 같은 클라이언트로부터 HTTP 요청을 받아들이고 HTML 문서와 같은 웹 페이지를 반환하는 컴퓨터 프로그램이다.

5. Load JSON

<!-- 루트 폴더(webserver-express/public)/loadjson.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://poiemaweb.com/assets/css/ajax.css">
  </head>
  <body>
    <div id="content"></div>

    <script>
      // XMLHttpRequest 객체의 생성
      var xhr = new XMLHttpRequest();

      // 비동기 방식으로 Request를 오픈한다
      xhr.open('GET', 'data/data.json');
      // Request를 전송한다
      xhr.send();

      xhr.onreadystatechange = function () {
        // 서버 응답 완료 && 정상 응답
        if (xhr.readyState !== XMLHttpRequest.DONE) return;

        if (xhr.status === 200) {
          console.log(xhr.responseText);

          // Deserializing (String → Object)
          responseObject = JSON.parse(xhr.responseText);

          // JSON → HTML String
          let newContent = '<div id="tours"><h1>Guided Tours</h1><ul>';

          responseObject.tours.forEach(tour => {
            newContent += `<li class="${tour.region} tour">
                <h2>${tour.location}</h2>
                <span class="details">${tour.details}</span>
                <button class="book">Book Now</button>
              </li>`;
          });

          newContent += '</ul></div>';

          document.getElementById('content').innerHTML = newContent;
        } else {
          console.log(`[${xhr.status}] : ${xhr.statusText}`);
        }
      };
    </script>
  </body>
</html>