וובמאסטר - תיכנות ובניית אתרים

קריאת קובץ XML

אוהד19/‏ 11 אוקטובר, 2003
F+
F-

במאמר זה אני אסביר כיצד לקרוא קובץ XML, ע"י פקד ActiveX בשם Microsoft.XMLDOM, גם בעזרת JavaScript וגם בעזרת VBScript.

קובץ ה-XML

במאמר זה נשתמש בקובץ library.xml, שמכיל פרטים על ספרים בספריה. (בקובץ זה ישנם שלושה ספרים)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26  
<?xml version="1.0"?>

<library>

   <book>
    <title>Its not your party</title>
    <author>Avner Shavit</author>
    <pages>143</pages>
    <year>2000</year>
   </book>

   <book>
    <title>Addiction</title>
    <author>Ram Oren</author>
    <pages>128</pages>
    <year>2002</year>
   </book>

   <book>
    <title>The Clock</title>
    <author>Ka. Tzetnik</author>
    <pages>97</pages>
    <year>1989</year>
   </book>

</library>


כיצד שולפים נתונים מקובץ ה-XML?

ניצור דף HTML חדש, ונוסיף את תגית ה-Script ב-body.

1
2
3
4
5
6
7
8
9
10  
<html>
<head>
 <title>Library</title>
</head>
<body>
     <script>

     </script>
</body>
</html>


ניצור אובייקט XMLDOM חדש:

1
2  
//JavaScript
var xmlDoc = new ActiveXObject("microsoft.XMLDOM")




1
2
3  
'VBScript
Dim xmlDoc
Set xmlDoc = CreateObject("microsoft.XMLDOM")


המאפיין async

המאפיין async קובע האם ניתן להתחיל לעבד את הסקריפט שקורא את הנתונים, לפני שקובץ ה-XML נטען, או האם יש לחכות עד שקובץ ה- XML יטען, ורק לאחר מכן לעבד את הנתונים.

ערכים אפשריים:

  • True - ניתן להמשיך בביצוע הסקריפט ועיבוד הנתונים לפני שקובץ ה- XML נטען במלואו.
  • False - ביצוע הסקריפט ועיבוד הנתונים ימשך רק לאחר שקובץ ה- XML נטען במלואו ללא שגיאות.
במאמר לא נשתמש בטעינה אסינכרונית (false). שימוש בטעינה אסינכרונית (true), דורש בדיקה שכל קובץ ה-xml נטען, כדי שלא יווצר מצב שהסקריפט מנסה לעבד את הנתונים לפני שקובץ ה-XML נטען.

1
2  
//JavaScript
xmlDoc.async = false;




1
2  
'VBScript
xmlDoc.async = False


טעינת קובץ XML

לאחר מכן נטען את קובץ ה-XML ע"י הפקודה load:

1  
xmlDoc.load("library.xml")


ניתן לטעון קובץ XML גם מהאינטרנט, ע"י ציון כתובת ה- url שלו:

1  
xmlDoc.load("http://www.books.com/library.xml")


קריאת הנתונים

קובץ ה-XML בנוי מענפים רבים, הענף המרכזי (ה-Root Element), בקובץ library.xml, הוא library. פנייה אליו תתבצע ע"י:

1  
xmlDoc.documentElement


xmlDoc - אובייקט המסמך.
documentElement - התג (הענף) הראשי של הקובץ.

ל- documentElement יש ענפי משנה (book), פנייה אליהם תתבצע ע"י השיטה item של האובייקט childNodes:

1  
xmlDoc.documentElement.childNodes.item(x)


x - מציין את מספר הענף (כך שמספורם מתחיל מאפס). כלומר, בכדי לפנות לענף המשנה הראשון, נשתמש ב:

1  
xmlDoc.documentElement.childNodes.item(0)


לענף book יש ענפי משנה משלו, פנייה אליהם תתבצע גם ע"י childNodes:

1  
xmlDoc.documentElement.childNodes.item(0).childNodes.item(0)


השורה הנ"ל פונה לכותרת של הספר הראשון, בכדי להציב את ערכה במשתנה נעשה כך:

1
2  
var title;
title = xmlDoc.documentElement.childNodes.item(0).childNodes.item(0).text


שימו לב ל- text בסוף השורה, שמורה להכניס למשתנה את הערך של הענף, ולא להצביע עליו.

הצגת הנתונים באמצעות document.write

