Notice
Recent Posts
Recent Comments
Link
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
Tags more
Archives
Today
Total
관리 메뉴

Formoat's Open Blog

Ajax 이용해 XML, JSON문서 데이터 가져오기 본문

Java/JavaScript & Jquery

Ajax 이용해 XML, JSON문서 데이터 가져오기

snd-snd 2019. 9. 17. 09:00

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