XSLT - على العميل
يمكن استخدام XSLT لتحويل المستند إلى XHTML في متصفحك.
حل JavaScript
شرحنا في الفصول السابقة كيف يمكن استخدام XSLT لتحويل مستند من XML إلى XHTML. قمنا بذلك عن طريق إضافة ورقة أنماط XSL إلى ملف XML والسماح للمتصفح بإجراء التحويل.حتى إذا كان هذا يعمل بشكل جيد ، فليس من المرغوب دائمًا تضمين مرجع ورقة أنماط في ملف 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>
وصحيفة أنماط 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>
لاحظ أن ملف 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
- استخدم الأسلوبين open () و send () لكائن XMLHttpRequest لإرسال طلب إلى الخادم
- احصل على بيانات الاستجابة كبيانات XML
تُستخدم الوظيفة () displayResult لعرض ملف XML على غرار ملف XSL:
- قم بتحميل ملفات XML و XSL
- اختبر نوع المتصفح الذي يمتلكه المستخدم
- إذا كان Internet Explorer:
- استخدم طريقة transformNode () لتطبيق ورقة أنماط XSL على مستند xml
- قم بتعيين نص المستند الحالي (id = "example") ليحتوي على مستند xml ذي النمط
- إذا كانت المتصفحات الأخرى:
- أنشئ كائن XSLTProcessor جديدًا واستورد ملف XSL إليه
- استخدم طريقة transformToFragment () لتطبيق ورقة أنماط XSL على مستند xml
- قم بتعيين نص المستند الحالي (id = "example") ليحتوي على مستند xml ذي النمط