[jQuery] 제이쿼리 ajax 예제

오늘은 제이쿼리를 이용해 ajax 통신을 진행해 보도록 하겠습니다.

ajax는 요청을 보내고 응답을 받을 때 페이지 전체가 갱신되는 것을 바뀌는 부분만 갱신해 줘 비효율을 줄여주는 라이브러리입니다.

 

1.html 코드.

<button id="bTn">appendtime</button>
<p id="time"></p>
<script>
    $('#bTn').click(function () {
        $.ajax({
            url: 'http://localhost:3000/ajax',
            success: function (data) {
                    $('#time').append('<br>'+data);
            }
        })
    })
</script>

id가 bTn인 버튼을 누르면 localhost:3000/ajax에 요청을 보내고 받은 데이터를 이용해 id가 time인 태그에 코드를 추가합니다.

 

2.node js서버 코드.

const express = require('express');
const app = express();

app.get('/ajax', function(req,res){
  let now = new Date();
  res.send(now);
})

app.listen(3000, () => {
    console.log('listen t0 3000')
})

서버 코드는 현재 시간을 보내줍니다.

 

appendtime을 누르면 다음과 같이 현재 시간이 추가됩니다.