curr.json
서버에 위와 같은 json 파일을 만들어뒀다.
이 데이터를 실시간으로 받아오려고 한다.
ajax_test.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>ajax</title>
</head>
<body onload="intervals()">
<h2>Ajax Test</h2>
<hr>
<div id="dtime"></div>
<br>
<div id="ret"></div>
<!--j쿼리 사용-->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var dtime = document.getElementById("dtime");
var ret = document.querySelector("#ret");
// 현재시각
function dt(){
var date = new Date();
dtime.innerHTML = date;
}
// ajax로 json 데이터 받아오기
function func1(){
$.ajax({
url:'curr.json', //연결할 url
type:"GET", //데이터 전송하는 방법
dataType : "JSON", //받아올 데이터 형식
success:function(response){ //성공했을 때
//console.log(response);
var cur_unit = new Array();
var cur_nm = new Array();
var deal_bas_r = new Array();
var set_txt = new Array();
for(var i=0; i<5; i++){
cur_unit[i] = response[i].cur_unit;
cur_nm[i] = response[i].cur_nm;
deal_bas_r[i] = response[i].deal_bas_r;
set_txt[i] = cur_unit[i]+'('+cur_nm[i]+') ---------- 매매 기준율 : '+deal_bas_r[i]+"<br>";
}
ret.innerHTML = set_txt[0]+set_txt[1]+set_txt[2]+set_txt[3]+set_txt[4];
},
error:function(){ //실패했을 때
ret.innerHTML = "Error!";
}
});
}
// 주기적으로 실행
function intervals(){
dt(); //현재시각
func1(); //ajax
setInterval(dt, 1000); // 1000 = 1초
setInterval(func1, 1000);
}
</script>
</body>
</html>
intervals 함수에 의해 1초마다 dt 함수와 func1 함수를 실행한다.
dt 함수는 실행될 때마다 현재시각을 받아 dtime div에 표시한다.
func1 함수는 실행될 때마다 curr.json의 데이터를 받아와 ret div에 표시한다.
curr.json 파일의 값을 수정하고 저장하면
수정된 값이 ajax_test.html에 실시간으로 반영되는 것을 볼 수 있다.
2019/08/02 - [웹프로그래밍] - Open API로 json 데이터 받아서 파싱하기 (json-simple 라이브러리)
Open API로 json 데이터 받아서 파싱하기 (json-simple 라이브러리)
API 데이터 살펴보기 한국수출입은행에서 제공하는 환율정보 API를 이용하여 json 파싱 실습을 하자. 인증키를 발급받고, 변수를 입력해서 요청 URL로 들어가보면 위와 같이 JSON 형태로 되어있음을 볼 수 있다...
thesse.tistory.com
앞서 json 데이터를 파싱할 때는 jsp로 라이브러리를 임포트해서
파서 객체를 만들고 오브젝트를 만드는 등 여러 과정이 필요했지만
ajax는 보다 손쉽게 데이터를 추출할 수 있다.
API 연결
이번에는 서버에 있는 파일이 아닌, 웹상에 있는 API를 받아오려고 한다.
구조는 curr.json 파일과 같으므로, 위 코드에서 url만 변경한다.
ajax_test.html
// ajax로 json 데이터 받아오기
function func1(){
$.ajax({
url:'https://www.koreaexim.go.kr/site/program/financial/exchangeJSON?authkey=(인증키)&searchdate=20190808&data=AP01', //연결할 url
type:"GET", //데이터 전송하는 방법
dataType : "JSON", //받아올 데이터 형식
// 중략...
});
}
연결에 실패했다.
콘솔창을 켜 에러를 보자.
CROS policy에 의해 블락되었단다.
ajax의 단점 중 하나는 크로스 도메인이 막혀있다는 것이라고 한다.
다른 도메인에서 호출할수 없게 한다는 것이다.
이를 해결하기 위한 방법이 몇가지 있는 것 같은데
jsonp, 헤더 설정 등등 대부분은 해당 데이터를 보내는 쪽의 서버 설정이 필요한 것이라고 한다.
여기서는 외부 API를 받아와야 하므로, 내 서버에 proxy를 거쳐오는 방식으로 해보았다.
ajax_proxy.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.net.*, java.io.*"%>
<%
try{
/***** 웹상에 있는 json 데이터 받아오기 *****/
//매개변수 포함하여 api 주소 만들기
String authkey = "FCtA83bkYOtOyOtqmOYSO0mytaj6Zydr";
String bDate = "20190802";
String address = "https://www.koreaexim.go.kr/site/program/financial/exchangeJSON?authkey="
+authkey+"&searchdate="+bDate+"&data=AP01";
//객체 생성 및 url 연결
URL url = new URL(address);
URLConnection urlConn = url.openConnection();
//데이터 받아오기
InputStreamReader ir = new InputStreamReader(urlConn.getInputStream());
BufferedReader br = new BufferedReader(ir);
String line;
line = br.readLine();
//출력
out.print(line);
} catch(Exception e){
out.print(e);
}
%>
여기서 jsp로 받아온 api를 json 형태 그대로 뿌려준다.
ajax_test.html은 이것을 받아오게 만든다.
ajax_test.html
// ajax로 json 데이터 받아오기
function func1(){
$.ajax({
url:'ajax_proxy.jsp', //연결할 url
type:"GET", //데이터 전송하는 방법
dataType : "JSON", //받아올 데이터 형식
// 중략...
});
}
이제는 잘 받아진다.
앞에서 한 김에 환율API를 가져다 쓰긴 했는데
사실 이 데이터는 하루에 한번만 갱신되는것이라 실시간으로 데이터가 받아지고 있는지 확인하기 힘들다.
실시간 버스위치 데이터같이 보다 자주 갱신되는 api를 써 봐야 ajax를 쓰는 보람이 있을 것 같다.
'IT > 웹프로그래밍' 카테고리의 다른 글
| react 맛보기 (node.js와 함께) (0) | 2019.08.14 |
|---|---|
| java.lang.ClassFormatError; Truncated class file (0) | 2019.08.12 |
| Open API로 json 데이터 받아서 파싱하기 (json-simple 라이브러리) (0) | 2019.08.02 |
| 세션 이용하여 로그인 구현하기, 로그인이 필요한 데이터에 접근하기. (0) | 2019.07.31 |
| HttpClient 라이브러리 사용하기 (0) | 2019.07.31 |