NodeJs.XMLHttpRequest이용하기

NodeJs.XMLHttpRequest이용하기

2023. 1. 3. 19:59ㆍNodeJs

1. 효율적인 통신을 위해서

2. XMLHttpRequest

3. XMLHttpRequest 사용하기

1. 효율적인 통신을 위해서

이전에는 서버와 클라이언트(브라우저)가 서로 데이터를 주고 받을 때, 화면을 그리는 방법은 요청에 따른 응답을 받아 매번 새로 띄웠었다. 하지만, 비동기통신을 이용하면 원하는 부분만 화면을 다시 그릴 수 있다.

그림 2와 같이 비동기 통신을 하기 위해서 XMLHttpRequest라는 생성자 함수를 이용해보도록 하자.

2. XMLHttpRequest

웹 브라우저가 서버와 데이터를 교환할 때 사용하는 객체이며, 객체 안에는 여러가지 값들과 메서드가 있다.

이 객체를 이용하면, 웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있다.

XMLHttpRequest 객체의 주요 메서드

XMLHttpRequest.open( method, url, async )

서버로 보낼 AJAX 요청(리퀘스트)의 형식을 결정하는 메서드이다.

첫 번째 인자값은 요청 메시지의 메서드값이다.

두 번째 인자값 URL 주소는 요청을 처리할 서버의 파일 주소를 전달한다.

세 번째 인자값은 비동기로 처리할 지 정하는 부분이며, 처리하려면 true값을 적어준다.

XMLHttpRequest.setRequestHeader( header, value )

HTTP 요청 헤더의 값을 설정하는 메서드이다.

즉, 리퀘스트 헤더를 구성하는 메서드이다.

header에는 Content-type과 같은 헤더 키값을 요청하고, value에는 헤더 값을 넣어준다고 이해하자.

여기서 주의할 점은 만들어 놓았다는 것, 직접 보내지 않았다는 점이다.

XMLHttpRequest.send( body )

실제로 요청을 보내는 메서드이다.

GET요청일시 인자값을 비워주지만, POST 혹은 PUT과 같은 메서드라면 인자값을 적어준다.

인자값은 리퀘스트 메시지의 body 영역에 값이 들어간다.

XMLHttpRequest.onload = ( ) => { }

onload 메서드는 보낸 요청에 대한 응답을 받아올 수 있는 메서드이다.

응답을 받으면 이벤트가 발생하여 함수가 실행되는 방식이다.

XMLHttpRequest 객체의 속성들

XMLHttpRequest.readyState

readyState 속성은 XMLHttpRequest 객체의 현재 상태를 나타낸다.

객체의 현재 상태에 따라 다음과 같은 주기로 변한다.

UNSENT = 0 : XMLHttpRequest 객체가 생성되었다.
OPENED = 1 : open() 메서드가 성공적으로 실행되었다.
HEADERS_RECEIVED = 2 : 모든 요청에 대한 응답이 도착했다.
LOADING = 3 : 요청한 데이터를 처리 중이다.
DONE = 4 : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었다.

XMLHttpRequest.status

status 프로퍼티는 서버의 문서 상태를 나타내준다.

200 : 서버에 문서가 존재한다.
404 : 서버에 문서가 존재하지 않는다.

XMLHttpRequest.onreadystatechange

readyState 프로퍼티의 값이 변할 때마다 자동으로 호출되는 함수를 설정한다.

서버에서 응답이 도착할 때까지 readyState 프로퍼티 값의 변화에 따라 총 5번 호출된다.

이 프로퍼티를 이용하여 서버에 요청한 데이터가 존재하고, 서버로부터 응답이 도착하는 순간을 특정할 수 있다.

XMLHttpRequest.response

위의 속성에는 응답메시지 부분의 body 영역의 내용이 들어간다.

3. XMLHttpRequest 사용하기

XMLHttpRequest를 이용해서 간단한 비동기통신을 해보자.

브라우저에게 보낼 HTML문서와 Javascript문서

<!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>
    <script></script>
</body>
</html>

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.onload = () => {
        if( xhr.readyState === 4 && xhr.status === 200){
            const response = xhr.response
            if( response === 'true') {
                msg.innerHTML = '아이디가 중복되었습니다.'
                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/json')
    const data = {userid:'web7722'}
    xhr.send(JSON.stringify(data))
})

NodeJs 서버

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')
})

위의 코드를 적용하면 아래와 같이 화면을 다시 그리지않고 메시지 부분만 변경된다.

저작자표시

'NodeJs' 카테고리의 다른 글

NodeJs.서버의 분리와 CORS (0)	2023.01.04
NodeJs.MVC 패턴 (0)	2023.01.03
NodeJs.CRUD 흐름도 (0)	2022.12.25
NodeJs, 네트워크 - 쿠키(Cookie) (0)	2022.12.25
NodeJs.익스프레스 기본개념 (0)	2022.12.21

memo