Site Logo
כניסה

פוסט נוסטלגי: הצגת XML עם XSLT בדפדפן

02/11/2025
יומי

לאחרונה נשמעים קולות שקוראים להפסיק לתמוך בהצגת XML באמצעות XSLT בדפדפנים וזו הזדמנות טובה להיזכר בסטנדרט שאף אחד לא משתמש בו אבל עדיין עובד בכל הדפדפנים והיה נשמע כמו רעיון טוב לפני בערך 20 שנה.

באזור שנת 2000 האינטרנט הגיע למיצוי. פיירפוקס ייוולד רק ב 2004 וכרום עוד 4 שנים אחריו ב 2008. דפדפן האינטרנט שכולם השתמשו בו נקרא Internet Explorer. גירסה 5 שלו יצאה ב 1999 וב 2001 גירסה 6 שנחשבה אלמותית. באותו הזמן מפתחים ראו באינטרנט הזדמנות ליצירת אפליקציות מבוזרות ולחבר בין מערכות שונות, בלי קשר לדפדפן. כלומר כל מערכת תשלח ותקבל קבצי מידע מסוג XML ובאמצעותם תחובר למערכות אחרות, כך שלדוגמה מערכת להזמנת טיסות תכיל שרת שישלח XML-ים עם המידע לתוכנת צד לקוח שתדע להציג את ה XML-ים האלה. וכן היתה טכנולוגיה בשם Java Applets שאפשרה לכתוב קוד Java ולהפיץ אותו באמצעות דפדפן אינטרנט.

בתוך העולם הזה היה נשמע רק הגיוני לאפשר לדפדפנים להציג קבצי XML, אך מאחר ודפדפנים ידעו להציג רק קבצי HTML ו XML הוא פורמט כללי שבו אין מגבלה על שמות התגים עלה הצורך למפות בין תגיות XML לתגיות HTML. בדוגמה של אתר הזמנת הטיסות אם כבר יש לך מערכת להזמנת טיסות שמוציאה קבצי XML לתוכנות ול Applets שרצים אצל הלקוחות, תוכל להוסיף קובץ מיפוי שיראה לדפדפן איך לעבור מקובץ נתוני הטיסות שלך ל HTML וכך גם הדפדפן יוכל להציג את המידע לפחות לקריאה.

ואיך זה נראה? האמת שדי פשוט. ניקח קובץ XML לדוגמה מאתר של ספריה שמכיל רשימה של 3 ספרים:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="demo.xsl"?>

<librairie>
  <livre>
    <titre>Le Petit Prince</titre>
    <auteur>Antoine de Saint-Exupéry</auteur>
    <prix>8.50</prix>
  </livre>
  <livre>
    <titre>1984</titre>
    <auteur>George Orwell</auteur>
    <prix>9.90</prix>
  </livre>
  <livre>
    <titre>Harry Potter à l'école des sorciers</titre>
    <auteur>J.K. Rowling</auteur>
    <prix>12.00</prix>
  </livre>
</librairie>

חוץ מהצרפתית שימו לב לשורה השנייה בקובץ, שמצביעה לקובץ מיפוי. זה תוכנו:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <!-- Le résultat sera du HTML -->
  <xsl:output method="html" encoding="UTF-8" indent="yes"/>

  <!-- Modèle de transformation principal -->
  <xsl:template match="/">
    <html>
      <head>
        <title>Liste des livres</title>
        <style>
          body { font-family: Arial, sans-serif; margin: 40px; }
          table { border-collapse: collapse; width: 60%; }
          th, td { border: 1px solid #999; padding: 8px; text-align: left; }
          th { background-color: #f2f2f2; }
        </style>
      </head>
      <body>
        <h2>Ma librairie</h2>
        <table>
          <tr>
            <th>Titre</th>
            <th>Auteur</th>
            <th>Prix (€)</th>
          </tr>
          <!-- Boucle sur chaque livre -->
          <xsl:for-each select="librairie/livre">
            <tr>
              <td><xsl:value-of select="titre"/></td>
              <td><xsl:value-of select="auteur"/></td>
              <td><xsl:value-of select="prix"/></td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>

קובץ המיפוי מכיל תבנית HTML שבתוכה פקודת for-each שאחראית לשתול את המידע מה XML לתוך התבנית. עכשיו הקסם מתחיל:

  1. שימו את שני הקבצים באותה תיקיה.

  2. הפעילו משורת הפקודה בתיקיה:

npx local-server
  1. כנסו בדפדפן ל localhost:8000 ותוכלו לראות את רשימת הספרים בטבלה - כאילו בנינו קובץ HTML עם הרשימה.

תהנו מזה כל עוד זה עובד. הדיבור הוא להוריד את התמיכה עד סוף 2026 אבל נחכה ונראה: https://developer.chrome.com/docs/web-platform/deprecating-xslt