נציג את הנתונים של הספר הראשון כך:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23  
<script>
var xmlDoc = new ActiveXObject("microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("library.xml") //טעינת הקובץ

//הגדרת משתנים אליהם נכניס את פרטי הספר
var title;
var author;
var pages;
var year;

//הכנסת פרטי הספר אל המשתנים
title = xmlDoc.documentElement.childNodes.item(0).childNodes.item(0).text;
author = xmlDoc.documentElement.childNodes.item(0).childNodes.item(1).text;
pages = xmlDoc.documentElement.childNodes.item(0).childNodes.item(2).text;
year = xmlDoc.documentElement.childNodes.item(0).childNodes.item(3).text;

//הצגת הנתונים
document.write("<h3>Title: " + title + "</h3>");
document.write("<b>Author: " + author + "</b><br>");
document.write("Pages: " + pages + "<br>");
document.write("Year: " + year);
</script>


שימו לב, שבכדי לפנות אל תוכן של ענף משנה של book, עלינו לכתוב את השורה הבאה:

1  
xmlDoc.documentElement.childNodes.item(0).childNodes.item(0).text;


ניתן לקצר זאת ע"י שימוש במשתנה שיצביע על אובייקט השורש, או כל ענף משנה בקובץ ה-XML.
בדוגמא זו נשתמש במשתנה שיצביע על אובייקט השורש:

1
2
3
4
5
6  
var XMLroot = xmlDoc.documentElement;

title = XMLroot.childNodes.item(0).childNodes.item(0).text;
author = XMLroot.childNodes.item(0).childNodes.item(1).text;
pages = XMLroot.childNodes.item(0).childNodes.item(2).text;
year = XMLroot.childNodes.item(0).childNodes.item(3).text;


הצגת כל הנתונים בטבלה

ניצור קובץ html חדש ונוסיף סקריפט שייטען את קובץ ה-XML ב-body:

1
2
3
4
5  
<script>
//יצירת אובייקט חדש וטעינת הקובץ
var xmlDoc = new ActiveXObject("microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("library.xml")


נוסיף מצביע לענף השורש:

1  
var XMLroot = xmlDoc.documentElement;


ניצור טבלה חדשה שתכיל את העמודות - Title, Author, Pages, Year:

1
2
3  
document.write("<table border='1'>\n<tr>\n")
document.write("<th>Title</th><th>Author</th><th>Pages</th><th>Year</th>\n")
document.write("</tr>\n")


נשתמש בלולאת for בכדי לעבור על כל הענפים.
בכדי לקבל את מספר הענפים, נשתמש בתכונה:

1  
xmlDoc.documentElement.childNodes.length;


חשוב לזכור, כי שיטה זאת מחזירה את מספר הענפים, ולכן מספר הענף האחרון יהיה:

1  
xmlDoc.documentElement.childNodes.length-1;


(מכיוון שמספור הענפים מתחיל מ-0)

ניצור לולאה שתעבור על כל הענפים:

1
2
3
4  
//JavaScript
for (i = 0; i <= XMLroot.childNodes.length-1; i++) {

}




1
2
3
4  
'VBScript
For i = 0 To XMLroot.childNodes.length-1

Next


נוסיף קוד להצגת הנתונים בתוך לולאת ה-for שיצרנו:

1
2
3
4
5
6  
document.write("<tr>\n");
document.write("<td>"+XMLroot.childNodes.item(i).childNodes.item(0).text+"</td>");
document.write("<td>"+XMLroot.childNodes.item(i).childNodes.item(1).text+"</td>");
document.write("<td>"+XMLroot.childNodes.item(i).childNodes.item(2).text+"</td>");
document.write("<td>"+XMLroot.childNodes.item(i).childNodes.item(3).text+"</td>");
document.write("</tr>");


נסגור את הטבלה ונסיים את הסקריפט:

1
2  
document.write("</able>");
</script>


הקוד במלואו:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25  
<html>
<head>
 <title>Library</title>
</head>
<body>
<script>
var xmlDoc = new ActiveXObject("microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("library.xml") //טעינת הקובץ
var XMLroot = xmlDoc.documentElement;
document.write("<table border='1'><tr>\n")
document.write("<th>Title</th><th>Author</th><th>Pages</th><th>Year</th>\n")
document.write("</tr>\n")
for (i = 0; i <= XMLroot.childNodes.length-1; i++) {
    document.write("<tr>\n");
    document.write("<td>"+XMLroot.childNodes.item(i).childNodes.item(0).text+"</td>");
    document.write("<td>"+XMLroot.childNodes.item(i).childNodes.item(1).text+"</td>");
    document.write("<td>"+XMLroot.childNodes.item(i).childNodes.item(2).text+"</td>");
    document.write("<td>"+XMLroot.childNodes.item(i).childNodes.item(3).text+"</td>");
    document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>


שימוש ב-innerText

ניתן להשתמש ב-span ובשיטה innerText בכדי להכניס את תוכן קובץ ה- XML לתוך מסמך HTML.

נפתח קובץ HTML חדש, ונוסיף לו spanים:

1
2
3
4
5
6
7
8
9
10
11  
<html>
<head>
    <title>Library</title>
</head>
<body>
<b>Title:</b> <span id="title"></span><br>
<b>Author:</b> <span id="author"></span><br>
<b>Pages:</b> <span id="pages"></span><br>
<b>Year:</b> <span id="year"></span><br>
</body>
</html>


נוסיף סקריפט ב- head שיטען את קובץ ה-XML ויכניס את הנתונים לתוך ה-span.

1
2
3
4
5
6
7
8  
<script>
//יצירת אובייקט חדש וטעינת הקובץ
var xmlDoc = new ActiveXObject("microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("library.xml")

//יצירת מצביע לאובייקט השורש
var XMLroot = xmlDoc.documentElement;


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

1
2
3
4
5
6  
function readXML() {
  title.innerText = XMLroot.childNodes.item(0).childNodes.item(0).text;
  author.innerText = XMLroot.childNodes.item(0).childNodes.item(1).text;
  pages.innerText = XMLroot.childNodes.item(0).childNodes.item(2).text;
  year.innerText = XMLroot.childNodes.item(0).childNodes.item(3).text;
}


נסגור את הסקריפט וכדי לקרוא לפונקציה לאחר טעינת הקובץ, נשתמש באירוע onLoad:

1
2
3
4  
</script>

<body onLoad="readXML()">



זהו, למדנו במאמר זה לקרוא קובץ XML עם האובייקט microsoft.XMLDOM בשתי שיטות שונות:
  • ע"י documen.write.
  • ע"י שימוש ב-innerText.
בהצלחה!
תגיות: JS‏  /  VBS‏  /  ASP‏  /  XML‏  /  DOM‏  

תגובות בפייסבוק

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות