از انجائیکه دستورات این تابع از نوع جاوا اسکریپت است لذا باید این تابع را درون تگ head  و script تعریف کنیم

 

<html>

<head>

         <script >

                    function loadXMLDoc(filename)

                                     {    دستورات گام دوم    }


                    function displayResult( )

                                     {   

 

                                         }

 

         </script>

</head>
<body>

               <div id="example" />

</body>

</html>

ایجاد اتصال به دو فایل xml , xslt
  دو متغیر به نام های اختیاری xml  و xsl در نظر می گیریم

 برای اتصال به هر فایل باید تابع loadXMLDoc را جداگانه فراخوانی کنیم .

اگر نام فایل xml ما ، cdcatalog.xml و نام فایل xsl ما cdcatalog.xsl باشد دو دستور زیر را می نویسیم :

 

xml = loadXMLDoc("cdcatalog.xml");


xsl = loadXMLDoc("cdcatalog.xsl");

 

 از این به بعد ،متغیر  xml به فایل cdcatalog.xml اشاره می کند  و متغیر xsl به فایل  cdcatalog.xsl اشاره می کند
 

 

<html>

<head>

         <script >

                    function loadXMLDoc(filename)

                                     {    دستورات گام دوم    }


                    function displayResult( )

                                     {   

 

                              xml = loadXMLDoc("cdcatalog.xml");


                              xsl = loadXMLDoc("cdcatalog.xsl");

 

 

 

                                         }

 

         </script>

</head>
<body>

               <div id="example" />

</body>

</html>

 
اجرای دستورات فایل xslt اگر مرورگر کاربر ie باشد
 
  • برای بررسی اینکه ایا مرورگر کاربر اینترنت اکسپلورر است دستور زیر را می نویسیم :

 

if (window.ActiveXObject || xhttp.responseType == "msxml-document")

{    }

 
 در غیر این صورت یعنی مرورگر کاربر اینترنت اکسپلورر نیست
 

 

function displayResult()
{

       xml = loadXMLDoc("cdcatalog.xml");


       xsl = loadXMLDoc("cdcatalog.xsl");

      if (window.ActiveXObject || xhttp.responseType == "msxml-document")

          {    }
      else

          {    }
}

 
 اگر مرورگر کاربر اینترنت اکسپلورر است ، دستور زیر باعث اجرا شدن دستورات درون فایل xslt می شود .

 

ex = xml.transformNode(xsl);

 دستور بالا یعنی : 

  • دستورات درون فایلی که متغیر xsl به ان اشاره می کند اجرا می شود و ...
  • ... node های مورد نظر را  از فایلی که متغیر xml به ان اشاره می کند پیدا می کند
  • در نهایت node های بدست امده در متغیر em قرار می گیرند
 
 حالا با دستور زیر می گو ئیم نتیجه بدست امده در تگ دایوی که نام انرا example گذاشته ایم به کاربر نشان دهد :

 

  document.getElementById("example").innerHTML = ex;

 
اجرای دستورات فایل xslt اگر مرورگر کاربر ie نباشد
 ابتدا باید متغیری از نوع کلاس XSLTProcessor تعریف کنیم
 فرض کنید نام متغیر xsltProcessor  باشد . دستور زیر انرا تعریف می کند

 

  xsltProcessor = new XSLTProcessor();

 
 سپس مشخص می کنیم که متغیر xsltProcessor  به فایل xslt که متغیر xsl به ان اشاره دارد رجوع کند .

 

  xsltProcessor.importStylesheet(xsl);

 سپس با دستور زیر مشخص می کنیم دستورات درون فایل xslt بر پایه انچه در فایل xml نوشته شده است اجرا شود

 

  resultDocument = xsltProcessor.transformToFragment(xml, document);

 node های بدست امده درون متغیر resultDocument  قرار خواهند گرفت
 در نهایت دستوری می نویسیم که node های بدست امده از فایل xml را درون تگ دایو که نام ان example بود نمایش دهد

 

  document.getElementById("example").appendChild(resultDocument);

 
 
 
فراخوانی تابع displayResult
 می خواهیم بلافاصله پس از بار گذاری صفحه xhtml، دستورات تابع displayResult اجرا شود . لذا دستور زیر را می نویسیم :

 

<body onload="displayResult()">

 
 
  برنامه نهایی  بصورت زیر است :
 

 

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

 
 مشاهده اجرای برنامه کامل