Put HTML5 to read an RSS?

Question

I don’t know much about these deals, I looked before posting here but I didn’t find anything, I don’t know if I’m looking for it right. I’m creating an app in Html5, css3 and javascript. I want to add some site rss to the app but I don’t know how to do it, I’m new to it.. An example of rss:

http://www.windowsteam.com.br/feed/

I will not post code because I do not have a code for it, because I did not find anything in the search, I just have the app ready, without the rss

Answer 1

You could easily read the XML feed with jQuery, which has functions for XML interpretation. However, to read an RSS of another site with HTML and Javascript, will bump into a security restriction, which is the Same Origin Policy (Same Origin Policy). You will not be able to read content from one domain from another.

To get around this, you could create a proxy with some server language, such as PHP, Java or ASP.NET. This proxy would read the RSS content on the server and on your HTML page, with Javascript, you would make a request for your proxy.

Another alternative is to use Google API for RSS. It makes this "proxy" for you and returns the RSS content with JSON, which makes reading much easier. Here’s an example:

 $(function () {
         var urlRss = 'http://www.windowsteam.com.br/feed/';
         $.ajax({
             type: "GET",
             url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(urlRss),
             dataType: 'json',
             error: function (xhr) {
                 var erro = xhr.responseText;
                 alert('Erro ao ler o feed: ' + erro);
             },
             success: function (xml) {
                 values = xml.responseData.feed.entries;
                 for(var i = 0; i < values.length; i++) {
                     var value = values[i];
                     var li = $("<li />");
                     li.html(value.title + "<br />" + value.content);
                     $("#result").append(li);
                 }
                 
             }
         });
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="result">
    
</ul>