본문 바로가기

학원/복기

[AJAX] XSL 문서 / XSLT 예제

XSL 문서 : XSLT 데이터를 저장한 XML 문서 

XSLT : XML 기반의 언어로 작성된 파서(Parser) → XML 데이터를 전달받아 HTML 또는 XML 데이터로 변환하는 정보를 제공한다. 

 


예제)

 

[books.jsp] : 책 정보를 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>

 

[books.xsl]

: xml 데이터(books.jsp)를 전달받아  HTML 문서로 변환하기 위한 정보 제공 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output method="html" encoding="utf-8"/>
	<xsl:template match="books">
		<ol>
			<xsl:for-each select="book">
				<li><b><xsl:value-of select="title"/></b><xsl:value-of select="author"/></li>
			</xsl:for-each>
		</ol>
	</xsl:template>
</xsl:stylesheet>

 

output: XML 문서를 전달받아 변환하여 제공되는 문서의 형식을 설정하는 엘리먼트

method 속성 : 변환되어 제공되는 문서의 형식을 속성값으로 설정 - 기본값 : xml 

encoding 속성 : 문서에서 사용하는 문자형태(캐릭터셋)을 속성값으로 설정 

 

template : XML 문서를 변환하기 위한 정보를 제공하는 엘리먼트 

match 속성 : XML 데이터의 루트 엘리먼트를 속성값으로 설정

 

for-each : XML 문서의 엘리먼트(태그)를 반복처리 하기 위한 엘리먼트

select 속성 : 반복 처리하기 위한 엘리먼트의 이름(태그명)을 속성값으로 설정 

 

value-of : XML 문서의 엘리먼트 내용(태그내용)을 제공하기 위한 엘리먼트

select 속성 : 값을 얻어오기 위한 엘리먼트의 이름(태그명) 속성값으로 설정

 


 

[books_ajax.jsp]

 

[books.jsp] 문서를 AJAX 기능으로 요청하여 XML 데이타를 응답받아 태그로 변경하여 클라이언트에게 전달하여 응답하는 JSP 문서 

→ XSL 문서를 사용하여 XML 데이타를 HTML 태그로 변환하여 응답 처리

→ [books.xsl] 문서를 AJAX 기능으로 요청하여 XSLT 데이타를 응답받아 사용 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>교재목록</h1>
	<hr>
	<div id="books"></div>
	
	<script type="text/javascript">
	var xmlDoc=null;//XML 데이타를 저장하기 위한 전역변수
	var xslDoc=null;//XSLT 데이타를 저장하기 위한 전역변수
	
	$.ajax({
		type: "get",
		url: "books.jsp",
		dataType: "xml",
		success: function(result) {
			xmlDoc=result;
			doXSLT();
		},
		error: function(xhr) {
			alert("에러코드 = "+xhr.status);
		}
	});
	
	$.ajax({
		type: "get",
		url: "books.xsl",
		dataType: "xml",
		success: function(result) {
			xslDoc=result;
			doXSLT();
		},
		error: function(xhr) {
			alert("에러코드 = "+xhr.status);
		}
	});
	
	//XSLT 데이타를 사용하여 XML 데이타를 HTML 태그로 변환하는 함수
	function doXSLT() {
		if(xmlDoc==null || xslDoc==null) return;
		
		//XSLTProcessor 객체 생성 - XSLT 데이타를 사용하여 XML 데이타를 전달받아 변환하기 위한 객체
		var xsltProcessor=new XSLTProcessor();
		
		//XSLTProcessor.importStylesheet(xslt) : XSLTProcessor 객체에 변환 정보가 저장된 XSLT 
		//데이타를 전달받아 저장하기 위한 메소드
		xsltProcessor.importStylesheet(xslDoc);
		
		//XSLTProcessor.transformToFragment(xml, document) : XML 데이타를 전달받아 XSLTProcessor
		//객체를 사용하여 document 객체의 자식 Element 객체로 변환하여 반환하는 메소드 
		var fragment=xsltProcessor.transformToFragment(xmlDoc, document);
		
		$("#books").append(fragment);
	}
	</script>
</body>
</html>

 

'학원 > 복기' 카테고리의 다른 글

[MVC] MVC Model1 / MVC Model2  (0) 2023.07.09
[AJAX] RSS 서비스 활용하기  (0) 2023.07.09
[AJAX] jdbc 연결 / CDATA  (0) 2023.07.06
[AJAX] jQuery를 이용한 AJAX 사용  (0) 2023.07.05
[AJAX] CSV / XML / JSON  (0) 2023.07.04