Read XML using JQuery

Read a XML file is very useful if we need add dynamic content on web pages, no exactly from Database, just if we have other external resource and display on some DIV or formatting text.

In this example I have a XML file with content for paragraph and the color text for this one, I’ll load the XML and add the new paragraph on body with the text color corresponding.

First one we have to have the XML file (content.xml) correctly like this :


<textcolor><![CDATA[#C3C3C3]]></textcolor>

<paragraph><![CDATA[This is a Paragraph]]></paragraph>

</style>

Second one, using JQuery load the XML file through $.ajax, like this:

$(document).ready(function(){
$.ajax({
type: "GET",
url: "content.xml",
dataType: "xml",
success: function(xml){
var textcolor = $(xml).find("textcolor").text();
var paragraph = $(xml).find("paragraph").text();

$("body").html("<p style='color:"+textcolor+"'>"+paragraph+"</p>");
}
})

})

As you can see is very simple the use of  XML files on HTML using JQuery, the  next time I´ll try to create a bucle “for” to load a collection data from XML file

 

 

 

Tagged with: , ,
Posted in Uncategorized