How to read and display XML content in HTML page?

Hi all,

I have a XML RSS feed from a website.content of feed is shown below.
Name model year
Ford. RTT. 2013
Dodge. ABC. 2014

Now I have an another website where I want to display the content in different customized look in HTML. So when ever the feed is updated the content in my page will also be updated.
How to achieve this in HTML. I am a newbie to this.


Thanks
Deeigi

 

You could use a server language such as php to read that rss feed as xml and then process the elements you want

 

Thanks for quick reply..I have have website as shown in screen shot below


I have used jquery mobile for this list display.
source code for the same

<ul data-role="listview" data-inset="true">
    <li><a href="#">
        <img src="../_assets/img/album-bb.jpg">
    <h2>Broken Bells</h2>
    <p>Broken Bells</p></a>
    </li>
    <li><a href="#">
        <img src="../_assets/img/album-hc.jpg">
    <h2>Warning</h2>
    <p>Hot Chip</p></a>
    </li>
    <li><a href="#">
        <img src="../_assets/img/album-p.jpg">
    <h2>Wolfgang Amadeus Phoenix</h2>
    <p>Phoenix</p></a>
    </li>
</ul>

HTML:

Now instead of the heading and sub heading and image url and href url i want it dynamic from a xml rss .
How do i code for the same.Help me learn
I found this w3school link but when i tried to add the same code between <ul> .Nothing was displayed.
http://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table

 

Yes the reason I didn't mention using Ajax to get this is due to "Same-Origin Policy", Ajax is not allowed to get data from another domain.

Put the xml file on your server and point to it with the code you have there and you should see it work with that code (at least allow you to get your UI Developed).

Once you see that working need to look into a method for allowing cross domain scripting. Following I can think of:

1. Server Side Proxy -
Use PHP, ASP etc to communicate with the other server so you javascript just needs to communicate with its own server. (I would go with this way if possible)

2. document.domain -
This is a IFrame in your code that actually pretends to be the site in question (allowing the request to work in there), will require a fair few changes to your script

3. Cross-Origin Resource Method
This one uses a new feature (its still a working draft spec) that allows you to provide headers on both client and server to determine if it should allow the connection or not.


To do the PHP method add this to your server as proxy.php (may want to think of a better name in production)

<?php
$file = file_get_contents($_GET['requrl']);
echo $file;
?>
<?php
$file = file_get_contents($_GET['requrl']);
echo $file;
?>

Code (markup):

Your script then becomes

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhtt p.open("GET","proxy.php?requrl=",false);
xmlhtt p.send();
xmlDoc=xmlhtt p.responseXML;

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
  {
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");

Code (markup):

Let me know if this helps