Ajax 요청 처리하기

Ajax란?

클라이언트 페이지에서 이루어지는 비동기방식의 데이터 요청.

즉, 다음과 같은 특징을 가진다.

• 갱신이 필요한 부분만 데이터요청이 가능하다.
• 새로고침 없이(백그라운드로) 페이지를 부분만 갱신한다.
• JSON 객체를 이용하여 통신한다.

Ajax 처리 (서버측)

Ajax는 기본적으로 데이터 요청이다.

즉, 데이터 요청을 처리하듯이 만들면 된다.

• router에 ajax를 처리할 경로를 만들고.
• res.json()을 사용하여 결과물을 전송한다. 

Ajax 요청 (클라이언트측)

• XMLHttpRequest 로 데이터를 보내고 받는다.

<script>

function sendAjax(url, data)

{

      //! 데이터를 JSON 직렬화 형태로 만든다. (stringify 사용)

      var data = { 'data' : data};

      data = JSON.stringify(data);

      //! XMLHttpRequest 객체로 통신. 

      var xhr = new XMLHttpRequest();

      xhr.open('POST', url);

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

      xhr.send(data);

      //! 데이터 수신 완료시 콜백

      xhr.addEventListener('load', function(){

            console.log(xhr.responseText);

            //! 웹 페이지를 갱신한다.

      });

}

</script>

크로스도메인 Ajax

ajax는 도메인이 다른 ajax요청을 허용하지 않는다.

이를 허용하려면 cors 외부 미들웨어를 익스프레스에 등록한다.

   npm install cors

   let cors = require('cors');

   app.use(cors());