Ajax를 활용한 비동기 데이터 처리

JSON과 AJAX를 이용한 비동기 통신

앞에서 작성한 form.html에 이어서 작성 한다.

body 태그 내에 함수를 호출 할 버튼과 데이터를 받아서 출력해줄 태그를 만들었다.

 <button class="ajax">send </button>
 
  <div>받은 email</div>
  <div class="result"></div>

  <div>입력한 이름</div>
  <div class="name"></div>
  
<script>
    document.querySelector('.ajax').addEventListener('click', function() {
      // event등록 
      
      var inputdata = document.forms[0].elements[0].value;
      // 입력한 email의 value (0번째 폼의, 0번째 요소의 값)
      
      var inputName = document.forms[0].elements[1].value;
	  // 강의를 본 후 복습의 의미로 하나 더 추가 했다.
      
      var inputArr = {
        email : inputdata,
        name : inputName
      };
      // data를 보낼 때, 여러 데이터를 보내기 위해 키: 벨류 로 꺼내 쓸 수 있는 객체를 이용

      sendAjax('/ajax_send_email', inputArr); 
      // 통신을 할 함수의 파라미터로 데이터를 넣어준다.
    })

    function sendAjax(url, data){
      var data = {'email' : data.email, 'name' : data.name };
      // 지금 블로그에 정리를 하며, 이 과정이 필요 했을까? 하는 생각이 든다. 
      // name을 추가하기 전에는 email이 json형태가 아닌 그냥 변수에 담긴 값이여서
      // 이 과정이 필요 했지만, 애초에 객체로 데이터를 보내는 형식으로 바꿔 필요 없어짐.
      
   // console.log('#### snedAjax data: ', data)
   // console.log('#### type of : ', typeof data)

      data = JSON.stringify(data);
   // console.log('#### JSON.stringify: ', data)
   // console.log('#### type of : ', typeof data)

      var xhr = new XMLHttpRequest();
      // XMLHttpRequest객체 생성 

      xhr.open('POST', url);
      // open의 첫 파라미터는 methods를 적는다. post인지 get 인지

      xhr.setRequestHeader('Content-Type', 'application/json');
      // server로 보낼 때 json 타입으로 보내겠다.

      xhr.send(data);

      xhr.addEventListener('load', function() {
        // 응답이 제대로 load 될 때 호출 될 함수
        var result = JSON.parse(xhr.responseText);
        
        if(result.result == 'ok' && result.email != '' && result.name != '' ) return;
        // 간단하게 유효성 검사, 빈 값이 들어오면 걸리도록
        
        document.querySelector('.result').innerHTML = result.email
        document.querySelector('.name').innerHTML = result.name
      });

    }
</script>

이렇게 작성 해주고, app.js에서 요청을 받아 처리하면 된다.

app.js에 내용을 작성 해보자.

app.post('/ajax_send_email', function(req,res){
  console.log('#### request.body : ', req.body)
  var resData= {'result': 'OK', 'email' : req.body.email, 'name' : req.body.name}
  res.json(resData)
})

새로고침 되지 않고 잘 비동기 처리가 된다.

근데 문제가 있다.

XMLHttpRequest를 처음 봤다는 것

XMLHttpRequest 란?

HTTP를 통해서 쉽게 데이터를 주고 받을 수 있게 해주는 오브젝트를 제공해준다.
Ajax로 실행되는 HTTP 통신도 XMLHttpRequest 규격을 이용하고 있다.

데이터 통신에 이용되는 객체 라고 생각해야겠다.

How to use?

위의 코드에서도 본 것 처럼, 4단계를 거쳐 사용한다.
1. XMLHttpRequest()를 통해 객체 생성
2. open()
3. setRequestHeader()
4. send()

xhr.setRequestHeader('Content-Type', 'application/json');

// json이 아니고 form 자체를 보낼 때는 따로 설정 해주지 않아도 
// multipart/form-data로 변경 된다고 한다. 
// 난 왜 귀찮게 각자 하나씩 바꿔서 보낸걸까 

var data = {
	email : email,
    name : name
}

send(data);