Scribd Logo
Upload

Welcome to Scribd!

  • XML Can Be Used To Store Data Inside HTML Documents

    Uploaded by

    Palak Singh
    507 views4 pages
    XML can be used to store data inside HTML documents.docx

    Original Title

    XML can be used to store data inside HTML documents.docx

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    XML can be used to store data inside HTML documents.docx

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    507 views4 pages

    XML Can Be Used To Store Data Inside HTML Documents

    Uploaded by

    Palak Singh
    XML can be used to store data inside HTML documents.docx

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    EMBEDDING XML IN HTML DOCUMENT

    XML can be used to store data inside HTML documents. XML data can be stored inside HTML pages as "Data Islands". As HTML provides a way to format and display the data, XML stores data inside the HTML documents. The data contained in an XML file is of little value unless it can be displayed, and HTML files are used for that purpose. The simple way to insert XML code into an HTML file is to use the <xml> tag. The XML tag informs, the browser that the contents are to be parsed and interpreted using the XML parser. Like most other HTML tags, the <xml> tag has attributes. The most important attribute is the ID, which provides for the unique naming of the code. The contents of the XML tag come from one of two sources : inline XML code or an imported XML file.

    If the code appears in the current location , it's said to be inline.


    Example Embedding XML code inside an HTML File. <html> <xml Id = msg> <message> <to> Visitors </to> <from> Author </from> <Subject> XML Code Islands </Subject> <body> In this example, XML code is embedded inside HTML code </body> </message> </xml> </html>

    The efficient way is to create a file and import it. You can easily do so by using the SRC attribute of the XML tag.
    Syntax

    <xml Id = msg SRC = "example1.xml"> </xml>

    Data Binding
    Data binding involves mapping, synchronizing, and moving data from a data source, usually on a remote server, to an end user's local system where the user can manipulate the data. Using data binding means that after a remote server transmits data, the user can perform some minor data manipulations on their own local system. The remote server does not have to perform all the data manipulations nor repeatedly transmit variations of the same data.

    Data binding involves moving data from a data source to a local system, and then manipulating the data, such as, searching, sorting, and filtering, it on the local system. When you bind data in this way, you do not have to request that the remote server manipulate the data and then retransmit the results; you can perform some data manipulation locally.

    In data binding, the data source provides the data, and the appropriate applications retrieve and synchronize the data and present it on the terminal screen. If the data changes, the applications are written so they can alter their presentation to reflect those changes. Data binding is used to reduce traffic on the network and to reduce the work of the Web server, especially for minor data manipulations. Binding data also separates the task of maintaining data from the tasks of developing and maintaining binding and presentation programs.

    Advantages
    Ease of use The method allows embedding of XML display section into existing HTML page with minimal modifications of your code. In fact you should copy-paste 3 lines of code and place two files into your folder. Cross-browser I've tested the code with Forefox 2, IE6 and IE7. All work nicely. Syntax highlighting In the displayed XML, the content is highlighted based on it's meaning: node names, node content, attributes and their names. All this are easily controlled through the CSS file. Trust me, you need no knowledge of CSS to change the XML appearance. Collapsible The XML display is dynamic. Your client can collapse and expand any node. Complete AJAX The code is completely executed at the client's machine. First the web page is loaded and only after it, the shown XML is streamed and presented. Consequently, the LoadXML method can be executed at any time to reload executed another asynchronous call to the server and to load the XML obtained as a result of that code.

    Usage
    Embedding XML viewer into existing HTML code couldn't be simpler.

    First, place the two following files: one and two into some folder of your site. Next, alter your HTML web page in the following way:

    That's it. The only things you may want to change are the pathes to the css and the js files and the name of the xml file in the call to the LoadXML method. If you use this script for debugging AJAX application, you may manually callLoadXML, LoadXMLDom or LoadXMLString functions. As first parameter, each of them receives ID of the HTML element (usually, div) intended to contain the displayed XML. Alternatively, you may send the HTML element DOM object itself, not its ID. The second parameter differs depending on the function: LoadXMLreceives request to the server which will be executed asynchronously.LoadXMLDom receives DOM object containing arbitrary XML. Finally, LoadXMLString receives the string of the XML to be displayed. Each of these functions returns true if they were successfully executed (notice, that LoadXML returns immediately after sending request to the server and does not know whther the call passed through).

    Demo
    <html> <head> <title>My First chart using FusionCharts XT using XML data embedded in the page</title> <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script> </head> <body> <div id="chartContainer">FusionCharts XT will load here</div> <script type="text/javascript"><!-var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "400", "300", "0"); myChart.setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " + "yAxisName='Sales' numberPrefix='$'>" + "<set label='Week 1' value='14400' />" +

    "<set label='Week 2' value='19600' />" + "<set label='Week 3' value='24000' />" + "<set label='Week 4' value='15700' />" + "</chart>"); myChart.render("chartContainer"); // --> </script> </body> </html>

    In the above code, we have provided the entire XML data as a string inside the code itself and passed it to the chart using the setXMLData() method. There are certain pointers to be kept in mind when using the Data String method:

    If you use double quotation marks for specifying string parameters in JavaScript, use single quotes to specify attribute values in the XML. Else, it will result in a syntax error. If an XML attribute has single quotation mark (') or double quotation marks (") as part of its value, encode them as XML entities. The encoded form of single quotation mark (') is &apos; and the encoded form of double quotation marks (") is &quot;. If you have special characters like &, <, and > in your XML, you must encode them as &amp;, &lt; and &gt; (respectively) in your XML String.

    You might also like