[Ajax] Express로 Ajax 실습하기

Programming/Javascript

[Ajax] Express로 Ajax 실습하기

Yejii 2021. 2. 25. 17:46

Web Server(웹서버)는 브라우저와 같은 클라이언트로부터 HTTP 요청을 받아드리고, HTML 문서와 같은 웹 페이지를 반환하는 컴퓨터 프로그램이다. Ajax는 웹서버와의 통신이 필요하기 때문에 Express로 간단한 웹서버를 생성한다.

1. 웹서버 실행

- Node.js 설치 후 Express로 웹서버 생성

`webserver-express\public` 디렉토리가 루트 디렉토리이다.

- 웹서버 실행

2. (실습1) HTML 파일 로드해서 페이지 변경하기

버튼을 누르면 해외여행 정보를 보여주는 기능을 만들어보자.

2-A) 해외여행 정보를 담은 html 파일 생성 [public\data\data.html]

<div id="tours">
    <h1>Guided Tours</h1>
    <ul>
        <li class="usa tour">
            <h2>New York, USA</h2>
            <span class="details">$1,899 for 7 nights</span>
            <button class="book">Book Now</button>
        </li>
        <li class="europe tour">
            <h2>Paris, France</h2>
            <span class="details">$2,299 for 7 nights</span>
            <button class="book">Book Now</button>
        </li>
        <li class="asia tour">
            <h2>Tokyo, Japan</h2>
            <span class="details">$3,799 for 7 nights</span>
            <button class="book">Book Now</button>
        </li>
    </ul>
</div>

2-B) ajax를 사용할 html 파일 생성 [public\loadhtml.html]

- Request 생성 후 전송

 // XMLHttpRequest 객체의 생성
 const xhr = new XMLHttpRequest();
 // 비동기 방식으로 Request를 오픈
 xhr.open('GET', 'data/data.html');
 // Request 전송
 xhr.send();

- 서버 응답 완료 후 처리

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

   if (xhr.status === 200) {
      console.log(xhr.responseText);
      
      document.getElementById('content').innerHTML = xhr.responseText;
   } else {
      console.log(`[${xhr.status}] : ${xhr.statusText}`);
   }
};

- 버튼 이벤트 리스너 설정

const element = document.querySelector('.btn');
element.addEventListener('click', show);

- loadhtml.html 전체코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://poiemaweb.com/assets/css/ajax.css">
</head>

<body>
    <button class="btn">Show tours</button>
    <div id="content"></div>

    <script>
        function show() {
            // XMLHttpRequest 객체의 생성
            const xhr = new XMLHttpRequest();
            // 비동기 방식으로 Request를 오픈
            xhr.open('GET', 'data/data.html');
            // Request 전송
            xhr.send();

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

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

                    document.getElementById('content').innerHTML = xhr.responseText;
                } else {
                    console.log(`[${xhr.status}] : ${xhr.statusText}`);
                }
            };
        }

        const element = document.querySelector('.btn');
        element.addEventListener('click', show);

    </script>
</body>

</html>

출력화면

3. (실습2) JSON 파일 로드해서 페이지 변경하기

3-A) 해외여행 정보를 담은 json파일 생성 [public\data\data.json]

3-B) ajax를 사용할 html 파일 생성 [public\loadjson.html]

- Request 생성 후 전송

// 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 Tous</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}`);
    }
};

- 버튼 이벤트 리스너 설정

const element = document.querySelector('.btn');
element.addEventListener('click', show);

- loadjson.html 전체코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://poiemaweb.com/assets/css/ajax.css">
</head>

<body>
    <button class="btn">Show tours</button>
    <div id="content"></div>

    <script>
        function show() {
            // 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 Tous</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}`);
                }
            };
        }


        const element = document.querySelector('.btn');
        element.addEventListener('click', show);

    </script>
</body>

</html>

참고

- poiemaweb.com/js-ajax