13_json_data.json
{
"search_word": [
{
"rank": "1",
"name": "JSP"
},
{
"rank": "2",
"name": "Spring"
},
{
"rank": "3",
"name": "Java"
},
{
"rank": "4",
"name": "JavaScript"
}
]
}
13_json_test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON Ajax Test</title>
</head>
<body>
<h1>JSON Ajax Test</h1>
<hr>
<table border = "1">
<tr>
<td><h3>RealTime Search Ranking</h3></td>
<td width="40%"><div id="ranking">Keyword</div></td>
</tr>
</table>
</body>
<script>
var words = new Array();
var obj = "";
var ranking = document.getElementById("ranking");
var hr = new XMLHttpRequest();
hr.open("GET", "13_json_data.json", true);
hr.send();
console.log("Send OK");
//ready state가 바뀌면 할 행동
hr.onreadystatechange = function(){ // 4=XMLHttpRequest.DONE
if( hr.readyState == 4 && hr.status == 200){
//Json -> Object :
obj = JSON.parse(hr.responseText);
console.log(obj);
for(let i=0; i<obj.search_word.length;i++){
words[i] = "[" + obj.search_word[i].rank + "]" + obj.search_word[i].name;
}
console.log(words);
}
}
var count = 0;
//주기적으로 실행하는 함수
setInterval(function(){
//ranking.innerHTML = "<h3>" + words[count%words.length] + "</h3>";
ranking.innerHTML = "<h3>" + words[count] + "</h3>";
count++;
if(count > 3) count = 0;
}, 1000);
</script>
</html>
1초마다 바뀌는 걸 확인할 수 있음
'자바 공부 > [자바] 기본 공부' 카테고리의 다른 글
| [Node.js 2일차] 이벤트 처리 함수 (0) | 2024.11.28 |
|---|---|
| [Node.js 1일차] Node.js 환경 구축 (1) | 2024.11.27 |
| [JSP 공부 4일차] AJAX (0) | 2024.11.26 |
| [JSP 공부 5일차] 세션 (0) | 2024.11.26 |
| [JSP 공부 4일차] 액션 태그, 쿠키 (0) | 2024.11.25 |