[AJAX] Json 데이터 불러오기

햅2024 2024. 11. 26. 21:43

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초마다 바뀌는 걸 확인할 수 있음

web.zip

0.02MB