📌 개요
{ "search_word":[ {"rank" : "1", "name" : "코로나"}, {"rank" : "2", "name" : "비트코인"}, {"rank" : "3", "name" : "JSP"}, {"rank" : "4", "name" : "JAVA"}, {"rank" : "5", "name" : "웹개발"} ] }
상단의 .json* 파일을 통해 데이터를 가져오고,
Ajax - XMLHttpRequest 객체 와 setInterval 함수를 통해
일부 페이지 영역에 실시간으로 rank 의 value 값과 name 의 value 값을
지속적으로 변환하여 데이터를 응답하는 프로그래밍
📌 코드
<%@ 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(); let xhr = new XMLHttpRequest(); xhr.open("GET", "data2.json", true); xhr.send(); xhr.onreadystatechange = function(){ if( xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200 ){ obj = JSON.parse( xhr.responseText ); /* JSON.parse = JSON 파일 내에 Key 값을 조회하고 해당 key 값의 value 를 [] 배열 타입으로 리턴 받고 let obj 변수에 저장한다 - obj = "search_word":[ {"rank" : "1", "name" : "코로나"}, {"rank" : "2", "name" : "비트코인"}, {"rank" : "3", "name" : "JSP"}, {"rank" : "4", "name" : "JAVA"}, {"rank" : "5", "name" : "웹개발"} ] */ // 저장된 배열 변수 obj 를 for문 을 통해 꺼내기 for(let i=0; i<obj.search_word.length; i++ ){ /* obj.search_word[] 안에 rank 라는 key 값과 name 이라는 key 값이 존재. 그 중에서 name 의 value 값만 가져와 word[i] 배열에 담는다. */ word[i] = obj.search_word[i].name; } } } let i = 0; let interval = setInterval(function(){ /* 0 부터 최대길이 까지 조정하고, 최대길이에 도착하면 다시 0 으로 변환 해 무한 루프 생성 */ i = i % obj.search_word.length; document.getElementById("td1").innerHTML = i + 1; document.getElementById("td2").innerHTML = word[i]; i++; },2000); // 특정 시간이 되면 setInterval 종료하기 setTimeout(function(){ clearInterval(interval); },20000); } </script> </html>
Hyobin12