XMLHttpRequest를 이용한 동기 방식의 request

아래 소스코드는 jQuery에서 제공하는 ajax가 모듈이 질려, XMLHttpRequest를 이용하여 동기/POST 방식으로 HTTP request와 response를 수행하는 함수를 구현한 것이다. 코드가 간단하다보니 상세한 설명은 생략.

    function Req() {
        this.url = undefined
        this.data = {}
        this.method = "POSt"
        this.responseType = "json"
        this.requestHeader = "application/x-www-form-urlencoded"
        this.request = new XMLHttpRequest()
        this.getQueryString = () => {
            return Object.entries(this.data).map(e => e.join('=')).join('&')
        }
        this.async = () => {
            if(!this.request) {
                console.error("Can't make request.")
                return false
            }

            this.request.open(this.method, this.url, false)
            this.request.setRequestHeader("Content-Type", this.requestHeader)

            let result = undefined
            this.request.addEventListener("readystatechange", function (event) {
                const { target } = event;
                if (target.readyState === XMLHttpRequest.DONE) {
                    const { status } = target;
                    if (status === 0 || (status >= 200 && status < 400)) { 
                        result = target.response
                    }
                }
            })
            this.request.send(this.getQueryString())
            return JSON.parse(result)
        }
    }

 

 

사용 예시는 아래와 같다.

    function modifyPassword(name, email) {
        const req = new Req()
        req.url = "/findaccount/check_name_email"
        req.data = { name: name, email: email }

        const result = req.async()
        let message = "회원 정보가 존재하지 않습니다."
        if(result.is_success) {
            message = `
             회원님의 비밀번호를 초기화 하였습니다. <br/><br/> &emsp;
             - 아이디 : ${result.user_id} <br /> &emsp;
             - 비밀번호 : ${result.new_password}`
        }

        validationBox.innerHTML = `
         <div class="alert alert-dismissible alert-info">
             ${message}
             <button type="button" class="close alertclose">&times;</button>
         </div>`
    }