XSLT - İstemcide
XSLT, tarayıcınızda belgeyi XHTML'ye dönüştürmek için kullanılabilir.
Bir JavaScript Çözümü
Önceki bölümlerde, bir belgeyi XML'den XHTML'ye dönüştürmek için XSLT'nin nasıl kullanılabileceğini açıkladık. Bunu, XML dosyasına bir XSL stil sayfası ekleyerek yaptık ve tarayıcının dönüşümü yapmasına izin verdik.Bu iyi çalışsa bile, bir XML dosyasına stil sayfası referansı eklemek her zaman istenmez (örneğin, XSLT uyumlu olmayan bir tarayıcıda çalışmayacaktır.)
Daha çok yönlü bir çözüm, dönüşümü yapmak için bir JavaScript kullanmak olacaktır.
Bir JavaScript kullanarak şunları yapabiliriz:
- tarayıcıya özel testler yapın
- tarayıcı ve kullanıcı ihtiyaçlarına göre farklı stil sayfaları kullanın
XSLT'nin güzelliği budur! XSLT'nin tasarım hedeflerinden biri, farklı tarayıcıları ve farklı kullanıcı ihtiyaçlarını destekleyerek verileri bir biçimden diğerine dönüştürmeyi mümkün kılmaktı.
XML Dosyası ve XSL Dosyası
Önceki bölümlerde gördüğünüz XML belgesine bakın:
<?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>
Ve beraberindeki XSL stil sayfası:
<?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>
XML dosyasının XSL dosyasına referansı olmadığına dikkat edin.
ÖNEMLİ: Yukarıdaki cümle, bir XML dosyasının birçok farklı XSL stil sayfası kullanılarak dönüştürülebileceğini belirtir.
Tarayıcıda XML'i XHTML'ye Dönüştürme
İstemcide XML dosyasını XHTML'ye dönüştürmek için gereken kaynak kodu burada:
Örnek
<!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>
İpucu: JavaScript yazmayı bilmiyorsanız, lütfen JavaScript eğitimimizi inceleyin .
Örnek Açıklama:
loadXMLDoc() işlevi aşağıdakileri yapar:
- Bir XMLHttpRequest nesnesi oluşturun
- Bir sunucuya istek göndermek için XMLHttpRequest nesnesinin open() ve send() yöntemlerini kullanın
- Yanıt verilerini XML verileri olarak alın
displayResult() işlevi, XSL dosyası tarafından stilize edilmiş XML dosyasını görüntülemek için kullanılır:
- XML ve XSL dosyalarını yükleyin
- Kullanıcının ne tür bir tarayıcıya sahip olduğunu test edin
- Internet Explorer ise:
- XSL stil sayfasını xml belgesine uygulamak için transformNode() yöntemini kullanın
- Geçerli belgenin gövdesini (id="example") stillendirilmiş xml belgesini içerecek şekilde ayarlayın
- Diğer tarayıcılar ise:
- Yeni bir XSLTProcessor nesnesi oluşturun ve XSL dosyasını ona aktarın
- XSL stil sayfasını xml belgesine uygulamak için transformToFragment() yöntemini kullanın
- Geçerli belgenin gövdesini (id="example") stillendirilmiş xml belgesini içerecek şekilde ayarlayın