-
[Ajax] Express로 Ajax 실습하기Programming/Javascript 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>출력화면
버튼 클릭 전 
버튼 클릭 후 div.content 내용 변경됨 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>참고
댓글