Using PHP functions to implement " bridging " Ajax engine and RSS content _php Tutorial

RSS aggregator is an application that is particularly well-suited for building with a standard AJAX engine, however, it is often difficult to implement cross-domain AJAX requests for RSS feeds. In this article, I'll show you how to implement a "bridging" Ajax engine and RSS content using a simple PHP function.

　　First, 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 can provide an interface of your own choosing within this aggregator. RSS aggregation represents a class of data that is particularly appropriate for an AJAX application because it is in XML format and Ajax is good at displaying new feedback without having to refresh the page. However, the problem always exists: it is not possible 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 already 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 appropriate source files.

　　Second, start

Before we begin, I would like to briefly introduce the AJAX engine we will use to make the request. The engine simplifies Ajax calls and helps to eliminate the large amount of redundancy that exists when requesting and dispatching responses are made. I will not discuss its constituent code in detail, but only give you a brief description of how we use it in this article.

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

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

Ajaxupdater.update (' GET ', ' url ', callbackmethod); >

The Ajaxupdater is an object that is responsible for handling our AJAX calls. We simply call its Update method and pass the requested method, the URL we requested, and the callback method we want to proxy the response to.

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

　　Third, the entry point

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

RSS Aggregation with PHP and Ajax

This file is responsible for importing the CSS file that handles our aggregator display and all the JavaScript files used to create the aggregator and make Ajax requests.

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

The div tag is then defined by the index, which is used to describe the layout of the received data. It also contains a form with an input field to enter the URL of the RSS feed, and a submit button to send requests to them. When this button is clicked, a request is sent to receive the RSS feed and the response is sent to an object called aggregator, which is then introduced later in the discussion of the use of AJAX technology for remote RSS feed retrieval.

Iv. cross-Domain AJAX requests

Cross-domain AJAX requests are not possible, but there are 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 an AJAX request and a remote RSS feed to achieve a successful cross-domain request. I think you'll probably be amazed at how easy it is to achieve.

PHP provides a local method called file_get_contents, which can read the entire file contents into a string. If you start the fopen wrapper, the file can be a remote file, which is started by default when you install PHP. If the allow_url_fopen is set to off within the php.ini file, it is disabled. The following code corresponds to the contents of the bridge.php file, and we use index.html to send the request when the form is submitted:

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

The first line in the code above is a 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 in the index.html file. Once the 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 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 this callback occurs, the readystate of the request is checked through a custom Ajax object method that uses a string that describes the div element that displays the load 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 want to do in this read method is to analyze the headlines, 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 the headings, links, and items from the feedback. The Feed object is then added to Feedcollection and a method called Displayfeedtitles to display the title of 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 the feedback from the feedcollection array and get all its headings. Once these headers are received, we will create a new DIV element for the item title in the feedback and add it to the title corresponding to the given feedback. This will allow us to toggle the title of the item in the display by clicking on the feedback header. Once the new DIV element is added, we simply traverse 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 method is responsible for displaying the content of the feedback in the index.html file using our description div element. The content of these feeds is collected through the Getdetails method of the Feed object (discussed later in the next section when we create a 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;
}
　Vi.. 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 ID, title, link, and item of the reward, respectively. In this function, we set all the default values, 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 in 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 = " "+ LinkTitle +" ";
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 are able to 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 feedback title (as a link to a toggle title, by calling aggregator's Toggletitles method).

· Getalltitles simply returns all the item headings 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. These values are then formatted into an HTML string and returned to the caller, which is then the responsibility of the caller to add them to the index page.

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

"+ This.title +"

";
}

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

So far, the next step in 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 the user account. However, due to space constraints, these functions have to be left to the reader you to achieve ...

http://www.bkjia.com/PHPjc/735123.html www.bkjia.com true http://www.bkjia.com/PHPjc/735123.html techarticle RSS Aggregator is an application that is particularly well-suited for building with a standard AJAX engine, however, it is often difficult to implement cross-domain AJAX requests for RSS feeds. In this article, I will ...

