Sometimes, there is a need to display XML files within HTML. Usually, one needs this to debug AJAX applications when it's unclear whether the bug resigns on the server resulting in faulty XML sent to the client, or the client is just unable to handle the perfectly formatted XML.

Another common usage of this script is documentation of some custom XML format when it's important to embed that XML into some WEB page

With the following code, tracking and inspecting XML files or just their transmission to client and representation is as simple as linking your HTML to one JS and one CSS files! Just copy-paste four lines of code. Then, some section within your HTML page can automatically display arbitrary XML (be that fixed string, file or server response) and dynamically update it at any time.

Table of Content

Example
Advantages
Usage
Support

First of all, the example:

The XML sample is taken from here.

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 asynchronouse call to the server and to load the XML obtained as a result of that code. See Usage for more details.

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:

You won't believe it, but... 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. Enjoy.

If you use this script for debugging AJAX application, you may manually call LoadXML, 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: LoadXML receives 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).

Support:

And finally. You are most welcome to use the forum to post the questions, feature requests and cries for help you might have. Another option is a direct e-mail to me. I'll do my best to help.

Other WEB Tips & Tricks