Formoat's Open Blog
Ajax 이용해 XML, JSON문서 데이터 가져오기 본문
1. XML문서
- XML 문서는 HTML 문서와같이 트리(계층형)구조를 가지고 있다.
- XML 문서는 하나의 루트 요소로부터 시작해 각각 자식 요소로 차례대로 연결된다.
<?xml version="1.0" encoding="UTF-8"?> <!-- xml문서는 가장 첫줄에 xml문서임을 명시해야 함 -->
<school> <!-- 루트요소 -->
<subject> <!-- school의 자식이자 title, time, teacher의 부모노드 -->
<title>jsp/servlet</title> <!-- school의 자식이자 time, teacher의 형제노드 -->
<time>월~금 오전 9:00 ~ 12:50</time> <!-- school의 자식이자 title, teacher의 형제노드 -->
<teacher>최규리</teacher> <!-- school의 자식이자 title, time 형제노드 -->
</subject>
<subject>
<title>javascript/jquery</title>
<time>월~금 오후 1:40 ~ 5:30</time>
<teacher>박진경</teacher>
</subject>
</school>
2. JSON문서
- name: value 형태의 구조를 가지고 있다.
- object 형식, array 형식 두 가지 형식을 가지고 있으며, 각각 중괄호 '{}'와 대괄호 '[]'를 사용한다.
- object 형식의 경우 name의 중복이 허용되지 않는다. 만일 중복될 경우 마지막에 정의된 키값만 할당된다.
{
"school" : //name:object구조
{
"subject" : [ //name:array구조
{
"title" : "jsp/servlet", //name:string구조
"time" : "월~금 오전 9:00 ~ 12:50", //name:string구조
"teacher" : "최규리" //name:string구조
},
{
"title" : "javascript/jquery",
"time" : "월~금 오후 1:40 ~ 5:30",
"teacher" : "박진경"
}
]
}
}
//value값엔 string, number, boolean, null, object, array 형태의 값이 들어올 수 있다.
※ 참고자료
https://www.json.org/json-ko.html
<!-- 클라이언트 페이지 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스오피스 순위</title>
<style type="text/css">
body {
margin: 10px;
}
.box1 {
width: 400px;
background-color: green;
color: white;
padding: 15px;
text-align: center;
}
.box2 {
width: 400px;
background-color: white;
padding: 15px;
text-align: center;
}
#msg {
border-radius: 5px;
border: 2px solid #73AD21;
padding: 10px;
padding-left: 20px;
margin-top: 15px;
width: 400px;
height: 200px;
font-size: 14px;
text-align: left;
}
</style>
</head>
<body>
<div class="box1">일별 박스 오피스</div>
<div class="box2">
<form action="">
<input type="text" name="txtYear" id="txtYear" size="6" />년 <select
name="" id="selMon">
<option value="01">1월</option>
<option value="02">2월</option>
<option value="03">3월</option>
<option value="04">4월</option>
<option value="05">5월</option>
<option value="06">6월</option>
<option value="07">7월</option>
<option value="08">8월</option>
<option value="09">9월</option>
<option value="10">10월</option>
<option value="11">11월</option>
<option value="12">12월</option>
</select>
<select name="" id="selDay">
<option value="01">1일</option>
<option value="02">2일</option>
<option value="03">3일</option>
<option value="04">4일</option>
<option value="05">5일</option>
<option value="06">6일</option>
<option value="07">7일</option>
<option value="08">8일</option>
<option value="09">9일</option>
<option value="10">10일</option>
<option value="11">11일</option>
<option value="12">12일</option>
<option value="13">13일</option>
<option value="14">14일</option>
<option value="15">15일</option>
<option value="16">16일</option>
<option value="17">17일</option>
<option value="18">18일</option>
<option value="19">19일</option>
<option value="20">20일</option>
<option value="21">21일</option>
<option value="22">22일</option>
<option value="23">23일</option>
<option value="24">24일</option>
<option value="25">25일</option>
<option value="26">26일</option>
<option value="27">27일</option>
<option value="28">28일</option>
<option value="29">29일</option>
<option value="30">30일</option>
<option value="31">31일</option>
</select>
<input type="button" value="확인" id="bt1" />
</form>
</div>
<div id="msg"></div>
<div class="cardClear"></div>
<div class="box3"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/movie.js"></script>
</body>
</html>// xml문서의 데이터를 읽어옴
$(function(){
init();
$("#bt1").click(function(){
var url = 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/
searchDailyBoxOfficeList.xml?key=430156241533f1d058c603178cc3ca0e&targetDt=';
url += $("#txtYear").val()+$("#selMon").val()+$("#selDay").val();
console.log(url);
$.ajax({
url : url,
method : 'get',
dataType : 'xml',
success : function(item){
var str = "";
$(item).find("dailyBoxOffice").each(function() {
//순위 가져오기
str += $(this).find("rank").text()+" 위";
//증감 가져오기
var rankInten = parseInt($(this).find("rankInten").text());
if (rankInten>0) str += "(▲";
else if (rankInten<0) str += "(▼";
else str = str+"(";
str += rankInten+") : ";
var movieCd = $(this).find("movieCd").text();
var movieNm = $(this).find("movieNm").text()+"<br>";
str += "<a href='#' onclick='javascript:show("
+$(this).find("movieCd").text()+")'>"+movieNm+"</a>";
$("#msg").html(str);
})
}
})
})
})
function init(){
var newDate = new Date();
var year = newDate.getFullYear();
var month = newDate.getMonth()+1; //월 시작 0부터
var day = newDate.getDate()-1; //어제날짜
if (month<10) month = "0"+month;
if (day<10) dat = "0"+day;
$("#txtYear").val(year);
$("#selMon").val(month);
$("#selDay").val(day);
}
function show(movieCd){
var url = 'http://www.kobis.or.kr/kobisopenapi/webservice/rest
/movie/searchMovieInfo.xml?key=430156241533f1d058c603178cc3ca0e&movieCd=';
url += movieCd;
$.ajax({
url : url,
dataType : 'xml',
success : function(item){
console.log(item);
var str = "<ul>";
var movieNm = $(item).find("movieNm").text();
var movieNmEn = $(item).find("movieNmEn").text()
var showTm = $(item).find("showTm").text();
var director = $(item).find("director").find("peopleNm").text();
var people = "";
var length = $(item).find("actor").find("peopleNm").length;
$(item).find("actor").each(function(index){
if (index == length-1){
people += $(this).find("peopleNm").text();
} else {
people += $(this).find("peopleNm").text()+", ";
}
})
str += "<li>영화제목 : "+movieNm+"</li>";
str += "<li>영어제목 : "+movieNmEn+"</li>";
str += "<li>상영시간 : "+showTm+"</li>";
str += "<li>감독 : "+director+"</li>";
str += "<li>출연배우 : "+people+"</li></ul>";
$(".box3").html(str);
}
})
}// json문서의 데이터를 읽어옴
$(function(){
init();
$("#bt1").click(function(){
var url = 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice
/searchDailyBoxOfficeList.json?key=430156241533f1d058c603178cc3ca0e&targetDt=';
url += $("#txtYear").val()+$("#selMon").val()+$("#selDay").val();
console.log(url);
$.ajax({
url : url,
type : 'get',
dataType : 'json',
success : function(item){
var str = "";
$.each(item.boxOfficeResult.dailyBoxOfficeList, function(i, content) {
str += content.rank+" 위";
var rankInten = parseInt(content.rankInten);
if (rankInten>0) str += "(▲";
else if (rankInten<0) str += "(▼";
else str = str+"(";
str += rankInten+") : ";
var movieCd = content.movieCd;
var movieNm = content.movieNm+"<br>";
str += "<a href='#' onclick='
javascript:show("+content.movieCd+")'>"+movieNm+"</a>";
$("#msg").html(str);
})
}
})
})
})
function init(){
var newDate = new Date();
var year = newDate.getFullYear();
var month = newDate.getMonth()+1; //월 시작 0부터
var day = newDate.getDate()-1; //어제날짜
if (month<10) month = "0"+month;
if (day<10) dat = "0"+day;
$("#txtYear").val(year);
$("#selMon").val(month);
$("#selDay").val(day);
}
function show(movieCd){
var url = 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie
/searchMovieInfo.json?key=430156241533f1d058c603178cc3ca0e&movieCd=';
url += movieCd;
$.ajax({
url : url,
dataType : 'json',
success : function(item){
console.log(item);
var str = "<ul>";
var movieInfo = item.movieInfoResult.movieInfo;
var movieNm = movieInfo.movieNm;
var movieNmEn = movieInfo.movieNmEn;
var showTm = movieInfo.showTm;
var director = movieInfo.directors[0].peopleNm;
var people = "";
var length = movieInfo.actors.length;
$.each(movieInfo.actors, function(i, content) {
if (i == length-1)
people += content.peopleNm;
else
people += content.peopleNm+", ";
})
str += "<li>영화제목 : "+movieNm+"</li>";
str += "<li>영어제목 : "+movieNmEn+"</li>";
str += "<li>상영시간 : "+showTm+"</li>";
str += "<li>감독 : "+director+"</li>";
str += "<li>출연배우 : "+people+"</li></ul>";
$(".box3").html(str);
}
})
}
한국영화진흥위원회 API를 이용해 박스오피스 순위 등 데이터를 xml, json문서로 각각 가져와 화면에 뿌려본 예제이다.
'Java > JavaScript & Jquery' 카테고리의 다른 글
| Ajax 이용해 데이터 베이스 접근 (0) | 2019.09.17 |
|---|---|
| Ajax (Asynchronous JavaScript and XML) (0) | 2019.09.16 |
| 정규 표현식(Regular Expression) (0) | 2019.09.16 |
| 예외 처리 (0) | 2019.09.16 |
| 이벤트 처리 (0) | 2019.09.16 |
'Java/JavaScript & Jquery' Related Articles
more
Comments