XSLT - 클라이언트에서
XSLT를 사용하여 브라우저에서 문서를 XHTML로 변환할 수 있습니다.
자바스크립트 솔루션
이전 장에서 XSLT를 사용하여 문서를 XML에서 XHTML로 변환하는 방법을 설명했습니다. XML 파일에 XSL 스타일 시트를 추가하고 브라우저가 변환을 수행하도록 하여 이를 수행했습니다.이것이 잘 작동하더라도 XML 파일에 스타일 시트 참조를 포함하는 것이 항상 바람직한 것은 아닙니다(예: XSLT를 인식하지 않는 브라우저에서는 작동하지 않음).
보다 다양한 솔루션은 JavaScript를 사용하여 변환을 수행하는 것입니다.
JavaScript를 사용하여 다음을 수행할 수 있습니다.
- 브라우저별 테스트 수행
- 브라우저 및 사용자 요구에 따라 다른 스타일 시트 사용
그것이 XSLT의 아름다움입니다! XSLT의 설계 목표 중 하나는 데이터를 한 형식에서 다른 형식으로 변환하여 다양한 브라우저와 다양한 사용자 요구 사항을 지원하는 것이었습니다.
XML 파일과 XSL 파일
이전 장에서 본 XML 문서를 보십시오.
<?xml version="1.0" encoding="UTF-8"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>
XML 파일 을 봅니다.
그리고 함께 제공되는 XSL 스타일 시트:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th style="text-align:left">Title</th>
<th style="text-align:left">Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title" /></td>
<td><xsl:value-of select="artist" /></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
XSL 파일 을 봅니다.
XML 파일에는 XSL 파일에 대한 참조가 없습니다.
중요: 위의 문장은 XML 파일이 다양한 XSL 스타일 시트를 사용하여 변환될 수 있음을 나타냅니다.
브라우저에서 XML을 XHTML로 변환
다음은 클라이언트에서 XML 파일을 XHTML로 변환하는 데 필요한 소스 코드입니다.
예시
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename)
{
if (window.ActiveXObject)
{
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
else
{
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
try {xhttp.responseType = "msxml-document"}
catch(err) {} // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject
|| xhttp.responseType == "msxml-document")
{
ex =
xml.transformNode(xsl);
document.getElementById("example").innerHTML
= ex;
}
// code for Chrome, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
{
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument =
xsltProcessor.transformToFragment(xml, document);
document.getElementById("example").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<div
id="example" />
</body>
</html>
팁: JavaScript 작성 방법을 모르는 경우 JavaScript 자습서 를 공부하십시오 .
설명된 예:
loadXMLDoc() 함수는 다음을 수행합니다.
- XMLHttpRequest 객체 생성
- XMLHttpRequest 객체의 open() 및 send() 메서드를 사용하여 서버에 요청 보내기
- 응답 데이터를 XML 데이터로 가져오기
displayResult() 함수는 XSL 파일로 스타일이 지정된 XML 파일을 표시하는 데 사용됩니다.
- XML 및 XSL 파일 로드
- 사용자가 가지고 있는 브라우저의 종류 테스트
- 인터넷 익스플로러의 경우:
- transformNode() 메서드를 사용하여 XSL 스타일 시트를 xml 문서에 적용
- 스타일이 지정된 xml 문서를 포함하도록 현재 문서(id="example")의 본문을 설정합니다.
- 다른 브라우저의 경우:
- 새 XSLTProcessor 개체를 만들고 XSL 파일을 가져옵니다.
- transformToFragment() 메서드를 사용하여 XSL 스타일 시트를 xml 문서에 적용합니다.
- 스타일이 지정된 xml 문서를 포함하도록 현재 문서(id="example")의 본문을 설정합니다.