במאמר זה אני אסביר כיצד לקרוא קובץ 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. פנייה אליו תתבצע ע"י:
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-1Next
|
|
נוסיף קוד להצגת הנתונים בתוך לולאת ה-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.
בהצלחה!
Facebook
Twitter
RSS
תגובות בפייסבוק