במאמר הקודם עבודה עם DataShape Provider הסברתי כיצד לבנות עץ בעזרת DATASHAPE PROVIDER בצד השרת. במאמר היום נבנה את אותו עץ אבל בצד של הלקוח בעזרת XML ו-JS.
כדי לבנות את העץ בצד של הלקוח עלינו להעביר אליו קובץ XML ולאחר מכן לעבד את הקובץ לעץ בעזרת גאווה סקריפט ואובייקט ה XMLDOM הפרסר של אינטרנט אקספלורר. כמובן שהתוכנית הזאת תעבוד רק באקספלורר, אבל למי איכפת.
הקובץ שנשתמש בו בצד של הלקוח יהיה treexml.asp אבל באותה מידה הוא יכול להיות גם עם סיומת HTM שכן הוא לא מבצע שום Server side action.
כל הקובץ יהיה מורכב מפונקציה אחת של גאווה סקריפט המחולקת לשני חלקים, החלק הראשון יקרא בעזרת XMLHTTP לקובץ ASP שנמצא על הסרוור ויבנה את ה XML שיועבר בחזרה אל הגאווה סקריפ בצורת סטריים ביאנרי. החלק השני של הסקריפט, יעבד את הסטריים הבאנרי לעץ.
נשתמש באותה טבלה שבנינו במאמר הקודם בצורה הירארכית.
קובץ treexml.asp:
<![CDATA[<Body onload=createtree() dir=rtl>
<div id=tree></div>
<SCRIPT LANGUAGE=javascript>
function createtree(){
var url="datashapexml.asp" הגדרת הקובץ בסרוור
var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP”); קריאה לאובייקט
xmlhttp.Open("POST",url,false); הגדרת הבקשה
xmlhttp.Send(); שליחת הבקשה
}
]]>
בשלב זה אובייקט ה XMLHTTP שולח אל הסרוור בקשה להעלאת קובץ, לפני שנמשיך בסקריפט בצד של הקליינט, בואו נסתכל מה קורה עם הקובץ datashapexml.asp שמופעל בסרוור. <![CDATA[<%
option explicit
dim rs , cn, SQL, strSQL, strConn
dim m_searchobjStream
Response.CharSet = "ISO-8859-8-i" כדאי לדאוג שהמשתמש יקבל ישר עברית לוגית
On Error Resume Next
ADO נקרא ל3 אובייקטים של
XMLאובייקט זה ישמש להעברת קובץ ה Adodb.stream אנחנו מוסיפים אובייקט נוסף שנקרא
מהסרוור לקליינט בצורה בינארית
set m_searchobjStream = Server.CreateObject("Adodb.Stream”)
set cn = Server.Createobject("Adodb.connection”)
set rs = Server.Createobject("adodb.recordset”)
cn.Provider = "MSDataShape" פתיחת הקונקשיין לבסיס הנתונים עם DATASHAPE PROVIDER
strConnection= "Driver={SQL Server};Server=MyServer;Provider=MSDataShape;Uid=MyUser;_"
"Pwd=MyPSW;Database=MyDatabase;AutoTranslate=No"
cn.Open strConn
ההירארכי SQLה יצירת משפט
strSQL = "SHAPE (SHAPE {SELECT * FROM tblTree where parent_id = 0} “ & _
“APPEND((SHAPE{SELECT * FROM tblTree} “ & _
“APPEND({SELECT * FROM tblTree} “ & _
“RELATE ID to Parent_Id ) AS secLevel) “ & _
“RELATE ID to Parent_Id) AS flevel) AS level”
rs.Open strSQL, cn
if (not RS.eof) and (Err.number = 0) then
אם הרקורד סט לא רייק ולא קיבלנו שום שגיאה בזמן יצירת הרקורדסט
STREAM נשמור את הרקורד סט בתוך אובייקט ה
rs.save m_searchobjStream,1
אם כן נוצרה לנו שגיאה גם בזמן העברת הרקורדסט לתוך האובייקט נקרא לסברוטינה שמטפלת בשגיאות
if Err.number <> 0 then
errHandler
end if
else
אם לא היו רשומות ברקורד סט נקרא לסברוטינה שמטפלת בשגיאות
call errHandler
end if
נקבע את ה CONTENTTYPE של המסמך כ XML
Response.ContentType = "text/xml"
ועכשיו נכתוב את מסמך ה XML עצמו
ENCODING כאשר נוסיף לו בתחילה שוב את ה
.להיות בטוחים שהעסק יחזור אלינו בעברית
Response.Write "<?xml version=1.0 encoding=ISO-8859-8-i ?>" & m_searchobjStream.ReadText()
סגירת הרקורדסט והקוננקשיין ואובייקט הסטריים
rs.Close
set rs=nothing
set m_searchobjStream = nothing
cn.Close
set cn=nothing
Response.flush
במידה והתרחש ארוע שגיאה נטפל בארוע שגיאה ע"י נקיון של אובייקט ה RESPONSE והצגת הודעת השגיאה
sub errHandler
Response.Clear
Response.ContentType = "text/xml"
Response.Write err.description
Response.End
end sub
%>
]]>
מה שנוצר לנו כרגע זה קובץ XML שנראה כך: file.xml
את החלק של ה Schema הסתרתי שכן הוא לא רלוונטי למאמר זה.
שימו לב כיצד בנוי הקובץ
האב הראשי בעץ הוא RS:DATA, מתחתיו אב משני שהוא בעצם האב הראשי בטבלה שלנו מוגר כ Z:ROW ומתחת לכל Z:ROW נמצאת הרמה הראשונה בעץ שלנו שמוגדרת כ flevel ותחת כל flevel נמצאת הרמה השלישית הקרויה secLevel, כזכור את שמות הרמות קבענו במשפט ה SQL וכך גם מתייחס אליהם קובץ ה XML.
לכל רמה בעץ יש אטריביוטיים (attributes שמכילים את שם השדה ואת הערך שהוא מכיל).
בשלב הזה קובץ ה XML נוצר ומועבר בחזרה אל אובייקט ה XMLHTTP בצד הקליינט.
יש מספר פרופרטיס ומתודות לאובייקט ה XMLHTTP אחת מהן היא responseXML בפרופרטי הזה נשתמש להמשך התהליך
<![CDATA[var i,xmlNode,inserttext
]]>נקרא לאובייקט ה XMLDOM נפנה אליו בצורה סיכרוניט ונטען לתוכו את ה responseXML שזה בעצם קובץ ה XML שנראה למעלה ושחזר אלינו מהסרוור.
<![CDATA[xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async = false;
xmlDoc.validateOnParse = true;
xmlDoc.load(xmlhttp.responseXML);
]]>
עכשיו ברצוננו לטייל על קובץ ה XML בכדי לבנות את העץ אותו נציג למשתמש שלנו, לפיכך נגדיר אובייקט siteNode שיהיה הקשר הראשון לנתונים שאנחנו זקוקים להם, הקשר הזה הוא ה NODE שנקרא Z:ROW. בכדי להגיע אליו נוסיף 2 סלאשים שמציינים את העומק שלו בתוך המסמך. אם נרצה להגיע לרמות יותר עמוקות במסמך נוסיף סלאשים, אם נרצה להגיע לרמות יותר גבוהות, נוריד סלאשים.
<![CDATA[var siteNode = xmlDoc.selectNodes("//z:row")
]]>אם המסמך הגיע ריק או שקראה איזו שגיאה נציג למשתמש את הודעת השגיאה, את הודעת השגיאה נכתוב לתוך DIV שיקבל ID בשם TREE. <![CDATA[if (siteNode == null){
tree.innerHTML = Temarery Problem with...., Pleae try latter’;
return false;
{
]]>נגדיר אובייקט ונכניס אליו ערך ריק <![CDATA[var inserttext = "";
]]>נלך לאורך כל הקשרים של האובייקט אותו הגדרנו קודם ב siteNode וניצור מחרוזת של נתונים פלוס תגיות HTML <![CDATA[for (i = 0; i < siteNode.length; i++){
]]>נכניס למחרוזת את הערך של האטרביוט השלישי בשורת ה Z:ROWM עליה אנחנו נמצאים, כזכור האטריביוט השלישי היה שם הענף בעץ. <![CDATA[inserttext=inserttext+"<TR><TD colspan=3>"+siteNode.item(i).attributes[2].nodeValue+"</TD></TR>";
]]>תחת כל Z:ROW קיים הענף הבא flevel נטייל גם עליו ונכניס את הערכים והתגיות לתוך המחרוזת שלנו <![CDATA[for (j=0;j< siteNode.item(i).childNodes.length;j++){
inserttext=inserttext+"<TR><TD> </TD><TD colspan=2>"
inserttext=inserttext+siteNode.item(i).childNodes.item(j).attributes[2].nodeValue+"</TD></TR>";
]]>נטייל גם על הרמה השלישית ונאסוף את הנתונים לתוך המחרוזת שלנו. <![CDATA[for (x=0;x< siteNode.item(i).childNodes.item(j).childNodes.length;x++){
inserttext=inserttext+"<TR><TD> </TD><TD> <TD>"
inserttext=inserttext+siteNode.item(i).childNodes.item(j).childNodes.item(x)_
.attributes[2].nodeValue
inserttext=inserttext+"</TD></TR>";
}
]]>
כרגע יש לנו מחרוזת שנראת כך:
את המחרוזת הזאת נכניס בעזרת innerHTML אל ה DIV שנתתנו לו ID=tree
ואצל המשתמש שלנו, מתנוסס עץ לתפארת.
עד כאן ו .Happy Programing!
לחץ כאן בכדי לראות את הדוגמא בפעולה
|
.png)
