최신 웹 개발 튜토리얼
 

XSLT - 클라이언트에

❮ 이전 다음 장 ❯

XSLT 브라우저에서 XHTML로 문서를 변환하는 데 사용할 수 있습니다.

자바 스크립트 솔루션

이전 장에서 우리는 XSLT가 XHTML로 XML에서 문서를 변환하는 방법을 설명했다. 우리는 XML 파일에 XSL 스타일 시트를 추가하고 브라우저가 변환을 할 수 있도록하여이 작업을했다.

이 잘 작동하더라도, XML 파일에서 스타일 시트 참조 포함하는 것이 바람직하지 않다 (eg it will not work in a non XSLT aware browser.)

보다 다양한 솔루션 변환을 할 수있는 자바 스크립트를 사용하는 것입니다.

자바 스크립트를 사용하여, 우리가 할 수있는 :

  • 브라우저 별 테스트를 할
  • 브라우저 및 사용자의 필요에 따라 다른 스타일 시트를 사용

즉 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="/">
  <html>
  <body>
  <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>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

XSL 파일보기 .

Notice that the XML file does not have a reference to the XSL file.

IMPORTANT: 위의 문장은 XML 파일이 여러 XSL 스타일 시트를 사용하여 변환 할 수 있음을 나타냅니다.

브라우저에서 XHTML로 XML 변환

다음은 클라이언트에서 XHTML로 XML 파일을 변환하는 데 필요한 소스 코드는 다음과 같습니다

예

<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>
»그것을 자신을 시도

Tip: 당신은 자바 스크립트를 작성하는 방법을 모른다면, 우리의 연구하시기 바랍니다 자바 스크립트 튜토리얼 .

예 설명 :

The loadXMLDoc() function does the following:

  • XMLHttpRequest를 객체를 생성
  • 사용 open() 와 send() 서버로 요청을 보낼 XMLHttpRequest 객체의 방법을
  • XML 데이터로 응답 데이터를 가져옵니다

The displayResult() function is used to display the XML file styled by the XSL file:

  • 로드 XML 및 XSL 파일
  • 사용자가 브라우저의 종류를 테스트
  • Internet Explorer의 경우 :
    • 사용 transformNode() XML 문서에 XSL 스타일 시트를 적용하는 방법을
    • 현재 문서의 본문 집합 (id="example") 스타일이 XML 문서를 포함
  • 다른 브라우저의 경우 :
    • 새로운 인 XSLTProcessor 객체를 생성하고 그것에 XSL 파일을 가져옵니다
    • 사용 transformToFragment() XML 문서에 XSL 스타일 시트를 적용하는 방법을
    • 현재 문서의 본문 집합 (id="example") 스타일이 XML 문서를 포함

❮ 이전 다음 장 ❯