۱۹
خرداد

جلسه ۵۷ : کاربرد XSLT در سمت کلاینت

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و علاقمندان و کاربرانی که علاقمند به یادگیری دوره XML هستند. در جلسات گذشته جزء به جزء با عناصر مهم و کاربردی در XSLT پرداختیم و با کاربرد آن ها آشنا شدیم. در این جلسه نیز علاقمندان XML و XSLT را با مبحث کاربرد XSLT در سمت کلاینت آشنا می نماییم.

کاربرد XSLT در سمت کلاینت

گرچه XSLT می تواند برای انتقال سند به XHTML در مرورگر شما مورد استفاده قرار گیرد. اما بیاید با راه آسان تری که کار را برای ما ساده تر می کند آشنا شویم.

راه حل جاوا اسکریپت

در جلسات قبل توضیح داده شد که چگونه XSLT را می توان برای انتقال یک سند از XML به XHTML استفاده کرد.
ما این کار را با اضافه کردن یک XSL style sheet به فایل XML انجام دادیم و اجازه دادیم مرورگر این تغییر را انجام دهد.
حتی اگر این کار به خوبی انجام شود، همیشه مطلوب نیست که مرجع style sheet را در یک فایل XML وارد کنید (مثلا در یک مرورگر غیر XSLT ممکن است جواب ندهد.)
وجود همین مشکل باعث شد از جاوا اسکریپت برای انجام این تغییر استفاده نماییم.
با استفاده از جاوا اسکریپت می توان :

browser-specific testing را انجام داد.
بر اساس نیاز کاربر و نوع مرورگر از style sheets های مختلفی استفاده نمود.

و این است زیبایی 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 version="1.0" encoding="UTF-8"?>

<cd>

<title>Empire Burlesque</title>

<artist>Bob Dylan</artist>

<company>Columbia</company>

</cd>

</catalog>

مشاهده فایل XML

به XSL style sheet زیر نیز توجه نمایید:

مثال :

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

<th style="text-align:left">Title</th>

<th style="text-align:left">Artist</th>

</tr>

<xsl:for-each select="catalog/cd">

<tr>

</tr>

</xsl:for-each>

</table>

</xsl:template>

</xsl:stylesheet>

مشاهده فایل XML

توجه داشته باشید که فایل XML هیچ اشاره ای به فایل XSL ندارد.

نکته

جمله فوق نشان می دهد که یک فایل XML را می توان با استفاده از انواع مختلفی از XSL style sheets تغییر داد.

انتقال 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>

<!DOCTYPE html>

<html>

<head>

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>

</html>

اگر هنوز با جاوا اسکریپت آشنا نیستید سری به دوره آموزش کامل جاوا اسکریپت در پی وی لرن بزنید!

تشریح نمونه بالا

تابع ()loadXMLDoc موارد زیر را انجام می دهد:

یک XMLHttpRequest object می سازد.
از روش های ()open و ()send موجود در XMLHttpRequest object برای ارسال درخواست یا ریکوئست به سرور استفاده می نماید.
داده های response شده را به داده XML یا XML data دریافت می کند.

از تابع ()displayResult برای نمایش فایل XML با استفاده از فایل XSL استفاده می شود که شامل موارد زیر است:

بارگذاری فایل های XML و XSL
تست مرورگرهایی که کاربر استفاده می نماید.
استفاده از اینترنت اکسپلورر در صورتی که:
از روش ()transformNode برای اجرای XSL style sheet در سند XML استفاده شود.
مجموعه ای از سند فعلی (id = “example”) را برای حاوی سند styled xml باشد.
استفاده از سایر مرورگرها در صورتی که:
یک XSLTProcessor object جدید که XSL file را وارد می سازد ایجاد گردد.
از روش ()transformToFragment برای اجرای XSL style sheet در سند XML استفاده شود.
مجموعه ای از سند فعلی (id = “example”) را برای حاوی سند styled xml باشد.

کلام آخر

در این جلسه به مبحث کاربرد XSLT در سمت کلاینت پرداخته شد.
در جلسه بعدی به کاربرد XSLT در سمت سرور می پردازیم.
با پی وی لرن همراه باشید.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۵۷ : کاربرد XSLT در سمت کلاینت

مقدمه

کاربرد XSLT در سمت کلاینت

راه حل جاوا اسکریپت

فایل XML و فایل XSL

نکته

انتقال XML به XHTML در مرورگر

تشریح نمونه بالا

کلام آخر

لیست مطالب دوره

XML AJAX

XML DOM

XPath Tutorial

XSLT Tutorial

XQuery

DTD

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