XML Files with Javascript

[kadhababu]

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.

<catalog>
-<product description="Cardigan Sweater" product_image="cardigan.jpg">
-<catalog_item gender="Men's">
-<item_number>
QWZ5671
</item_number>
-<price>
39.95
</price>
-<size description="Medium">
-<color_swatch image="red_cardigan.jpg">
Red
</color_swatch>
-<color_swatch image="burgundy_cardigan.jpg">
Burgundy
</color_swatch>
</size>
-<size description="Large">
-<color_swatch image="red_cardigan.jpg">
Red
</color_swatch>
-<color_swatch image="burgundy_cardigan.jpg">
Burgundy
</color_swatch>
</size>
</catalog_item>
-<catalog_item gender="Women's">
-<item_number>
RRX9856
</item_number>
-<price>
42.50
</price>
-<size description="Large">
-<color_swatch image="navy_cardigan.jpg">
Navy
</color_swatch>
-<color_swatch image="black_cardigan.jpg">
Black
</color_swatch>
</size>
</catalog_item>
</product>
<product description="Cardigan Sweater" product_image="cardigan.jpg" />
</catalog>

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.

[nobita_deptrai]

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:
HTML Code

[Watsonreo]

The code runs entirely in the client machine. First web page is loaded, and then only shows the XML is transmitted and presented. Consequently, the method can be executed at any time LoadXML to run another asynchronous call to load the server and load the XML obtained as a result of that code.

[kiruthika]

The object is called XMLWriter.Is one method of writing the code in XML files.
Begin a node.
End the node.
Attribute name.
Close.
To string.