dcsimg

How to Create Remote Ajax Requests

By Kris Hadlock

WEBINAR:
On-Demand

Building the Right Environment to Support AI, Machine Learning and Deep Learning


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.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date