The XML data source object is an ActiveX control that allows you to operate data between an XML file and an HTML page. This article will show you how to extract data from various XML data sources and how to use JavaScript to display the data.
The XML data source object DSO is a Microsoft ActiveX Control built on Versions later than Microsoft ie4. This object allows you to extract an external XML file or content embedded in an HTML file to an HTML page.
You can use XML-DSO to select content from an external XML file on a Web page, extract XML data from the XML embedded in the web page, and then use JavaScript to operate on the data. However, it is not recommended to use this object on the Internet, because DSO can only work in browsers above MSIE 4, which may cause compatibility issues. Therefore, it is very appropriate to use XML-DSO in the enterprise intranet.
Start
To initialize an XML-DSO object, we use the <Object> tag. The classid for XML-DSO is:
CLSID: 550dda30-0541-11d2-9ca9-0060b0ec3d39
This ID uniquely identifies XML-DSO. Use the followingCodeInitialize this control on a web page:
<Object ID = "someid" classid = "CLSID: 550dda30-0541-11d2-9ca9-0060b0ec3d39"> </Object>
While most objects require many parameters to be associated with, the XML-DSO does not require any parameters.
Extract data using an XML data island
First, you can use the <XML> tag to include an XML data island. Next, assign it an ID, xmldb -- for future use. Data is actually extracted using HTML tags: <alt>, <span>, <div>, and so on. The code in code list 1 uses the <span> flag. The datasrc attribute specifies the data island from which you want to extract data. The dataworks attribute specifies the XML tag of the data you want. Therefore, the first <span> extracts the name, and the second <span> extracts the gender.
Code List 1:
<! -- Example1.htm --> <HTML> <Head> <Title> XML DSO-example1.htm </title> </Head> <Body bgcolor = "# ffffff"> <XML id = "xmldb"> <DB> <Member> <Name> premshree Pillai <Name> <Sex> male </sex> </Member> <Member> <Name> Vinod </Name> <Sex> male </sex> </Member> </DB> </XML><Span datasrc = "# xmldb" dataworkflow = "name" </span> <Br> <Span datasrc = "# xmldb" dataworks = "sex"> </span> </Body> </Html> |
Note that this code does not initialize a XML-DSO object. This is because an XML data island has been implicitly created. The output should be:
Premshree Pillai
Male
Note that there are two <Name> and <sex> tags in the XML data island. With this method, you can only extract the first instance in these tags. The code in code list 2 uses the <Table> flag to extract all instances:
The output will be:
Name |
Sex |
Premshree Pillai |
Male |
Vinod |
Male |
In code list 2, the <Table> tag uses the <div> tag in the <TD> tag to extract data. The table will automatically repeat each instance of <member> (<Name> and <sex>.
Code List 2:
<! -- Example2.htm --> <HTML> <Head> <Title> XML DSO-example2.htm </title> </Head> <Body bgcolor = "# ffffff"><XML id = "xmldb"> <DB> <Member> <Name> premshree Pillai <Name> <Sex> male </sex> </Member> <Member> <Name> Vinod </Name> <Sex> male </sex> </Member> </DB> </XML> <Table datasrc = "# xmldb" border = "1"> <Thead> <TH> name </Th> <TH> sex </Th> </Thead> <Tr> <TD> <Div dataworks = "name"> </div> </TD> <TD> <Div dataworks = "sex"> </div> </TD> </Tr> </Table> </Body> </Html> |
Extract data using external XML files
To load an external XML file using a XML-DSO, you must explicitly include this object and use some JavaScript.
First create a XML-DSO object using ID myxml. Add the width and height attributes to the <Object> tag and set them to 0. This ensures that XML-DSO objects do not occupy any space on your web page.
Second, use datasrc to create a table like myxml-similar to that in code list 2. The Code uses the <div> flag (marked in TD) to extract data, use dataworks as the information in the first column, and use URL as the second column. Add the <SCRIPT> tag, because the external XML uses the Java Script to explicitly declare the XML file you want to load.
Set xmldso to myxml. xmldocument. Myxml references the created object. Next, load example3.xml using the load () method of the XML-DSO. File example3.xml is connected to the object myxml.
<! -- Example3.xml --> <? XML version = "1.0"?> <Ticker> <Item> <Message> JavaScript ticker using xml dso </message> <URL> http://someURL.com </URL> </Item> </Ticker> |
Now, study the following HTML page:
<! -- Example3.htm --> <HTML> <Head> <Title> XML DSO-example3.htm </title> <Script language = "JavaScript"> Function load (){ VaR xmldso = myxml. xmldocument; Xmldso. Load ("example3.xml "); } </SCRIPT> </Head> <Body bgcolor = "# ffffff" onLoad = "load ()"><Object ID = "myxml" classid = "CLSID: 550dda30-0541-11d2-9ca9-0060b0ec3d39" Width = "0" Height = "0"> </Object> <Table datasrc = "# myxml" border = "1"> <Thead> <TH> message </Th> <TH> URL </Th> </Thead> <Tr> <TD> <Div dataworks = "message"> </div> </TD> <TD> <Div dataworks = "url"> </div> </TD> </Tr> </Table> </Body> </Html> |
The output should be:
Message URL
Javascript ticker using xml dso http://someURL.com
The above script is very special. A more general script is provided below:
<Script language = "JavaScript"> VaR xmldso; Function load (xmlfile, objname ){ Eval ('xmldso = '+ objname +'. xmldocument '); Xmldso. Load (xmlfile ); } </SCRIPT> Now, to load any XML file use: Load ("somexmlfile. xml", "anyxmldsoobject "); |
Using XML-DSO and JavaScript
Suppose you have an XML file containing the name, email address, and phone number. You want to use it to build an applicationProgram, Show each person's file-one at a time. The user will use the "Next" and "previous" buttons to browse everyone's data. Javascript can help you achieve this purpose.
The following code uses the record set method to save all the data in the file to a variable memberset. The movenext () method points to the next data item (next row ). The script then loads the XML file example4.xml and saves the record to the variable memberset. The first record is displayed, but memberset. movenext () points to the next record in the file relative to the previous specified data.
<! -- Example4.xml --> <? XML version = "1.0"?> <Mydb> <Member> <Name> premshree Pillai </Name> <Sex> male </sex> </Member> <Member> <Name> Vinod </Name> <Sex> male </sex> </Member> <Member> <Name> Santhosh </Name> <Sex> male </sex> </Member> </Mydb> |
Here is the corresponding HTML file:
<! -- Example4.htm --> <HTML> <Head> <Title> XML DSO-example4.htm </title> <Script language = "JavaScript"> Function load (){ VaR xmldso = mydb. xmldocument; Xmldso. Load ("example4.xml ");/* Get the complete record set */ VaR memberset = mydb. recordset; /* Go to next data */ Memberset. movenext (); } </SCRIPT> </Head> <Body bgcolor = "# ffffff" onLoad = "load ()"> <Object ID = "mydb" classid = "CLSID: 550dda30-0541-11d2-9ca9-0060b0ec3d39" Width = "0" Height = "0"> </Object> <Span datasrc = "# mydb" dataworks = "name"> </span> </Body> </Html> |
The output should be:
Vinod
The following provides more methods to operate a XML-DSO using JavaScript:
· Moveprevious (): refers to the first data item.
· Movefirst (): point to the first data item.
· Movelast (): point to the last data item.
· EOF: This attribute is used to check whether we have reached the bottom of the data record.
Using XML-DSO and JavaScript
Suppose you have an XML file containing the name, email address, and phone number. You want to use it to build an application that displays each person's file-one at a time. The user will use the "Next" and "previous" buttons to browse everyone's data. Javascript can help you achieve this purpose.
The following code uses the record set method to save all the data in the file to a variable memberset. The movenext () method points to the next data item (next row ). The script then loads the XML file example4.xml and saves the record to the variable memberset. The first record is displayed, but memberset. movenext () points to the next record in the file relative to the previous specified data.
<! -- Example4.xml --> <? XML version = "1.0"?> <Mydb> <Member> <Name> premshree Pillai </Name> <Sex> male </sex> </Member> <Member> <Name> Vinod </Name> <Sex> male </sex> </Member> <Member> <Name> Santhosh </Name> <Sex> male </sex> </Member> </Mydb> |
Here is the corresponding HTML file:
<! -- Example4.htm --> <HTML> <Head> <Title> XML DSO-example4.htm </title> <Script language = "JavaScript"> Function load (){ VaR xmldso = mydb. xmldocument; Xmldso. Load ("example4.xml ");/* Get the complete record set */ VaR memberset = mydb. recordset; /* Go to next data */ Memberset. movenext (); } </SCRIPT> </Head> <Body bgcolor = "# ffffff" onLoad = "load ()"> <Object ID = "mydb" classid = "CLSID: 550dda30-0541-11d2-9ca9-0060b0ec3d39" Width = "0" Height = "0"> </Object> <Span datasrc = "# mydb" dataworks = "name"> </span> </Body> </Html> |
The output should be:
Vinod
The following provides more methods to operate a XML-DSO using JavaScript:
· Moveprevious (): refers to the first data item.
· Movefirst (): point to the first data item.
· Movelast (): point to the last data item.
· EOF: This attribute is used to check whether we have reached the bottom of the data record.
Initticker () first checks whether IE 4 + exists. If the browser is ie4 +, the XML file is passed and loaded as a parameter. If the timer fails, call the xmldsoticker () function. In addition to the xmlfile parameter, xmldsoticker () has the same parameters as initticker () because the XML file has been loaded. Xmldsoticker () checks whether the variable counter (initially maxmsgs) is smaller than the maxMsgs-1. If yes, the movenext () method points to the next data item in the tickerset.
The body of the HTML page contains the following code:
<A href = "datasrc =" # ticker "dataworks =" url "class =" tickerstyle "> <Span datasrc = "# ticker" dataworkflow = "message"> </span> </A> |
Figure 1: The timer application displays the output.
In this Code, <A> mark the URL of the XML file as its dataworks. <Span> mark the information of the XML file as its dataworks. This information is displayed in the <span> element, and the entire information can be connected through the URL corresponding to this information.
In this way, the <A> and <span> elements contain the next data item (URL and information ). After a delay, <A> and <span> point to the next data. This happens as long as counter <maxMsgs-1 (counter increments each time. If counter <The maxMsgs-1 is false, the counter is set to 0 and then points to the first data item in the tickerset.