أحدث البرامج التعليمية وتطوير الشبكة
 

XSLT - على العميل

❮ السابق التالي الفصل ❯

XSLT يمكن استخدامها لتحويل المستند إلى XHTML في المتصفح الخاص بك.

A جافا سكريبت الحل

في الفصول السابقة أوضحنا كيف XSLT يمكن استخدامها لتحويل وثيقة من XML إلى XHTML. فعلنا ذلك عن طريق إضافة ورقة أنماط XSL إلى ملف XML والسماح للمتصفح تفعل هذا التحول.

حتى لو كان هذا يعمل بشكل جيد، فإنه ليس دائما مرغوب فيه لتشمل مرجع ورقة نمط في ملف 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 مختلفة.

تحويل XML إلى XHTML في المستعرض

هنا هو رمز مصدر اللازمة لتحويل ملف XML إلى XHTML على العميل:

مثال

<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:

  • إنشاء كائن مدعوم
  • استخدام open() و send() أساليب الكائن مدعوم لتقوم بإرسال طلب إلى خادم
  • الحصول على البيانات استجابة إلى بيانات XML

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

  • XML تحميل وملفات XSL
  • اختبار أي نوع من متصفح لديه المستخدم
  • إذا إنترنت إكسبلورر:
    • استخدام transformNode() طريقة لتطبيق ورقة الأنماط XSL إلى مستند XML
    • تعيين هيئة من المستند الحالي (id="example") لاحتواء مستند XML نصب
  • إذا المتصفحات الأخرى:
    • إنشاء كائن XSLTProcessor جديد واستيراد ملف XSL إليها
    • استخدام transformToFragment() طريقة لتطبيق ورقة الأنماط XSL إلى مستند XML
    • تعيين هيئة من المستند الحالي (id="example") لاحتواء مستند XML نصب

❮ السابق التالي الفصل ❯