In this tutorials you will know how to parse XML using jQuery ,Using jQuery to parse XML is vaguely reminiscent of LINQ in the recent .NET frameworks.
Read The Full Tutorial.
In this tutorials you will know how to parse XML using jQuery ,Using jQuery to parse XML is vaguely reminiscent of LINQ in the recent .NET frameworks.
Here is the XML example:
<?xml version="1.0" encoding="utf-8" ?>
<RecentTutorials>
<Tutorial author="The Reddest">
<Title>Silverlight and the Netflix API</Title>
<Categories>
<Category>Tutorials</Category>
<Category>Silverlight 2.0</Category>
<Category>Silverlight</Category>
<Category>C#</Category>
<Category>XAML</Category>
</Categories>
<Date>1/13/2009</Date>
</Tutorial>
<Tutorial author="The Hairiest">
<Title>Cake PHP 4 - Saving and Validating Data</Title>
<Categories>
<Category>Tutorials</Category>
<Category>CakePHP</Category>
<Category>PHP</Category>
</Categories>
<Date>1/12/2009</Date>
</Tutorial>
<Tutorial author="The Tallest">
<Title>Silverlight 2 - Using initParams</Title>
<Categories>
<Category>Tutorials</Category>
<Category>Silverlight 2.0</Category>
<Category>Silverlight</Category>
<Category>C#</Category>
<Category>HTML</Category>
</Categories>
<Date>1/6/2009</Date>
</Tutorial>
<Tutorial author="The Fattest">
<Title>Controlling iTunes with AutoHotkey</Title>
<Categories>
<Category>Tutorials</Category>
<Category>AutoHotkey</Category>
</Categories>
<Date>12/12/2008</Date>
</Tutorial>
</RecentTutorials>
Here write some jQuery to request the XML document:
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "jquery_xml.xml",
dataType: "xml",
success: parseXml
});
});
Now we can start parsing the XML:
function parseXml(xml)
{
//find every Tutorial and print the author
$(xml).find("Tutorial").each(function()
{
$("#output").append($(this).attr("author") + "<br />");
});
// Output:
// The Reddest
// The Hairiest
// The Tallest
// The Fattest
}
Here is a simple HTML span object with an id of "output":
//print the date followed by the title of each tutorial
$(xml).find("Tutorial").each(function()
{
$("#output").append($(this).find("Date").text());
$("#output").append(": " + $(this).find("Title").text() + "<br />");
});
// Output:
// 1/13/2009: Silverlight and the Netflix API
// 1/12/2009: Cake PHP 4 - Saving and Validating Data
// 1/6/2009: Silverlight 2 - Using initParams
// 12/12/2008: Controlling iTunes with AutoHotkey
|
Ajax Projects
