PHP and Ajax create advanced RSS aggregators

Ajax|rss| Advanced

RSS aggregators are an application that is particularly suited for building with a standard AJAX engine, but it is often difficult to implement a Cross-domain Ajax request for RSS feeds. In this article, I'll show you how to use a simple PHP function to implement the "bridging" Ajax engine and RSS content.

First, the introduction

Now, developing an RSS aggregator is no longer a difficult task, but developing a high-quality RSS aggregator is still quite difficult. On the other hand, creating a custom aggregator is generally not difficult, and within this aggregator you can provide an interface of your choice. RSS aggregation represents a class of data that is particularly suited to the consumption of an AJAX application because it is in XML format and Ajax is able to display new feedback well without having to refresh the page. However, the problem always exists: it is impossible to implement Cross-domain AJAX requests in a standard AJAX engine. In this article, I'll show you how to use a very simple PHP function to bridge the AJAX engine and remote content (which in this article refers to RSS feeds).

"Hint" This article assumes that you have a basic understanding of PHP and have experience using AJAX and parsing XML. To fully understand the examples provided in this article, you need to download the corresponding source files.

Second, start

Before we begin formally, I would like to briefly describe the Ajax engine we will use to make the request. The engine simplifies Ajax invocation and helps to eliminate the large amount of redundancy that exists when the request is made and the response is dispatched. I'm not going to discuss its constituent code in detail, and I'll just give you a brief description of how we use it in this article.

First, we need to import all of the JavaScript files that make up the engine. The code contained in our index.html file looks like the following:

Once we import the JavaScript file, we can send a request by writing code similar to the following:

Ajaxupdater.update (' Get ', ' url ', callbackmethod); " >

The Ajaxupdater is an object that handles our Ajax calls. We simply call its Update method and pass the requested method, the URL we request, and the callback method we want to delegate the response to.

That's all we need to be concerned about when we make a request. Now, let's focus on customizing the RSS aggregator's capabilities.

Third, entry point

The entry point to the aggregator is the index.html file, which we call from the browser. Here is the code that describes the index:

RSS Aggregation with PHP and Ajax

This file is responsible for importing CSS files that handle our aggregator display and all JavaScript files for creating the aggregator and making Ajax requests.

"Prompt" This article does not discuss the CSS file; we focus on the aggregation and analysis implemented through JavaScript.

The index then defines the DIV tag, which will be used to describe the layout of the received data. It also contains a form with an input field to enter the URL for the RSS feed, and a submit button to send them a request. When the button is clicked, a request is sent to receive the RSS feed back and the response is sent to an object called aggregator; we'll introduce it later when we discuss the use of AJAX technology for remote RSS feedback retrieval.

Iv. cross-Domain AJAX requests

Cross-domain AJAX requests are not possible, but there are some ways to use a server-side language to solve this problem. In this section, I'll discuss how to use PHP to create a bridge between AJAX requests and a remote RSS feed, and then achieve the goal of successfully cross-domain requests. I think you'll probably be amazed at how easy it is to achieve.

PHP provides a local method called File_get_contents that can read the entire contents of a file into a string. If you start the fopen wrapper, this file can be a remote file, which is started by default when you install PHP. If you set the Allow_url_fopen to off in the php.ini file, it is not in a prohibited state. The following code corresponds to the contents of the bridge.php file, and when we submit the form we use index.html to send the request:

?
Header ("Content-type:application/xml; Charset=utf-8 ");
echo file_get_contents ($_get[' feed '));
? >

The first line in the code above is a header (header), which is responsible for setting the content type of the response to valid XML for our Request object. Then, call file_get_contents and combine the feedback url-this is passed through our request from the form within the index.html file. Once this data is ready, the Ajax engine proxies them to the callback method-our aggregator object.

V. Aggregator objects

The aggregator object is responsible for receiving the response from the Ajax engine. The following code shows the object (an array called feedcollection, which will be used to store all of the feedback objects created by the retrieved feedback), and a method called read (corresponding to the callback method of the request issued from the Index.html form). When the callback occurs, the requested readystate is checked by a custom Ajax object method that uses a string that describes the div element that displays the loaded message as a parameter.

aggregator = new Object ();
Aggregator.feedcollection = new Array ();
Aggregator.read = function ()
{
if (ajax.checkreadystate (' loading ') = = "OK")
{
var title = Ajax.getresponse (). getElementsByTagName (' title ') [0].firstchild.data;
var _link = Ajax.getresponse (). getElementsByTagName (' link ') [0].firstchild.data;
var items = Ajax.getresponse (). getElementsByTagName (' item ');

var feed = new Feed (Aggregator.feedCollection.length, title, _link, items);
Aggregator.feedCollection.push (Feed);
Aggregator.displayfeedtitles (Feed);
}
}

