💡 데이터 포맷
- 바이너리 데이터
- 메타 데이터를 포함하면서 0과 1의 단순한 나열로 이루어진 파일
- 해당 파일을 읽을 수 있는 특정 애플리케이션에서만 실행 가능
- ex. word, ppt, 한글 등
- 보안성에는 좋으나 호환성에는 좋지 않음
- 텍스트 데이터
- 표준화된 문자 표현 방법에 의해 저장된 파일
- 모든 응용 프로그램에서 해석 가능
💡 CSV vs XML 문서
- CSV : 비구조적 문서
- 작성자의 스타일에 따라 작성된 문서
- 내용과 구조, 표현이 복합되어진 형태
- XML : 구조적 문서
- 내용과 구조, 표현의 관점에서 문서가 분리되어져 있는 형태
- 입력, 편집, 출판 등 작업의 시간적, 공간적 분리
- 유통, 배포의 용이성
- 정확한 정보 검색, 출판의 다양성
📌 마크업
- 텍스트데이터의 구조적 문서 표현 방법 (텍스트 기반 메타데이터 표현, 문서의 논리적인 구조 표현)
- HTML : 웹에서 문서를 표현하기 위한 마크업 언어
- 장점 : 구현이 쉽고 이로 인해 생산성 증가
- 단점 : 고정된 태그 집합, 디스플레이(출력) 기능에 치중 (다양한 비즈니스 데이터 표현 불가능)
📕 html 형식의 값 전달
-
html_two.jsp 문서를 AJAX 기능으로 요청하여 HTML 형식의 문서로 응답 받아 태그를 변경하여 클라이언트에게 전달하는 JSP 문서
- 문제점) 다른 웹프로그램에서 JSP 문서(html_two.jsp)를 AJAX 기능으로 요청하여 응답받아 사용하기 불편
- 해결법) AJAX 기능으로 요청하는 JSP 문서는 실행 결과를 HTML 문서가 아닌 데이타가 저장된 문서 형식(CSV, XML, JSON 등)으로 응답되도록 처리 : Rest(RePresentaional State Transfer) API
- 웹프로그램에 대한 처리 결과값만 제공받아 HTML 태그로 변환(Parsing)하여 응답 처리
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/xhr.js"></script>
<style type="text/css">
#newsList {
width: 50%;
margin: 0 auto;
}
#newsHead {
padding: 5px;
text-align: center;
font-size: x-large;
border: 2px solid black;
}
#newsContent {
padding: 5px;
font-size: medium;
border: 2px dashed black;
display: none;
}
</style>
</head>
<body>
<h1>헤드라인 뉴스</h1>
<hr>
<div id="newsList">
<div id="newsHead">헤드라인 뉴스</div>
<div id="newsContent">
<%--
<ol>
<li>뉴스제목-1[언론사-1]</li>
<li>뉴스제목-2[언론사-2]</li>
<li>뉴스제목-3[언론사-3]</li>
<li>뉴스제목-4[언론사-4]</li>
<li>뉴스제목-5[언론사-5]</li>
</ol>
--%>
</div>
</div>
<script type="text/javascript">
document.getElementById("newsList").onmouseover=function() {
//AJAX 기능을 사용하여 웹프로그램을 요청하여 응답결과를 제공받아 처리
sendRequest("get", "html_two.jsp", null, function() {
if(xhr.readyState==4) {
if(xhr.status==200) {
document.getElementById("newsContent").innerHTML=xhr.responseText;
} else {
alert("에러코드 = "+xhr.status);
}
}
});
document.getElementById("newsContent").style="display: block;";
}
document.getElementById("newsList").onmouseout=function() {
document.getElementById("newsContent").style="display: none;";
}
</script>
</body>
</html>
🐣 html 형식의 데이터
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
<ol>
<li>현아-던, 입술에 커플 피어싱 '반짝'…결별 2달 만에 재결합 시그널인가[스포티비뉴스]</li>
<li>이보영 연기력이 아깝다…'재벌집 막내딸' 변신 실패한 손나은[텐아시아]</li>
<li>‘주영훈♥’ 이윤미 “국내 자산가 1위부터 10위까지 회장님들과 친해” (동상이몽2)[뉴스엔]</li>
<li>11기 현숙 "앞트임하고 쌍꺼풀 진해져…'보아 닮은꼴' 감사"[엑스포츠뉴스]</li>
<li>'김희애 아들' 전진서, 소속사 찾았다..이지훈x엄현경과 한솥밥[OSEN]</li>
</ol>
</body>
</html>
📕 csv 형식의 값 전달
-
csv_two.jsp 문서를 AJAX 기능으로 요청하여 CSV 형식의 데이타로 응답 받아 태그로 변경하여 클라이언트에게 전달하는 JSP 문서
-
CSV 형식의 데이타를 제공받아 HTML 태그로 변환하여 페이지의 요소 변경 - 파싱(Parsing) 처리
-
CSV(Comma Separated Values) : 콤마(,)를 사용하여 값을 구분하는 (비구조적인 데이타 표현 방식
- csv 문제점 : 값을 구조적으로 표현 불가
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/xhr.js"></script>
<style type="text/css">
#newsList {
width: 50%;
margin: 0 auto;
}
#newsHead {
padding: 5px;
text-align: center;
font-size: x-large;
border: 2px solid black;
}
#newsContent {
padding: 5px;
font-size: medium;
border: 2px dashed black;
display: none;
}
</style>
</head>
<body>
<h1>헤드라인 뉴스</h1>
<hr>
<div id="newsList">
<div id="newsHead">헤드라인 뉴스</div>
<div id="newsContent">
<%--
<ol>
<li>뉴스제목-1[언론사-1]</li>
<li>뉴스제목-2[언론사-2]</li>
<li>뉴스제목-3[언론사-3]</li>
<li>뉴스제목-4[언론사-4]</li>
<li>뉴스제목-5[언론사-5]</li>
</ol>
--%>
</div>
</div>
<script type="text/javascript">
document.getElementById("newsList").onmouseover=function() {
//AJAX 기능을 사용하여 웹프로그램을 요청하여 응답결과를 제공받아 처리
sendRequest("get", "csv_two.jsp", null, function() {
if(xhr.readyState==4) {
if(xhr.status==200) {
//document.getElementById("newsContent").innerHTML=xhr.responseText;
var csv=xhr.responseText;
//행(뉴스)을 분리하여 반환되는 Array 객체를 변수에 저장
var newsArray=csv.split("*");
//alert(newsArray.length);
var html="<ol>";
for(i=0;i<newsArray.length;i++) {
//열(제목과 언론사)을 분리하여 반환되는 Array 객체를 변수에 저장
var news=newsArray[i].split("|");
var title=news[0].trim();//Array 객체의 0번째 요소값 >> 제목
var publishar=news[1].trim();//Array 객체의 1번째 요소값 >> 언론사
html+="<li>"+title+"["+publishar+"]</li>";
}
html+="</ol>";
document.getElementById("newsContent").innerHTML=html;
} else {
alert("에러코드 = "+xhr.status);
}
}
});
document.getElementById("newsContent").style="display: block;";
}
document.getElementById("newsList").onmouseout=function() {
document.getElementById("newsContent").style="display: none;";
}
</script>
</body>
</html>
🐣 csv 형식의 데이터
- 요청에 의해 실행 결과를 CSV 형식의 데이타로 응답하는 JSP 문서
- 뉴스 제목과 언론사를 , 문자 대신 | 문자를 사용하여 구분
- 뉴스와 뉴스는 엔터(Enter) 대신 * 문자를 사용하여 구분
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
서동욱·박용택 환상의 팀플레이 '히트 앤드 런' | JTBC*
오늘의 고민犬인 삼대장을 만나기 위해 출동한 강 훈련사! | KBS*
자꾸 세대 억까()하는 권율 함은정 역시 선배릠 | tvN*
'김희애 아들' 전진서, 소속사 찾았다..이지훈x엄현경과 한솥밥 | OSEN*
"선 넘었다"..아내는 시부모 앞 남편 멱살→며느리에 "ADHD" 막말 '충격' | 텐아시아*
현아-던, 입술에 커플 피어싱 '반짝'…결별 2달 만에 재결합 시그널인가 | 스포티비뉴스
🌼 XML
-
XML(Extensible Markup Language) : 인터넷 환경에서 구조화된 문서를 전송 가능하도록 설계된 표준 마크업 언어
- 호환성 : 표준 규약을 따르기 때문에 작성 규칙만 지키면 어디에서든지 사용 가능
- 독립성 : 하드웨어, 운영체제, 프로그래밍 언어에 독립적
- 확장성 : XML문서의 작성자가 새로운 태그를 정의해서 사용할 수 있기 때문에 다양한 형태의 XML문서 작성이 가능
- 다양한 포맷으로 변경 가능 (내용과 표현이 분리된 구조화된 문서로써 여러 가지 표현이 가능)
- 검색 능력의 향상 (XML태그는 논리적인 구조와 내용을 기술)
-
XML 파서 : XML 문서를 해석한 후 XML 응용프로그램에 인터페이스를 제공
- XML 데이터 작성 시 선언문 필수, contentType 수정 필수!
<?xml version="1.0" encoding="utf-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8"%>
📙 XML 형식의 값 전달
-
xml_two.jsp 문서를 AJAX 기능으로 요청하여 XML 형식의 문서로 응답 받아 태그로 변경하여 클라이언트에게 전달하는 JSP 문서
-
XML 형식의 데이타를 제공받아 HTML 태그로 변환하여 페이지의 요소 변경 - 파싱(Parsing) 처리
-
XML(eXtensible Markup Language) : 엘리먼트(태그)를 사용하여 값을 구분하는 구조적인 데이타 표현 방식
-
XMLHttpRequest 객체의 responseXML 속성(Property)으로 요청에 대한 응답 결과를 XML 문서로 제공받아 변수에 저장
var xmlDoc=xhr.responseXML;
-
Document.getElementsByTagName(tagName) : Document 객체(Element 객체)에서 태그명을 이용하여 태그를 검색해 검색된 태그에 대한 Element 객체들이 저장된 NodeList 객체(HTMLCollection 객체)를 반환하는 메소드
var title=news.getElementsByTagName("title").item(0).firstChild.nodeValue;
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/xhr.js"></script>
<style type="text/css">
#newsList {
width: 50%;
margin: 0 auto;
}
#newsHead {
padding: 5px;
text-align: center;
font-size: x-large;
border: 2px solid black;
}
#newsContent {
padding: 5px;
font-size: medium;
border: 2px dashed black;
display: none;
}
</style>
</head>
<body>
<h1>헤드라인 뉴스</h1>
<hr>
<div id="newsList">
<div id="newsHead">헤드라인 뉴스</div>
<div id="newsContent">
<%--
<ol>
<li>뉴스제목-1[언론사-1]</li>
<li>뉴스제목-2[언론사-2]</li>
<li>뉴스제목-3[언론사-3]</li>
<li>뉴스제목-4[언론사-4]</li>
<li>뉴스제목-5[언론사-5]</li>
</ol>
--%>
</div>
</div>
<script type="text/javascript">
document.getElementById("newsList").onmouseover=function() {
//AJAX 기능을 사용하여 웹프로그램을 요청하여 응답결과를 제공받아 처리
sendRequest("get", "xml_two.jsp", null, function() {
if(xhr.readyState==4) {
if(xhr.status==200) {
//XMLHttpRequest 객체의 responseXML 속성(Property)으로 요청에 대한
//응답 결과를 XML 문서로 제공받아 변수에 저장
var xmlDoc=xhr.responseXML;
//alert(xmlDoc);//[object XMLDocument]
//Document.getElementsByTagName(tagName) : Document 객체(Element 객체)에서
//태그명을 이용하여 태그를 검색해 검색된 태그에 대한 Element 객체들이 저장된
//NodeList 객체(HTMLCollection 객체)를 반환하는 메소드
var newsList=xmlDoc.getElementsByTagName("news");
//alert(newsList);//[object HTMLCollection]
//alert(newsList.length);
var html="<ol>";
for(i=0;i<newsList.length;i++) {
//NodeList.item(index) : NodeList 객체에서 첨자(Index) 위치의 Element 객체를 반환하는 메소드
var news=newsList.item(i);
//alert(news);//[object Element]
var title=news.getElementsByTagName("title").item(0).firstChild.nodeValue;
var publisher=news.getElementsByTagName("publisher").item(0).firstChild.nodeValue;
html+="<li>"+title+"["+publisher+"]</li>";
}
html+="</ol>";
document.getElementById("newsContent").innerHTML=html;
} else {
alert("에러코드 = "+xhr.status);
}
}
});
document.getElementById("newsContent").style="display: block;";
}
document.getElementById("newsList").onmouseout=function() {
document.getElementById("newsContent").style="display: none;";
}
</script>
</body>
</html>
🐣 xml 형식의 데이터
-
요청에 의해 실행 결과를 XML 형식의 데이타로 응답하는 JSP 문서
- 엘리먼트(태그)를 사용하여 값 표현
-
<?xml version="1.0" encoding="utf-8"?>필수
<?xml version="1.0" encoding="utf-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<newslist>
<news>
<title>현아-던, 입술에 커플 피어싱 '반짝'…결별 2달 만에 재결합 시그널인가</title>
<publisher>스포티비뉴스</publisher>
</news>
<news>
<title>이보영 연기력이 아깝다…'재벌집 막내딸' 변신 실패한 손나은</title>
<publisher>텐아시아</publisher>
</news>
<news>
<title>‘주영훈♥’ 이윤미 “국내 자산가 1위부터 10위까지 회장님들과 친해” (동상이몽2)</title>
<publisher>뉴스엔</publisher>
</news>
<news>
<title>11기 현숙 "앞트임하고 쌍꺼풀 진해져…'보아 닮은꼴' 감사"</title>
<publisher>엑스포츠뉴스</publisher>
</news>
<news>
<title>'김희애 아들' 전진서, 소속사 찾았다..이지훈x엄현경과 한솥밥</title>
<publisher>OSEN</publisher>
</news>
</newslist>
📌 XML & JSON 장단점
-
XML
- 장점 : 작성하기 간편, 읽기 쉬움, 명확한 값 구분
- 단점 : 하나의 데이터를 정의하기 위한 부수적인 정의가 너무 많이 필요 (치명적 단점), 파싱하기 어려움
-
JSON
- 단점 : 대용량을 전달하기 어려움
📒 JSON 형식의 값 전달
-
json_two.jsp 문서를 AJAX 기능으로 요청하여 JSON 형식의 문서로 응답 받아 태그로 변경하여 클라이언트에게 전달하는 JSP 문서
-
JSON 형식의 데이타를 제공받아 HTML 태그로 변환하여 페이지의 요소 변경 - 파싱(Parsing) 처리
-
JSON(JavaScript Object Notation) : 자바스트립트로 객체를 표현하는 방법을 사용하여 값을 구분하는 구조적인 데이타 표현 방식 (자바스크립트를 객체형으로 표현하는 것)
-
eval(text) : 문자값을 전달받아 자바스크립트 명령으로 실행하는 함수
- 문자값을 전달받아 자바스크립트 객체로 변환하기 위해 () 연산자 추가
var result=eval("("+xhr.responseText+")");
-
JSON.parse(json) : JSON 형식으로 표현된 데이타를 자바스크립트 객체로 변환하여 반환하는 메소드
var result=JSON.parse(xhr.responseText);
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/xhr.js"></script>
<style type="text/css">
#newsList {
width: 50%;
margin: 0 auto;
}
#newsHead {
padding: 5px;
text-align: center;
font-size: x-large;
border: 2px solid black;
}
#newsContent {
padding: 5px;
font-size: medium;
border: 2px dashed black;
display: none;
}
</style>
</head>
<body>
<h1>헤드라인 뉴스</h1>
<hr>
<div id="newsList">
<div id="newsHead">헤드라인 뉴스</div>
<div id="newsContent">
<%--
<ol>
<li>뉴스제목-1[언론사-1]</li>
<li>뉴스제목-2[언론사-2]</li>
<li>뉴스제목-3[언론사-3]</li>
<li>뉴스제목-4[언론사-4]</li>
<li>뉴스제목-5[언론사-5]</li>
</ol>
--%>
</div>
</div>
<script type="text/javascript">
document.getElementById("newsList").onmouseover=function() {
//AJAX 기능을 사용하여 웹프로그램을 요청하여 응답결과를 제공받아 처리
sendRequest("get", "json_two.jsp", null, function() {
if(xhr.readyState==4) {
if(xhr.status==200) {
//eval(text) : 문자값을 전달받아 자바스크립트 명령으로 실행하는 함수
// => 문자값을 전달받아 자바스크립트 객체로 변환하기 위해 () 연산자 추가
//var result=eval("("+xhr.responseText+")");
//JSON.parse(json) : JSON 형식으로 표현된 데이타를 자바스크립트 객체로 변환하여 반환하는 메소드
var result=JSON.parse(xhr.responseText);
//alert(result);//[object Array]
var html="<ol>";
for(i=0;i<result.length;i++) {
var title=result[i].title;
var publisher=result[i].publisher;
html+="<li>"+title+"["+publisher+"]</li>";
}
html+="</ol>";
document.getElementById("newsContent").innerHTML=html;
} else {
alert("에러코드 = "+xhr.status);
}
}
});
document.getElementById("newsContent").style="display: block;";
}
document.getElementById("newsList").onmouseout=function() {
document.getElementById("newsContent").style="display: none;";
}
</script>
</body>
</html>
🐣 JSON 형식의 데이터
-
요청에 의해 실행 결과를 JSON 형식의 데이타로 응답하는 JSP 문서
-
크롬(Chrome) 앱스토어에서 JSON Viewer 프로그램을 브라우저에 설치하여 실행
-
{} : object 객체 , [] : array 객체
- 크롬 웹 스토어에서 JSON Viewer 프로그램을 브라우저에 설치해야 실행 가능
- 크롬 웹 스토어에서 JSON Viewer 프로그램을 브라우저에 설치해야 실행 가능
-
object 객체 5개 속성으로 title과 publisher
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
[{"title":"현아-던, 입술에 커플 피어싱 '반짝'…결별 2달 만에 재결합 시그널인가","publisher":"스포티비뉴스"}
,{"title":"이보영 연기력이 아깝다…'재벌집 막내딸' 변신 실패한 손나은","publisher":"텐아시아"}
,{"title":"‘주영훈♥’ 이윤미 “국내 자산가 1위부터 10위까지 회장님들과 친해” (동상이몽2)","publisher":"뉴스엔"}
,{"title":"11기 현숙 \"앞트임하고 쌍꺼풀 진해져…'보아 닮은꼴' 감사\"","publisher":"엑스포츠뉴스"}
,{"title":"'김희애 아들' 전진서, 소속사 찾았다..이지훈x엄현경과 한솥밥","publisher":"OSEN"}]
📗 XSL문서로 XML데이터 응답1
-
books.jsp 문서를 AJAX 기능으로 요청하여 XML 형식의 문서로 응답 받아 태그로 변경하여 클라이언트에게 전달하는 JSP 문서
- XSL 문서를 이용하여 XML 형식의 데이타를 HTML 태그로 변환하여 응답 처리
- books.xsl 문서를 AJAX 기능으로 요청하여 XSL 문서를 응답받아 사용
- 처리결과를 받아서 저장해야하는데 처리결과를 받기 전에 실행될경우 결과 값 null
-
AJAX 기능을 제공받기 위해 자바스크립트 모듈(xhr.js - 전역변수와 함수) 사용
- 하나의 XMLHttpRequest 객체를 사용하여 요청과 응답 처리 (다수의 웹프로그램 동시 요청 불가능)
- XSLT를 사용하여 XML 문서를 제공받아 HTML 문서로 변환하여 페이지를 변경하는 함수 생성
- XSLTProcessor 객체 생성 - XSLT를 이용하여 XML 문서를 변환하기 위한 기능을 제공하는 객체
var xsltProcessor=new XSLTProcessor();- XSTLProcessor.importStylesheet(xslt) : XSLTProcessor 객체에 변환 관련 정보가 저장된 XMLDocument 객체(XSLT)를 저장하기 위한 메소드
xsltProcessor.importStylesheet(xslDoc);- XSTLProcessor.transformToFragment(xml, document) : XML 문서를 전달받아 XSTLProcessor 객체에 저장된 변환 관련 정보(XSLT)를 사용하여 document 객체의 자식 Element 객체로 반환하는 메소드
var fragment=xsltProcessor.transformToFragment(xmlDoc, document);- 반환받은 Element 객체를 특정 태그의 마지막 자식 태그로 추가하여 출력 처리
document.getElementById("books").appendChild(fragment);
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/xhr.js"></script>
</head>
<body>
<h1>교재목록</h1>
<hr>
<div id="books"></div>
<script type="text/javascript">
var xmlDoc=null;//XML 문서에 저장된 값을 저장하기 위한 전역변수
var xslDoc=null;//XSL 문서에 저장된 값을 저장하기 위한 전역변수
//books.jsp 문서를 AJAX 기능으로 요청하여 XML 문서로 응답받은 결과를 전역변수에 저장하는 함수
function loadBooksXML() {
sendRequest("get", "books.jsp", null, function() {
if(xhr.readyState==4) {
if(xhr.status==200) {
xmlDoc=xhr.responseXML;
loadBooksXSL();
} else {
alert("에러코드 = "+xhr.status);
}
}
});
}
//books.xsl 문서를 AJAX 기능으로 요청하여 XSL 문서로 응답받은 결과를 전역변수에 저장하는 함수
function loadBooksXSL() {
sendRequest("get", "books.xsl", null, function() {
if(xhr.readyState==4) {
if(xhr.status==200) {
xslDoc=xhr.responseXML;
doXSLT();
} else {
alert("에러코드 = "+xhr.status);
}
}
});
}
//XSLT를 사용하여 XML 문서를 제공받아 HTML 문서로 변환하여 페이지를 변경하는 함수
function doXSLT() {
//alert(xmlDoc+" : "+xslDoc);
//XSLTProcessor 객체 생성 - XSLT를 이용하여 XML 문서를 변환하기 위한 기능을 제공하는 객체
var xsltProcessor=new XSLTProcessor();
//XSTLProcessor.importStylesheet(xslt) : XSLTProcessor 객체에 변환 관련 정보가 저장된
//XMLDocument 객체(XSLT)를 저장하기 위한 메소드
xsltProcessor.importStylesheet(xslDoc);
//XSTLProcessor.transformToFragment(xml, document) : XML 문서를 전달받아 XSTLProcessor 객체에
//저장된 변환 관련 정보(XSLT)를 사용하여 document 객체의 자식 Element 객체로 반환하는 메소드
var fragment=xsltProcessor.transformToFragment(xmlDoc, document);
//반환받은 Element 객체를 특정 태그의 마지막 자식 태그로 추가하여 출력 처리
document.getElementById("books").appendChild(fragment);
}
loadBooksXML();
//loadBooksXSL();
//doXSLT();
</script>
</body>
</html>
🐣 xml 형식의 데이터
<?xml version="1.0" encoding="utf-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<books>
<book>
<title>Java의 정석</title>
<author>남궁성</author>
</book>
<book>
<title>JSP 웹프로그래밍</title>
<author>오정임</author>
</book>
<book>
<title>스프링 입문</title>
<author>유이치</author>
</book>
</books>
🐣 xsl 형식의 데이터
- XSL 파일 생성
- 마우스 오른쪽 버튼 → new → other → XML → XSL → next → 이름 생성 후 finish
-
XSL 문서 : XSLT 정보를 저장한 XML 문서
- XSLT(eXtensible Stylesheet Language Template) : XML 기반의 언어로 작성된 파서(Parser)
- XML 문서를 전달받아 HTML 또는 XML 문서로 변환하는 정보 제공
-
<xsl:output method="html" encoding="utf-8"/>- output : XML 문서를 전달받아 변환하여 제공되는 문서의 형식을 설정하는 엘리먼트
- method 속성 : 변환 결과로 생성되는 문서의 형식을 속성값으로 설정 (기본 : xml)
- encoding 속성 : 문서에서 사용하는 문자형태(캐릭터셋)을 속성값으로 설정 (기본 : iso-8859-1)
-
<xsl:template match="books">- template : XML 문서를 변환하기 위한 정보를 제공하는 엘리먼트
- match 속성 : XML 문서의 루트 엘리먼트를 속성값으로 설정
-
<xsl:for-each select="book">- for-each : XML 문서의 엘리먼트(태그)를 반복처리 하기 위한 엘리먼트
- select 속성 : 반복처리하기 위한 엘리먼트의 이름(태그명)을 속성값으로 설정
<li><b><xsl:value-of select="title"/></b>[<xsl:value-of select="author"/>]</li>- value-of : XML 문서의 엘리먼트 내용(값)을 반환받기 위한 엘리먼트
- select 속성 : 반환받기 위한 값의 엘리먼트의 이름(태그명)을 속성값으로 설정
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- output : XML 문서를 전달받아 변환하여 제공되는 문서의 형식을 설정하는 엘리먼트 -->
<!-- method 속성 : 변환 결과로 생성되는 문서의 형식을 속성값으로 설정 - 기본 : xml -->
<!-- encoding 속성 : 문서에서 사용하는 문자형태(캐릭터셋)을 속성값으로 설정 - 기본 : iso-8859-1 -->
<xsl:output method="html" encoding="utf-8"/>
<!-- template : XML 문서를 변환하기 위한 정보를 제공하는 엘리먼트 -->
<!-- match 속성 : XML 문서의 루트 엘리먼트를 속성값으로 설정 -->
<xsl:template match="books">
<!-- 처리 결과로 생성되는 문서에 대한 스타일 작성 -->
<ol>
<!-- for-each : XML 문서의 엘리먼트(태그)를 반복처리 하기 위한 엘리먼트 -->
<!-- select 속성 : 반복처리하기 위한 엘리먼트의 이름(태그명)을 속성값으로 설정 -->
<xsl:for-each select="book">
<!-- value-of : XML 문서의 엘리먼트 내용(값)을 반환받기 위한 엘리먼트 -->
<!-- select 속성 : 반환받기 위한 값의 엘리먼트의 이름(태그명)을 속성값으로 설정 -->
<li><b><xsl:value-of select="title"/></b>[<xsl:value-of select="author"/>]</li>
</xsl:for-each>
</ol>
</xsl:template>
</xsl:stylesheet>
📌 AJAX Module (객체화)
-
AJAX 엔진을 여러개 만들기위해 객체화 시켜 사용 → 필요한 정보를 각각 받는 것 가능
-
AJAX Module : 객체(속성과 메소드)를 이용하여 AJAX 기능 제공
- 효율적인 비동기 요청에 대한 응답처리 제공
var xyz={};
xyz.itwill={};
//생성자 함수
xyz.itwill.Ajax=function(method, url, param, callback) {
//객체 속성 추가
this.method=method;
this.url=url;
this.param=param;
this.callback=callback;
this.send();//메소드 호출
}
xyz.itwill.Ajax.prototype={
//XMLHttpRequest 객체를 생성하여 반환하는 메소드
getXMLHttpRequest:function() {
if(window.ActiveXObject) {//IE4 ~ IE6
try {
return new ActiveXObject("msxml2.XMLHTTP");//IE5 ~ IE6
} catch (e) {
try {
return new ActiveXObject("MicrosoftXMLHTTP");//IE4
} catch (e) {
return null;
}
}
} else if(window.XMLHttpRequest) {//IE7 이상 또는 기타 브라우저
return new XMLHttpRequest();
} else {
return null;
}
},
//XMLHttpRequest 객체를 이용하여 AJAX 요청하기 위한 메소드
send:function() {
//XMLHttpRequest 객체를 반환받아 객체 속성 추가
this.xhr=this.getXMLHttpRequest();
//요청방식에 대한 검증과 저장
var httpMethod=this.method?this.method:"get";
if(httpMethod!="get" && httpMethod!="post") {
httpMethod="get";
}
//전달값에 대한 검증과 저장
var httpParam=(this.param==null || this.param=="")?null:this.param;
//요청 URL 주소 저장
var httpUrl=this.url;
//GET 방식으로 요청시 전달값이 존재할 경우 URL 주소에 QueryString 추가
if(httpMethod=="get" && httpParam!=null) {
httpUrl=httpUrl+"?"+httpParam;
}
//응답결과를 제공받아 처리하기 위한 함수 등록
// => 응답결과 처리함수에 XMLHttpRequest 객체 제공
// => 객체 내부의 XMLHttpRequest 객체에 접근하지 못하도록 복사본 제공
var request=this;
this.xhr.onreadystatechange=function() {
//call 함수를 메소드의 this 변수에 전달될 객체 변경
request.onStateChange.call(request);
}
//웹어플리케이션 요청
this.xhr.open(httpMethod, httpUrl);
this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.xhr.send(httpMethod=="post"?httpParam:null);
},
//응답결과를 처리하는 함수를 호출하는 메소드
onStateChange:function() {
this.callback(this.xhr);
}
};
📗 XSL문서로 XML데이터 응답2
-
books.jsp 문서를 AJAX 기능으로 요청하여 XML 형식의 문서로 응답 받아 태그로 변경하여 클라이언트에게 전달하는 JSP 문서
- XSL 문서를 이용하여 XML 형식의 데이타를 HTML 태그로 변환하여 응답 처리
- books.xsl 문서를 AJAX 기능으로 요청하여 XSL 문서를 응답받아 사용
-
AJAX 기능을 제공받기 위해 자바스크립트 모듈(ajax.js - 자바스트립트 객체) 사용
- 다수의 XMLHttpRequest 객체를 사용하여 요청과 응답 처리 (다수의 웹프로그램의 동시 요청 가능)
-
응답 결과를 제공받아 처리하는 콜백함수에는 XMLHttpRequest 객체를 저장하기 위한 매개변수를 반드시 선언
new xyz.itwill.Ajax("get", "books.jsp", null, function(xhr) {}
- XSLT를 사용하여 XML 문서를 제공받아 HTML 문서로 변환하여 페이지를 변경하는 함수 생성
- XSLTProcessor 객체 생성 - XSLT를 이용하여 XML 문서를 변환하기 위한 기능을 제공하는 객체
var xsltProcessor=new XSLTProcessor();- XSTLProcessor.importStylesheet(xslt) : XSLTProcessor 객체에 변환 관련 정보가 저장된 XMLDocument 객체(XSLT)를 저장하기 위한 메소드
xsltProcessor.importStylesheet(xslDoc);- XSTLProcessor.transformToFragment(xml, document) : XML 문서를 전달받아 XSTLProcessor 객체에 저장된 변환 관련 정보(XSLT)를 사용하여 document 객체의 자식 Element 객체로 반환하는 메소드
var fragment=xsltProcessor.transformToFragment(xmlDoc, document);- 반환받은 Element 객체를 특정 태그의 마지막 자식 태그로 추가하여 출력 처리
document.getElementById("books").appendChild(fragment);
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ajax.js"></script>
</head>
<body>
<h1>교재목록</h1>
<hr>
<div id="books"></div>
<script type="text/javascript">
var xmlDoc=null;
var xslDoc=null;
function loadBooksXML() {
//응답 결과를 제공받아 처리하는 콜백함수에는 XMLHttpRequest 객체를 저장하기 위한
//매개변수를 반드시 선언
new xyz.itwill.Ajax("get", "books.jsp", null, function(xhr) {
if(xhr.readyState==4) {
if(xhr.status==200) {
xmlDoc=xhr.responseXML;
doXSLT();
} else {
alert("에러코드 = "+xhr.status);
}
}
});
}
function loadBooksXSL() {
new xyz.itwill.Ajax("get", "books.xsl", null, function(xhr) {
if(xhr.readyState==4) {
if(xhr.status==200) {
xslDoc=xhr.responseXML;
doXSLT();
} else {
alert("에러코드 = "+xhr.status);
}
}
});
}
function doXSLT() {
if(xmlDoc==null || xslDoc==null) return;
//alert(xmlDoc+" : "+xslDoc);
//XSLTProcessor 객체 생성 - XSLT를 이용하여 XML 문서를 변환하기 위한 기능을 제공하는 객체
var xsltProcessor=new XSLTProcessor();
//XSTLProcessor.importStylesheet(xslt) : XSLTProcessor 객체에 변환 관련 정보가 저장된
//XMLDocument 객체(XSLT)를 저장하기 위한 메소드
xsltProcessor.importStylesheet(xslDoc);
//XSTLProcessor.transformToFragment(xml, document) : XML 문서를 전달받아 XSTLProcessor 객체에
//저장된 변환 관련 정보(XSLT)를 사용하여 document 객체의 자식 Element 객체로 반환하는 메소드
var fragment=xsltProcessor.transformToFragment(xmlDoc, document);
//반환받은 Element 객체를 특정 태그의 마지막 자식 태그로 추가하여 출력 처리
document.getElementById("books").appendChild(fragment);
}
loadBooksXML();
loadBooksXSL();
</script>
</body>
</html>
📌 AJAX Module (log출력)
function log(message) {
var logElement=document.getElementById("log");
if(logElement!=null){
logElement.innerHTML+=message+"<br>";
}
}
🎀 연습문제 (회원목록)
- object 객체는 property 속성을 통해 다수의 값 제공 가능
📙 1. xml 형식의 값 전달
- member_xml_two.jsp 문서를 AJAX 기능으로 요청하여 회원목록을 XML 형식의 문서로 응답 받아
태그로 변경하여 클라이언트에게 전달하는 JSP 문서
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ajax.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/log.js"></script>
</head>
<body>
<h1>회원목록</h1>
<hr>
<div id="log"></div>
<script type="text/javascript">
new xyz.itwill.Ajax("get", "member_xml_two.jsp", null, function(xhr) {
if(xhr.readyState==4) {
if(xhr.status==200) {
var xmlDoc=xhr.responseXML;
//code 엘리먼트의 값을 반환받아 저장
var code=xmlDoc.getElementsByTagName("code").item(0).firstChild.nodeValue;
//log("code = "+code);
if(code=="success") {
var memberList=xmlDoc.getElementsByTagName("member");
for(i=0;i<memberList.length;i++) {
var member=memberList.item(i);
var id=member.getElementsByTagName("id").item(0).firstChild.nodeValue;
var name=member.getElementsByTagName("name").item(0).firstChild.nodeValue;
log("아이디 = "+id+", 이름 = "+name);
}
} else {
log("검색된 회원정보가 없습니다.");
}
} else {
log("에러코드 = "+xhr.status);
}
}
});
</script>
</body>
</html>
🐣 xml 형식의 데이터
<?xml version="1.0" encoding="utf-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<result>
<code>success</code>
<data>
<member>
<id>abc123</id>
<name>홍길동</name>
</member>
<member>
<id>xyz789</id>
<name>임꺽정</name>
</member>
<member>
<id>tgb567</id>
<name>전우치</name>
</member>
<member>
<id>qwe963</id>
<name>일지매</name>
</member>
<member>
<id>mnb174</id>
<name>장길산</name>
</member>
</data>
</result>
📒 2. json 형식의 값 전달
- member_json_two.jsp 문서를 AJAX 기능으로 요청하여 회원목록을 JSON 형식의 문서로 응답 받아
태그로 변경하여 클라이언트에게 전달하는 JSP 문서
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ajax.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/log.js"></script>
</head>
<body>
<h1>회원목록</h1>
<hr>
<div id="log"></div>
<script type="text/javascript">
new xyz.itwill.Ajax("get", "member_json_two.jsp", null, function(xhr) {
if(xhr.readyState==4) {
if(xhr.status==200) {
var result=JSON.parse(xhr.responseText);
var code=result.code;
//log("code = "+code);
if(code=="success") {
var memberList=result.data;
for(i=0;i<memberList.length;i++) {
var id=memberList[i].id;
var name=memberList[i].name;
log("아이디 = "+id+", 이름 = "+name);
}
} else {
log("검색된 회원정보가 없습니다.");
}
} else {
log("에러코드 = "+xhr.status);
}
}
});
</script>
</body>
</html>
🐣 json 형식의 데이터
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
{
"code":"success"
,"data":[
{"id":"abc123","name":"홍길동"},{"id":"xyz789","name":"임꺽정"}
,{"id":"tgb567","name":"전우치"},{"id":"qwe963","name":"일지매"}
,{"id":"mnb174","name":"장길산"}
]
}
📗 3. xmljson 형식의 값 전달
- member_xmljson_two.jsp 문서를 AJAX 기능으로 요청하여 회원목록을 XML과 JSON 형식의 문서로
응답 받아 태그로 변경하여 클라이언트에게 전달하는 JSP 문서
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ajax.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/log.js"></script>
</head>
<body>
<h1>회원목록</h1>
<hr>
<div id="log"></div>
<script type="text/javascript">
new xyz.itwill.Ajax("get", "member_xmljson_two.jsp", null, function(xhr) {
if(xhr.readyState==4) {
if(xhr.status==200) {
var xmlDoc=xhr.responseXML;
var code=xmlDoc.getElementsByTagName("code").item(0).firstChild.nodeValue;
if(code=="success") {
var data=xmlDoc.getElementsByTagName("data").item(0).firstChild.nodeValue;
var memberList=JSON.parse(data);
for(i=0;i<memberList.length;i++) {
var id=memberList[i].id;
var name=memberList[i].name;
log("아이디 = "+id+", 이름 = "+name);
}
} else {
log("검색된 회원정보가 없습니다.");
}
} else {
log("에러코드 = "+xhr.status);
}
}
});
</script>
</body>
</html>
🐣 xmljson 형식의 데이터
- 모든 텍스트들이 값이 라는 것을 알려주기 위해 <![CDATA[]]세션 표시 필요 (줄바꿈시 실행 불가)
<?xml version="1.0" encoding="utf-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<result>
<code>success</code>
<data><![CDATA[
[
{"id":"abc123","name":"홍길동"},{"id":"xyz789","name":"임꺽정"}
,{"id":"tgb567","name":"전우치"},{"id":"qwe963","name":"일지매"}
,{"id":"mnb174","name":"장길산"}
]
]]></data>
</result>
Study Log 📂