🧩JSON
JSON이란
- 경량화된 데이터 교환 형식, 서로 다른 언어들 간 데이터를 주고 받을
수 있도록 만들어진 텍스트 기반의 형식. - 프로그래밍 언어가 아닌 데이터 표기 방법 중 하나이고 기본적으로
name : value 형태의 구조를 가지고 있다. - JSON.parse()메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다
(text에는 변환할 문자열을 전달합니다.
이때 해당 문자열은 반드시 유효한 JSON 형식의 문자열이어야 합니다.
만약 JSON 형식에 맞지 않는 문자열을 전달하면, 자바스크립트는 오류를 발생시킬 것입니다.) - parse() 메소드는 string 객체를 json 객체로 변환시켜줍니다.
🧩data2.json
{
"search_word" : [
{"rank" : "1", "name" : "코로나"},
{"rank" : "2", "name" : "비트코인"},
{"rank" : "3", "name" : "JSP"},
{"rank" : "4", "name" : "JAVA"},
{"rank" : "5", "name" : "웹개발"}
]
}
🧩json_test2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실시간 순위</title>
</head>
<body>
<h1>Ajax를 이용해 실시간 순위 나타내기</h1>
<table border="1">
<tr>
<th>실시간 검색 순위</th>
<th>키워드</th>
</tr>
<tr>
<td id="td1">순위</td>
<td id="td2">키워드</td>
</tr>
</table>
</body>
<script>
// window.onload : HTML이 다 load가 완료 됐을 떄 실행
window.onload = function() {
let obj = "";
// 배열 선언
let word = new Array();
// Ajax객체 생성
let xhr = new XMLHttpRequest();
// 요청준비
xhr.open("GET", "data2.json", true);
// 데이터 요청
xhr.send();
// 데이터 수신
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
//json객체로 변환
obj = JSON.parse(xhr.responseText);
// 오류 확인
// alert(JSON.parse(xhr.responseText));
/*
파싱된 obj에서 search_word라는 key를 가지고 있는 것을 꺼내보면
[{},{},{},{},{}](오브젝트 형태로)가 나온다. (배열 return)
*/
for (let i = 0; i < obj.search_word.length; i++) {
/*
obj.search_word 배열의 각 방에는 또 json들이 담겨있다.
(){"rank":순위, "name":검색어})
각 방의 json들에서 name키로 담겨있는 검색어를 꺼내서 word 배열의 각 방에 넣는다.
*/
word[i] = obj.search_word[i].name;
}
}
}
let i = 0;
let interval = setInterval(function(){
// 0, 1, 2, 3, 4 -> 5가 되는 순간 다시 0
i % obj.search_word.length;
document.getElementById("td1").innerHTML = i + 1;
document.getElementById("td2").innerHTML = word[i];
i++;
},2000);
// setTimeout(함수, 밀리초); : 해당 밀리초 이후에 앞에 넘겨준 함수 호출
setTimeout(function(){
// clearInterval(인터벌) : 해당 인터벌 삭제
clearInterval(interval);
}, 20000);
}
</script>
</html>🧩결과
1~5까지 순위가 간 후에 다시 1로 돌아가고 20초후 정지한다.![]
