[javascript] AJAX XMLHttpRequest

AJAX 란 Asynchronous JavaScript And XML, XMLHttpRequest 객체는 서버와 통신하기 위해 사용하는 것.
JSON, XML, HTML, TEXT format 등을 포함하여 다양한 format을 주고 받을 수 있음.
URI를 정의하거나 URI를 통한 요청에 대한 응답을 위해 express의 router를 사용.

나는 다른 URI로 이동할 때 javascript안에서 loacation.href를 사용하는 식이었다. 단순히 페이지를 이동시키다 보니 router에서의 response를 받을 수 없었다. 그때 같이 프로젝트하는 팀원이 새로운 방법을 찾았는데 그게 XMLHttpRequest 였다.
다양한 request를 보낼 수 있고, 또 그 request에 대한 callback이 가능하다. response text 마다 구분하여 처리도 할 수 있어 유용하게 쓸 수 있을 듯 하다.

예시로 URI '/main/'에서 get으로 request가 온다면 'OK'로 send 하고,

router.get('/main/', function (req, res, next) {
  res.send('OK');
});

javascript에서 '/main/'으로 get request 후, response text를 확인하는 것을 코드로 작성하였다.

    send('GET','/main/') // 함수 호출

    function send(request, data) { 
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {  // callback
            if (xhr.readyState === xhr.DONE) {  // if state is DONE
                if (xhr.status === 200 || xhr.status === 201) {
                    if (xhr.responseText === 'OK') {
                        // check response text
                    }
                } else {
                    console.error(xhr.responseText);
                }
            }
        };
        xhr.open(request, data)
        xhr.send();
    }

이 방법 외에도 'axios'가 있던데 공부를 해봐야 겠다 ❗

web은 경험도 많이 없고, 필요한 기능만 참고하는 식으로 개발하였기 때문에 아직 갈 길이 먼거 같다🤦‍♀️ 그래도 알아가고 성장하는 이 순간을 즐기자.