웹페이지를 만들고 새로운 데이터를 아무런 변화없이 업데이트하기 위한 방법이다.
비동기적으로 html 구성요소를 바꾸거나 업데이트하는 등의 동작을 할 수 있다.
AJAX를 이용하여 웹페이지의 새로고침 없이 데이터를 업데이트 할 수 있다.
설정해놓은 시간대로 함수를 호출하여 자바스크립트를 실행할 수 있는 함수는 setInterval() 함수이다.
// 1000 msec 마이크로세컨드, 1초마다 setInterval 안의 함수를 자동 호출할 수 있다.
setInterval(function () {element.innerHTML += "Hello"}, 1000);
Ajax 를 사용하여 로컬의 json 파일을 불러오려고 한다.
url 에는 파일이 위치하고 있는곳을 적어준다.
원하는 파일 혹은 주소가 제대로 로딩되었다면 success 부분에서 javascript 코드들을 실행한다.
로딩에 실패했다면 error 부분에 있는 코드가 동작한다.
setInterval
<script type="text/javascript">
$(function () {
timer = setInterval(function () {
$.ajax({
// 파일의 위치, 이름
url: "data.json",
type: 'get',
datatype: "json",
// after loading data
success: function( json ) {
alert('success');
},
error: function() {
alert('error');
}
});
}, 3000);
});
</script>
clearInterval
타이머를 해제하는 함수는 clearInterval 을 사용하여 함수로 사용했던 timer 를 정지할 수 있다.
<script type="text/javascript">
// stop은 html 페이지의 버튼으로 사용하려고 넣었다.
$('#stop').click(function() {
clearInterval(timer);
});
</script>
전체 코드를 보면, body 안에 있는 info 라는 div 안에 json 파일의 데이터들을 모두 불러 1초마다 갱신한다.
소스 코드는 다음과 같다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Read</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<br>
<div id="info"></div>
<button type="button" id='start'>start</button>
<button type="button" id='stop'>stop</button> <script type="text/javascript">
var timer;
$('#start').click(function () {
timer = setInterval(function () {
$.ajax({
url: "data.json",
type: 'get',
datatype: "json",
// after loading data
success: function( json ) {
var user_info = "";
for(var i = 0; i < json.length; i++){
user_info += "<tr><td>" + (i + 1) + "</td><td>" + json[i].name + "</td><td>" + json[i].age + "</td><td>" + json[i].address +"</td><td>" + json[i].phone + "</td></tr>";
}
$('#info').html(user_info);
},
error: function() {
alert('error');
}
});
}, 3000);
});
$('#stop').click(function() {
clearInterval(timer);
});
</script>
</body>
</html>
start 버튼을 누르면 3초마다 json 파일을 불러 데이터를 테이블에 뿌려준다.
만일 정상동작하는지 확인하고 싶다면 json 파일의 데이터를 바꾸고 저장하면 실시간으로 바뀌는 것을 볼 수 있다.
그리고 동작을 멈추고 싶다면 stop 버튼을 누르면 타이머가 해제된다.
data.json
[
{
"name": "abc",
"age": 1,
"address": "seoul",
"phone": "123"
}
]
json 파일은 소스코드와 같은 폴더안에 들어가 있으면 정상 동작한다.