jQuery Demo: Working With XML Documents

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>jQuery Demo: Using jQuery With XML</title>
 
	<!-- Linked files. -->
	<script type="text/javascript" src="jquery-latest.pack.js"></script>
	<script type="text/javascript">
 
		// This function will handle the xml Onload event
		// handler. It will be passed the XML data object
		// and the status of the XmlHttpRequest object.
		function XmlOnLoad( xmlData, strStatus ){
			// Let's start out by converting the XML data
			// returned by the AJAX request into a jQuery
			// XML document object model.
			var jData = $( xmlData );
 
			// Get the person object (but only if it is a girl).
			var jGirl = jData.find( "person[ type = 'girl' ]");
 
			// Get the direct children of the girl. These
			// will represent the sections of the body.
			var jSections = jGirl.children();
 
			// For each of the section, we want to create
			// an element in the girl definition list. Get a
			// pointer to said definition list.
			var jList = $( "#girl" );
 
 
			// For each section, create a list item.
			jSections.each(
				function( intSectionIndex ){
					var jSection = $( this );
					var jTerm = $( "<dt></dt>" );
 
					// Set the term text.
					jTerm.text( jSection[ 0 ].nodeName );
 
					// Append term to list.
					jList.append( jTerm );
 
 
					// Now, for each part of the section, we are
					// going to need to create a list.
					jSection.children().each(
						function( intPartIndex ){
							var jPart = $( this );
							var jDef = $( "<dd></dd>" );
 
							// Set the DD text.
							jDef.text(
								" - " +
								jPart[ 0 ].nodeName + ": " +
								jPart.attr( "value" )
								);
 
							// Append to list.
							jList.append( jDef );
						}
						);
				}
				);
		}
 
 
		// When the document has loaded, request the girl
		// XML object which will then use to populate the
		// XHTML document.
		$(
			function(){
				$.get(
					"girl.xml.cfm",
					{},
					XmlOnLoad
					);
			}
			);
 
	</script>
</head>
<body>
 
	<h1>
		jQuery Demo: Using jQuery With XML
	</h1>
 
	<dl id="girl"></dl>
 
</body>
</html>

For Cut-and-Paste