The first thing we do in the Read method is to analyze the titles, links, and items in the RSS feed. Once we have these values, we can create a new feed object (which we'll focus on later). This object uses the length of the feedcollection (as an ID), as well as headings, links, and items from feedback. The Feed object is then added to the Feedcollection and a method called Displayfeedtitles to display the caption corresponding to each item in the Feed object.

Aggregator.displayfeedtitles = function (Feed)
{
document.getElementById (' titles '). InnerHTML + = feed. GetTitle ();
Aggregator.displaytitles (feed.id);
}

This method takes the feed object as a parameter, displays its caption, and then calls another method called Displaytitles:

Aggregator.displaytitles = function (ID)
{
var titlearray = Aggregator.feedcollection[id]. Getalltitles ();
var titles = document.createelement ("div");
Titles.id = "Subtitle_" + ID;
document.getElementById (' Title_ ' +id). appendchild (titles);
for (var i=0; i {
Titles.innerhtml + + titlearray[i] + "
";
}
}

This method receives a feedback ID and uses it to retrieve feedback from the feedcollection array and get all its headings. Once these titles are received, we will create a new DIV element for the item title in the feedback and add it after the title corresponding to the specific feedback. This will allow us to toggle the title of the item in the display by clicking on the feedback title. Once you add the new div element, we simply iterate through all the headings and add them to the new Div.

The first of the two methods above is used to implement the title of the item in the toggle feedback, and the second is to display the content of the feedback in the index.html file using our description div element. The content of the feedback is collected through the Getdetails method of the Feed object (discussed in the next section when we create the Feed object).

Aggregator.toggletitles = function (ID)
{
var titles = document.getElementById (' Subtitle_ ' +id);
Titles.style.display = (Titles.style.display = = ")? ' None ': ';
}
Aggregator.displayfeed = function (Feedid, id)
{
var details = Aggregator.feedcollection[feedid]. Getdetails (ID);
document.getElementById (' description '). InnerHTML = details;
}
Six, Feed object

This feed object is a prototype. Through its constructor function, the feed object receives all the arguments that are passed when we create it in the aggregator object. These parameters correspond to the feedback ID, title, link, and item respectively. In this function, we set all the defaults, create some arrays for later use, and send the items to a method called Parseitems. In this parseitems method, we will retrieve all the values from our feedback items and populate the array we created in the constructor.

Feed.prototype.parseItems = function (items)
{
for (var i=0; i {
var linktitle = items[i].getelementsbytagname ("title") [0].firstchild.nodevalue;
var title = " ";
This.titleArray.push (title);
This.linkTitleArray.push (LinkTitle);

var _link = items[i].getelementsbytagname ("link") [0].firstchild.nodevalue;
This.linkArray.push (_link);

var description = items[i].getelementsbytagname ("description") [0].firstchild.nodevalue;
This.descriptionArray.push (description);

var pubdate = items[i].getelementsbytagname ("pubdate") [0].firstchild.nodevalue;
This.pubDateArray.push (pubdate);
}
}

Once we have all the values stored in the array, we can use them when we are ready to display the data in the page. The third method in this object focuses on displaying the data in the feedback:

· GetTitle is responsible for getting the title of the feedback (as a link to a toggle item title, implemented by calling the aggregator Toggletitles method).

· Getalltitles simply returns all the item headers from the feedback.

· Getdetails is responsible for implementing all the details that show the feedback. This method retrieves the values in an array of feed objects based on the ID passed as a parameter. The values are then formatted into an HTML string and returned to the caller, who is then responsible for adding them to the index page.

Feed.prototype.GetTitle = function ()
{
Return "

";
}

Feed.prototype.GetAllTitles = function ()
{
return this.titlearray;
}

Feed.prototype.GetDetails = function (ID)
{
Details = "
";
Details + + This.descriptionarray[id] + "
";
Details + + This.pubdatearray[id];
return details;
}

Vii. Summary

Until now, the next step for the aggregator object created above should be to add a timeout to check for updates to RSS feeds that are currently being added to the aggregator. In addition, the feedback can be saved to a database and retrieved based on user accounts. However, due to space limitations, these functions have to be left to the reader you to achieve ...