XSLT - 클라이언트에서

브라우저가 XSLT를 지원하면, 브라우저에서 문서를 XHTML로 변환할 수 있습니다.

JavaScript 솔루션

이전 장에서는 XSLT를 사용하여 특정 XML 문서를 XHTML로 변환하는 방법을 설명했습니다. 우리는 다음과 같은 방법으로 이 작업을 완료했습니다: XML 파일에 XSL 스타일 시트를 추가하고, 브라우저를 통해 변환을 완료했습니다.

이 방법이 효과적일 수 있지만, XML 파일에 스타일 시트 참조를 포함하는 것은 항상 만족스럽지 않을 수 있습니다(예를 들어, XSLT를 인식할 수 없는 브라우저에서는 이 방법이 동작하지 않을 수 있습니다).

보다 일반적인方法是 JavaScript를 사용하여 변환을 완료하다.

JavaScript를 사용하여 다음과 같이 할 수 있습니다:

  • 브라우저 확인 테스트 수행
  • 브라우저와 사용자의 요구에 따라 다른 스타일 시트를 사용하세요

이것이 바로 XSLT의 매력입니다! XSLT의 설계 목적 중 하나는 하나의 형식을 다른 형식으로 변환할 수 있도록 하고, 다양한 유형의 브라우저와 다양한 사용자 요구를 지원하는 것입니다.

브라우저에서의 XSLT 변환은 앞으로의 브라우저가 수행할 주요 작업 중 하나가 될 것입니다. 동시에 특정 브라우저 시장에서의 성장도 볼 수 있을 것입니다(점자, 웹 프린터, 청각 장애인 장치 등).

XML 파일과 XSL 파일

이전 장에서 보여드린 XML 문서를 확인해 주세요:

<?xml version="1.0" encoding="ISO-8859-1"?>
<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="ISO-8859-1"?>
<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 align="left">Title</th> 
        <th 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 파일을 확인。

이 XML 파일은 XSL 파일에 대한 참조를 포함하고 있지 않다는 점을 주의하세요.

중요 사항:이 문장은 XML 파일이 여러 가지 다른 XSL 스타일 시트로 변환될 수 있다는 것을 의미합니다.

브라우저에서 XML을 XHTML로 변환

이 코드는 클라이언트에서 XML 파일을 XHTML로 변환하는 데 사용됩니다：

<html>
<body>
<script type="text/javascript">
// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")
// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>

힌트:JavaScript를 작성하는 방법을 모르시면, 우리의 《JavaScript 교육》。

첫 번째 코드는 마이크로소프트의 XML 파서의 인스턴스를 생성한 다음, XML 파일을 메모리에 로드했습니다. 두 번째 코드는 파서의 다른 인스턴스를 생성한 다음, 이 XSL 파일을 메모리에 로드했습니다. 마지막 줄 코드는 XSL 문서를 사용하여 XML 문서를 변환하고, 결과를 브라우저에서 XHTML로 표시했습니다. 작업 완료!

그것이 IE에서 어떻게 작동하는지 보세요。