How to Create Remote Ajax Requests

By Kris Hadlock

Accessing the Remote File

So, how do we reach the remote RSS feed? If you look at the index file you'll see that we are calling bridge.php and passing a feed parameter. The bridge.php file uses a method called file_get_contents, which takes the feed value, retrieves the file from the other server and writes it to the page to act as a response to the request. We also add a header to ensure that the file is returned as valid XML. That's it, but remember it's your job to make sure that these remote files are safe, all this method does is get what a user asks for and unfortunately we can't always trust our users.

<div style="width: 700px;">
 <textarea name="code" class="javascript" cols="60" rows="10">
  <?
   header("Content-Type: application/xml; charset=UTF-8");
   echo file_get_contents($_GET['feed']);
  ?>
 </textarea>
</div>

Adding a Little Style

We finally have all of the functionality set, now we need to style the interface a bit. I'm keeping this simple, so please take the liberty to enhance your interface as you see fit.

<div style="width: 700px;">
 <textarea name="code" class="javascript" cols="60" rows="10">
  body
  {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;  
  }
  div#Aggregator
  {
   width: 800px;
   margin: auto;
  }
  div#Aggregator div.header
  {
   width: 780px;
   padding: 10px;
   background-color: #f1f1f1;
   border: 1px solid #000;
   color: #fff;
   font-weight: bold;
   text-align: right;
  }
  div#Aggregator div.leftColumn
  {
   float: left;
   width: 180px;
   padding: 10px;
  }
  div#Aggregator div.leftColumn a, div#Aggregator div.leftColumn a:link, div#Aggregator div.leftColumn a:hover, div#Aggregator div.leftColumn a:visite
  {
   color: #333;
   font-weight: bold;
  }
  div#Aggregator div.leftColumn a.title
  {
   font-size: 10px;
   text-decoration: none;
   color: #999;
  }
  div#Aggregator div.rightColumn
  {
   float: right;
   width: 580px;
   padding: 10px;
  }
 </textarea>
</div>

What Now?

The objective of this article is not only about creating an Ajax-enabled RSS Aggregator, but is about making remote Ajax requests with PHP. PHP is a great partner with Ajax, as are many other server-side languages, so take a look around, read the APIs and I'm sure you'll discover something that you want to use.

About the Author

Kris Hadlock is the owner/founder of http://www.studiosedition.com a Web design and development firm. He is the author of "Ajax for Web Application Developers" and has been a feature writer for numerous Web sites and design magazines. To learn more about Kris, visit http://www.studiosedition.com or his blog at http://blog.studiosedition.com.




Page 3 of 3

Previous Page
1 2 3
 

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date