Use WMS GetCapabilities XML+XSL+Javascript to create simple map client

The Extensible Stylesheet Language (XSL) includes both a transformation language and a formatting language. Each of these, naturally enough, is an XML application. The transformation language provides elements that define rules for how one XML document is transformed into another XML document.
The transformed XML document may use the markup and DTD of the original document, or it may use a completely different set of elements. In particular, it may use the elements defined by the second part of XSL, the formatting objects.

The transformation and formatting halves of XSL can function independently of each other. For instance, the transformation language can transform an XML document into a well-formed HTML file, and completely ignore XSL formatting objects.

The file WMS_GetCapabilities.xml contains the capabilities information of a WMS server. In this file a XSL file called WMS_GetCapabilities_with_XSLT.xsl is invoked in the processing instruction. The XSL file contains the commands for the transformation of this XML file into a HTML file.

WMS_GetCapabilities.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="WMS_GetCapabilities_with_XSLT.xsl"?>
<WMT_MS_Capabilities version="1.1.1">
<Service>
<Name>OGC:WMS</Name>
<Title>LUBW (BW) Kartendienst GDI_SCHUTZGEBIET_NATUR</Title>
<Abstract>LUBW GDI_SCHUTZGEBIET_NATUR Web Map Service</Abstract>
.......................

WMS_GetCapabilities_with_XSLT.xsl

......

<xsl:for-each select="WMT_MS_Capabilities/Capability/Layer/Layer[Name=0]">
<img>
<xsl:attribute name="src">
<xsl:value-of select="Style/LegendURL/OnlineResource/@xlink:href"/>
</xsl:attribute>
</img><xsl:text disable-output-escaping="yes"> </xsl:text>
<xsl:value-of select="Name"/>:
<xsl:value-of select="Title"/><br />
</xsl:for-each>
......

This code(only part) could extract layer information from XML file and display as HTML content like this:

Now put the layer control in a form element and add a check box for each layer which could be used to make this layer visible or not.
Then embed image related to each layer into the content div which should be explicitly overlaid by using a JavaScript. These images are derived directly and dynamically from the WMS server.