Parse XML with jQuery Ajax Sitemaplearn how to parse or process an XML document and display the data on a page in HTML.
<style type="text/css">
ol,ul{list-style:none;}
body {color:#333;font-family:Helvetica, Arial, sans-serif;Font-size:16px;}
#wrap {width:700px;margin:10px auto;}
#loading {display:none;}
#loading img {vertical-align:middle;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function() {
alert ('Start loading from xml?');
$("#loading").show();
$.ajax({
type: "GET",
url: "sitemap.xml",
dataType: "xml",
success: parseXml
});
function parseXml(xml) {
$(xml).find("url").each(function() {
//find each instance of loc in xml file and wrap it in a link
$("ul#site_list").append('<li>' + '<a href="' + $(this).find("loc").text() + '">' + $(this).find("loc").text() + '</a>' + '</li>');
$("#loading").hide();
});
}
});
</script>
<div id="wrap">
<h1>Parse XML with jQuery Sitemap</h1>
<ul id="site_list">
<li id="loading"><img src="images/ajax-loader.gif" alt="loading" /> Loading Data..</li>
</ul>
</div>
Download
http://dl.dropbox.com/u/3293191/r-ednalan/jquery_xml.zip
