NodeJs.XMLHttpRequest의 이해(코드)

NodeJs

NodeJs.XMLHttpRequest의 이해(코드)

char1ey 2023. 1. 4. 19:07

https://char1ey.tistory.com/64

NodeJs.XMLHttpRequest이용하기

목차 1. 효율적인 통신을 위해서 2. XMLHttpRequest 3. XMLHttpRequest 사용하기 1. 효율적인 통신을 위해서 이전에는 서버와 클라이언트(브라우저)가 서로 데이터를 주고 받을 때, 화면을 그리는 방법은 요

char1ey.tistory.com

위 포스팅 가장 하단의 코드를 제대로 이해하고 쓰지 못했던 것 같아 아쉬움이 있었다.

코드와 XML 객체에 대해서 한 번 더 짚고 넘어가보자.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="ajax_get">AJAX_GET</button>
    <button id="ajax_post">AJAX_POST</button>
    <p id="msg">메시지</p>
    <script type="text/javascript" src="/js/index.js"></script>
</body>
</html>

Javascript(DOM, XML 객체)

const ajax_get = document.querySelector('#ajax_get')
const ajax_post = document.querySelector('#ajax_post')
const msg = document.querySelector('#msg')
const xhr = new XMLHttpRequest()

ajax_get.addEventListener('click', () => {
    xhr.open('get', "http://localhost:3000/ajax?userid=char1ey")
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    xhr.send()
    xhr.onload = () => {
        console.log(xhr.readyState, xhr.status, xhr.response)
        if( xhr.readyState === 4 && xhr.status === 200){
            const response = xhr.response
            console.log(response)
            if( response === 'true') {
                msg.innerHTML = 'GET 아이디가 중복되었습니다.'
                msg.style.color = 'red'
            } else {
                msg.innerHTML = '사용가능한 아이디 입니다'
                msg.style.color = 'green'
            }
        }
    }
})

ajax_post.addEventListener('click', () => {
    xhr.open('post', 'http://localhost:3000/ajax')
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    // const data = {userid:'web7722'} -- JSON일 경우 데이터
    const data = 'userid=web7722' // --- x-www-form-urlencoded일 경우 데이터(쿼리스트링)
    // xhr.send(JSON.stringify(data)) -- JSON일 경우, JSON 스트링으로 변환해서 보내야한다.
    xhr.send(data)  // --- x-www-form-urlencoded의 경우(쿼리스트링 형태)
    xhr.onload = () => {
        if( xhr.readyState === 4 && xhr.status === 200){
            const response = xhr.response
            console.log(response)
            if( response === 'true') {
                msg.innerHTML = 'POST 아이디가 중복되었습니다.'
                msg.style.color = 'red'
            } else {
                msg.innerHTML = '사용가능한 아이디 입니다'
                msg.style.color = 'green'
            }
        }
    }
})

NodeJS(Server.js)

const express = require('express')
const nunjucks = require('nunjucks')

const app = express()
app.use(express.static('public'))
app.use(express.urlencoded({extended:false}))
app.use(express.json())

app.set('view engine', 'html')
nunjucks.configure('views', { express:app })

app.get('/', (req, res)=>{
    res.render('index.html')
})

app.get('/ajax', (req, res)=>{
    const userid = req.query.userid
    let flag = true
    if( userid === undefined) {
        flag = false
    }
    res.send(`${flag}`)
})

app.post('/ajax', (req, res)=>{
    const userid = req.body.userid
    let flag = true
    if( userid === undefined) {
        flag = false
    }
    res.send(`${flag}`)
})

app.listen(3000, ()=>{
    console.log('server start')
})

지난번 포스팅과 살짝만 바꿔보았다.

이제 한 번 자세히 살펴보자.

우선 전체적인 흐름은 간단하다.