LANGUANGE/XML
[XML] XML데이터를 가져오기
꾸준히개발하자
2022. 3. 18. 10:30
books.xml
태그를 이용한다.
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book>
<title>겨울왕국</title>
<author>디즈니</author>
</book>
<book>
<title>이솝우화</title>
<author>미드</author>
</book>
<book>
<title>힐러리의삶</title>
<author>클린턴</author>
</book>
<book>
<title>수지의 어린시절</title>
<author>EBS</author>
</book>
</books>
getBooksXML.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=cp%>/data/js/httpRequest.js"></script>
<script type="text/javascript">
function getBookList() {
sendRequest("books.xml",null,displayBookList,"GET"); // 아쟉스는 _ok로 보냈는데 , xml은 books.xml를 만들어놔서 소스가 books.xml이다. 바로 접근가능
// null 넘어오는데이터가없고 , 콜백함수 , get방식으로 보냄
}
// 콜백함수
function displayBookList() {
if(httpRequest.readyState==4) {
if(httpRequest.status==200) {
// 전달받은 XML을 DOM객체를 넣음
var Document = httpRequest.responseXML; // XML를 반환받을때는 responseXML
//alert(Document);
// DOM 객체에서 Element추출
var booksE = Document.documentElement;
// book의 갯수 호출
var bookNL = booksE.getElementsByTagName("book"); // <book> : 태그 태그이름으로 찾는다.
//alert(bookNL.length + "개"); // books.xml에서 <book>이 4개이므로
// 전체데이터
var html = "";
html += "<ol>";
for(var i=0; i<bookNL.length;i++){ // 4 <bookNL배열
var bookE = bookNL.item(i); // var f = document.myForm 과 같은개념
// ★ ITEM은 머지
// title를 읽어낸다.겨울왕국이 0 firstChild 자식노드 값을가져옴
var titleStr = bookE
.getElementsByTagName("title")
.item(0)
.firstChild // 겨울왕국
.nodeValue;
var authorStr = bookE
.getElementsByTagName("author")
.item(0)
.firstChild // 디즈니
.nodeValue;
html += "<li>"
+ titleStr
+ " "
+ authorStr + "</li>";
}
html += "</ol>";
document.getElementById("bookDiv").innerHTML = html; // 한번에 써줄수있다.
}
}
}
window.onload = function() {
getBookList();
}
</script>
</head>
<body>
<h1 id="list">Book List</h1>
<hr/>
<div id="bookDiv" style="display: block; margin: 0 auto;"></div>
</body>
</html>
newsTitleXML_ok.jsp
( 일반적인 데이터를 xml로 읽어와서 보낸다 )
<%@page import="java.util.Date"%>
<%@page import="javax.xml.crypto.Data"%>
<%@ page contentType="text/xml; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<%!
// db에서 읽어온 데이터
String[] newsTitle = {
"[속보aaaaaaa]윤석열 부동산 정책, 집값 '대세 하락' 가속화하나",
"물가는 뛰고, 경기는 힘 빠지고…韓 경제 스태그플레이션 진입하나",
"조국사태 교훈? 尹측 靑 인사 추천만, 법무 경찰이 검증",
"'친문 전력' 김오수 어떡하나…권성동 스스로 거취 정해야",
"[강준만의 직설] '충성 경쟁'이 대통령을 망친다",
"코로나 신규확진 40만명대…정부는 감염병 등급 하향",
};
/* 위 데이터를 xml로 만들것임 */
%>
<!-- 내보내는 데이터가 xml이므로 ontentType="text/xml; 로 고침 -->
<!-- 공공데이터를 xml로 읽어와서 띄어준다. -->
<!-- result count data title 내가만들어가는 태그 -->
<result>
<count><%=newsTitle.length%></count>
<data>
<%for(int i=0;i<newsTitle.length;i++){ %>
<title><%=newsTitle[i] + "|" + new Date() %></title>
<%} %>
</data>
</result>
newsTitleXML.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=cp%>/data/js/httpRequest.js"></script>
<style type="text/css">
div{
margin: auto;
border: 1px solid #0000ff;
width: 700px;
height: 70%;
padding: 10px;
}
</style>
<title>Insert title here</title>
<script type="text/javascript">
function newsTitle() {
sendRequest("newsTitleXML_ok.jsp",null,displayNewsTitle,"GET"); // 경로 , 데이터 , 콜백함수 , 방식
setTimeout("newsTitle()",3000); // 자기자신을 3초마다 호출
}
//콜백함수
function displayNewsTitle() {
if(httpRequest.readyState==4){
if(httpRequest.status==200) {
var doc = httpRequest.responseXML;
var count = doc
.getElementsByTagName("count")
.item(0)
.firstChild
.nodeValue;
if(count>0) {
var titleNL = doc.getElementsByTagName("title");
var htmlData = "<ol>";
for(var i=0;i<titleNL.length;i++) {
htmlData += "<li>"
+ titleNL.item(i).firstChild.nodeValue;
+ "</li>";
}
htmlData += "</ol>";
var newsDiv = document.getElementById("news");
newsDiv.innerHTML = htmlData;
}
}
}
}
window.onload = function() {
newsTitle();
}
</script>
</head>
<body>
<h1>실시간 뉴스</h1>
<hr/>
<div id="news"></div>
</body>
</html>
responseXML
.getElementsByTagName("count")
.item(0)
.firstChild
.nodeValue;
로 접근하여 노드 값을 가져온다.
.item(0)은 인덱스 i에 저장된 노드를 구하게 된다 ( 0부터 시작 )