How To Create an RSS Aggregator with PHP and AJAX
- Creating the Form To Make the Request
- Creating the Custom PHP Object
- GET and POST with AJAX
- Parsing the Response
- Whats Next?
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
For more information on Web design, visit our Web Design Reference Guide or sign up for our Web Design Newsletter.
Imagine using a simple HTML file to send a request to a server-side script, receive a custom XML file based on that request, and then display it to the user—without ever refreshing the browser! This article explains how to use a combination of PHP and AJAX to create real-time data transfers in any application without a browser refresh.
Although this article uses PHP, keep in mind that any server-side language will work. I’ll assume that you have a basic understanding of JavaScript and PHP or a similar server-side language. I created a sample project that can be viewed here, and the source code from the sample can be downloaded here to help you get started.
The sample uses AJAX to send a request for an RSS feed to a custom PHP object. The PHP object makes a copy of the feed on the local server and returns the path. The requesting object receives the path, parses it, and displays the data as HTML to the user. It sounds like a lot of steps, but it consists of only four small files, which leverage their own specific strengths and make the entire process extremely efficient.
I’m sure that some of you are asking why you would create a copy of the feed on the local server instead of simply parsing the original feed. The reasoning behind this approach is to allow the bypassing of cross-domain restrictions that the XML HTTP Request object imposes. I’ll explain how to create this custom PHP object, but first let’s get started with the form.
Creating the Form To Make the Request
The first thing to do is include the JavaScript and any CSS files that you may want to use between the head tags in your HTML. I included one stylesheet to take care of the finished layout for the aggregator and the JavaScript file that we’ll create to make requests and parse feeds:
<link href="css/layout.css" rel="stylesheet" type="text/css" /> <script src="js/request.js"></script>
Next, create a form that sends a request for an RSS feed of your choice. The form I created simply includes an input field and a button to submit the request. The query for the request is a string composed of the feed input value and a password that will be verified on the server side; as an example, I used this:
"password=mypassword
The example also makes a request each time the page is loaded; therefore, if the page is refreshed, the existing feed string in the input field will be requested when the page loads. Following is a sample of the form data, along with a few div tags for displaying specific nodes in the parsed feed:
<body onload="javascript:makeRequest(’request.php?request=’ + document.feedForm.feed.value + ’"password=mypassword’);"> <form name="feedForm" method="post" action="javascript:makeRequest(’request.php?request=’ + document.feedForm.feed.value + ’"password=mypassword’);"> Enter a feed: <input type="text" name="feed" id="feed" size="20"> <input type="submit" name="submit" value="Add Feed"> </form> <div id="logo"></div> <hr/> <div id="copy"></div> <div id="details"></div> </body>
The three div tags that I created are logo, copy, and details, each of which has a style associated with it in the layout stylesheet. These will be used when we’ve parsed the feed, but we first need to be able to access the feed that we’re requesting. This will be accomplished with the PHP object that I mentioned earlier.