[NodeJS] AJAX 처리

AJAX 처리

전체 페이지가 아닌 부분적인 영역에 대한 새로고침을 위해 AJAX가 사용된다.

이 때문에 최신 웹페이지에는 AJAX에 대한 중요성이 점점 증가 하고 있다.

 

AJAX에 대한 기능 구현을 예제로 살펴보도록 하자

<button class="ajaxsend">ajaxsend</button>                                                                  

먼저 앞서 만들어 두었던 form.html 파일에 button을 추가해준다.

document.querySelector('.ajaxsend').addEventListener("click",function(){
        var inputdata = document.forms[0].elements[0].value;
        sendAjax('http://127.0.0.1:3000/ajax_send_email', inputdata);                                        
      })
 

 

다음으로 하단에 script 태그를 만들어주고, 

그 안에 다음과 같은 이벤트 리스너를 구현한다

forms는 전체 DOM중에 form을 배열로 만든것이고 

elements는 선택된 form 내부의 elements를 배열로 만든것이다.

현재 inputdata 안에 들어있는 값은 /send_email  form의 email값이다.

ajax요청을 보낼 주소와 data 값을 sendAjax의 인자값으로 넘긴다

sendAjax는 직접 만든 함수이다.

function sendAjax(url, data){
        var data = {'email' : data};
        data =  JSON.stringify(data);
 
        var oReq = new XMLHttpRequest();
        oReq.open('POST', url);
        oReq.setRequestHeader('Content-Type', "application/json")// json 형태로 보낸다
        oReq.send(data);
        oReq.addEventListener('load', function(){
          var result = JSON.parse(oReq.responseText);
          document.querySelector('.result').innerHTML = result.email;                                       
        })
 

sendAjax의 소스이다.

email을 받아서 데이터 값을 json으로 만들어준다.

서버에게 ajax로 요청을 보내고 요청이 돌아오면 이벤트가 발생하게된다.

이벤트 내부의 내용은 .result안에 결과 값으로 받은 email을 출력하는 것이다.

app.post('/ajax_send_email', function(req, res){
  var responseData = {'result': 'ok', 'email':req.body.email};                                               
  res.json(responseData);
});
 

다음은 서버쪽 소스이다.

/ajax_send_email으로 요청이 오면 json으로 데이터를 만들어 다시 반환한다.

 res.json을 사용하면 json 형식을 별도의 변환 없이 바로 보낼 수 있다.

email을 입력한 후 ajaxsend 버튼을 클릭한다.

버튼 아래에 위치한 .result에 email값이 들어간다.