I. INTRODUCTION
Now, developing an RSS aggregator is no longer difficult, but developing a high-quality RSS aggregator is still quite difficult. On the other hand, it is generally not difficult to create a custom aggregator, and it can provide an interface of your choice. RSS aggregation represents a type of data that is especially suitable for an AJAX application because it is structured in XML, in addition, AJAX can display new feedback without page refreshing. However, the title always exists: it is impossible to implement cross-origin AJAX requests in a standard AJAX engine. In this article, I will show you how to use a simple PHP function to bridge AJAX engines and remote content (in this article it refers to RSS feedback ).
Tip: This article assumes that you have a basic understanding of PHP and experience in using AJAX and XML analysis. To fully understand the examples provided in this article, you need to download the corresponding source code file.
II. start
Before we begin, I would like to briefly introduce the AJAX engine we will use to send requests. The engine simplifies AJAX calls and helps eliminate a large number of redundancy when requests are made and scheduled. I will not discuss its composition code in detail, but will simply show you how to apply it in this article.
First, we need to import all the javascript files that constitute the engine. The code included in our index.html file looks as follows:
<Script type = 'text/javascript 'src = 'JS/model/HTTP. js'> </script>
<Script type = 'text/javascript 'src = 'JS/model/Ajax. js'> </script>
<Script type = 'text/javascript 'src = 'JS/model/AjaxUpdater. js'> </script>
Once we import this 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 processes our AJAX calls. We simply call its Update method and pass the requested method, the requested URL, and the callback method we want to delegate the response.
This is all we need to care about when we make a request. Now, let's focus on customizing the efficacy of RSS aggregators.
III. import point
It refers to the imported index.html file of the aggregation, which we call from the browser. The following code describes the index:
<Html>
<Head>
<Title> RSS Aggregation with PHP and Ajax </title>
<Link href = 'css/layout.css 'rel = 'stylesheet' type = 'text/CSS '/>
<Script type = 'text/javascript 'src = 'JS/model/HTTP. js'> </script>
<Script type = 'text/javascript 'src = 'JS/model/Ajax. js'> </script>
<Script type = 'text/javascript 'src = 'JS/model/AjaxUpdater. js'> </script>
<Div id = 'aggregator'>
<Form name = 'feedform' method = 'post' action = 'javascript: AjaxUpdater. Update ('GET', 'bridge/rss. php? Feed = 'document. feedForm. feed. value, Aggregator. Read); '>
<Div class = 'header'>
<Input type = 'text' name = 'feed' id = 'feed' size = '50'>
<Input type = 'submit 'name = 'submit 'value = 'add feed'>
</Div>
</Form>
<Div class = 'leftcolumn'>
<Div id = 'tidles '> </div>
<Div id = 'loading'> </div>
</Div>
<Div class = 'rightcolumn'>
<Div id = 'description'> </div>
</Div>
</Div>
</Body>
</Html>
This file is responsible for importing the CSS file displayed by our aggregators and all the JavaScript files used to create the aggregator and issue AJAX requests.
Tip: This document does not discuss the CSS file. we only focus on the aggregation and analysis through JavaScript.
Then, the index defines the DIV tag, which describes the layout of the received data. It also contains a form with a feed field used to feed the RSS feed URL, and a submit button used to send requests to them. When you click this button, a request will be sent to receive RSS feedback and the response will be sent to an object called Aggregator; we will discuss how to use AJAX techniques for remote RSS Feedback retrieval first.
4. Cross-Origin AJAX request
Cross-Origin AJAX pleading is impossible, but there are some ways to solve this title using a server language. In this section, I will discuss how to use PHP to create a bridge between AJAX requests and a remote RSS feed to achieve the goal of successful cross-origin requests. I think you may be surprised at its easy implementation.
PHP provides a local method called file_get_contents, which can read all the file content to a string. If you start the fopen package, this file can be a remote file, which is started by default when you install PHP. If allow_url_fopen is set to off in the php. ini file, it is disabled. The following code corresponds to the content of the bridge.php file. when submitting a ticket, we apply index.html to send a 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, which is responsible for setting the response content type to a valid XML for our request object. Then, call file_get_contents and feed the URL together. this is passed through our request from the form in the index.html file. Once the data is stopped, the AJAX engine proxies them to the callback method-our Aggregator object.
5. Aggregator object
The Aggregator object receives responses from the AJAX engine. Callback method of the request issued in the signature form ). When this callback is generated, the request readyState is checked by using a custom AJAX object method (which uses a string that describes the DIV element loading the 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 );
}
}
In this Read method, the first thing we need to do is to analyze the title, links, and items in the RSS Feedback. Once we have these values, we can create a new Feed object (which will be discussed later ). This object applies the length of feedCollection (as an ID), as well as the title, link, and items from feedback. The Feed object is then added to the feedCollection and a method called displayFeedTitles to display the title corresponding to each item in the Feed object.
Aggregator. displayFeedTitles = function (feed)
{
Document. getElementById ('title'). innerHTML = feed. GetTitle ();
Aggregator. DisplayTitles (feed. id );
}
This method uses the Feed object as a parameter, displays its title, 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 <titleArray. length; I)
{
Titles. innerHTML = titleArray [I] '<br/> ';
}
}
This method receives a feedback ID and applies it to retrieve feedback from the feedCollection array and get all its headers. Once these titles are received, we create a new DIV element for the title of the item in the feedback and add it after the title corresponding to the specific feedback. This will allow us to switch the title of the item in the displayed content by clicking the feedback title. Once the new DIV element is added, we simply need to traverse all the headers and add them to the new DIV.
The first of the two statements is used to switch the items in the feed. The second statement is responsible for displaying the feedback content of the DIV element that we use in the index.html file. The feedback content is collected through the GetDetails method of the Feed object (discussed later when we create the Feed object in the next section ).
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;
}
6. Feed object
This Feed object is a prototype. Through its schema function, the Feed object receives all the parameters passed when we create it in the Aggregator object. These parameters distinguish the ID, title, link, and item corresponding to the feedback. In this function, we set all the default values, create some arrays for future 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 fill in the array we created in the schema.
Feed. prototype. parseItems = function (items)
{
For (var I = 0; I <items. length; I)
{
Var linkTitle = items [I]. getElementsByTagName ('title') [0]. firstChild. nodeValue;
Var title = '<a href =' # 'class = 'title' onclick = 'aggregator. displayFeed ('This. ID', 'I'); '> 'linktitle' </a> ';
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 store all the values in an array, we can apply them when we are ready to display the data in the page. The third method in this object focuses on displaying data in feedback:
· GetTitle is responsible for obtaining the feedback title (as a link to the switch item title, it is implemented by calling the toggleTitles method of Aggregator ).
· GetAllTitles returns all item titles from feedback.
· GetDetails is responsible for displaying all the details of the feedback. This method retrieves the value in the array of the Feed object based on the ID passed as a parameter. These values are converted into an HTML string and returned to the caller. then, the caller adds them to the index page.
Feed. prototype. GetTitle = function ()
{
Return '<div id = 'title _' this. id''> <br/> <a href = '# 'onclick = 'aggregator. toggleTitles ('This. id ');'> 'this. title' </a> </div> ';
}
Feed. prototype. GetAllTitles = function ()
{
Return this. titleArray;
}
Feed. prototype. GetDetails = function (id)
{
Details = '<a href = ''this. linkArray [id] ''target = '_ blank'> 'This. linkTitleArray [id] '</a> <br/> ';
Details = this. descriptionArray [id] '<br/> ';
Details = this. pubDateArray [id];
Return details;
}
VII. Summary
Until now, the next step for the created Aggregator object should be to add a timeout to check the updates to the RSS Feedback Currently added to the Aggregator. In addition, the feedback can be retained into a database and retrieved based on the user account. However, due to space limitations, these functions have to be implemented by the readers ......
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
