function getUser() {
//로딩 시 사용자가 가져오는 함수
let xhr = new XMLHttpRequest();
xhr.onload = function () {
//응답 받았을때
if (xhr.status == 200) {
//역직렬화함.
let users = JSON.parse(xhr.responseText);
//list라는 이름의 HTML요소를 가져옴
let list = document.getElementById('list');
list.innerHTML = '';
Object.keys(users).map(function(key){
let userDiv = document.createElement('div');
let span = document.createElement('span');
span.textContent = users[key];
userDiv.appendChild(span);
list.appendChild(userDiv);
});
}
};
xhr.open('GET', '/users');
xhr.send();
}
//로딩 시 getUser 호출
window.onload = getUser;
document.getElementById('form').addEventListener('submit', function (e) {
//이벤트 전파를 막음
e.preventDefault();
//Input Text의 값을 가져온다
let name = e.target.username.value;
//값이 비어있으면 alert창을 띄우고 함수를 종료한다.
if (!name) {
return alert("이름을 입력하세요.");
}
//값이 있으면 출력
console.log(name);
//AJAX - 새로고침이 없어도 URL로부터 데이터를 받아올 수 있다.
let xhr = new XMLHttpRequest();
//응답 받으면 호출되는 CALLBACK
xhr.onload = function () {
if (xhr.status == 201) {
//등록이 완료되었다면
getUser();
}
else {
console.error(xhr.responseText);
}
};
//어디에
xhr.open('POST', '/users');
//어떤 형식으로
xhr.setRequestHeader('Content-Type', 'application/json');
//서버에 데이터를 JSON형식으로 보낸다.
xhr.send(JSON.stringify({ name }));
//Input TextBox를 초기화
e.target.username.value = '';
});
서버부분
restServer.js
const http = require('http');
const fs = require('fs');
const users = {};
//서버 생성 + 요청콜백 등록
const server = http.createServer((req, res) => {
//GET방식으로 요청 받았을 때
if (req.method === 'GET') {
//URL이 / 라면
if (req.url === '/') {
//restfront.html파일을 읽고 응답한다.
return fs.readFile('./resFront.html', (err, data) => {
//파일을 읽다가 문제가 생기면 err매개변수에 값이 들어옴.
if (err) throw err;
//정상적으로 읽었다면 data에 값이 들어옴 (buffer)
//응답 후 종료
res.end(data);
});
}
else if (req.url === '/users') {
return res.end(JSON.stringify(users));
}
return fs.readFile(`.${req.url}`, (err, data) => {
if (err) throw err;
return res.end(data);
});
}
else if (req.method === 'POST') {
if (req.url === '/users') {
let body = "";
req.on('data', (data) => {
body += data;
});
//요청을 끝냄
return req.on('end', () => {
//응답을 끝냄
const { name } = JSON.parse(body);
const id = +new Date();
users[id] = name;
console.log(users);
res.writeHead(201);
res.end('등록 성공');
});
}
}
res.writeHead(404, 'NOT FOUND');
return res.end('NOT FOUND');
});
//서버시작
server.listen(8085, () => {
console.log("8085번 포트에서 서버 대기중");
});
