SHARE

How to Create Remote Ajax Requests

Written By

Oct 2, 2007

Ajax has certainly made itself known over the last year. Even large companies such as Google and Yahoo! have used Ajax in their Web applications and both have even created their own libraries, the Google Web Toolkit (GWT) and the Yahoo! UI Library (YUI). There are even conferences and events, such as AjaxWorld dedicated to the topic and the possiblities are steadily growing. With the increased presence has come new forms of interaction and questions about limitations. One of the most common questions is whether it’s possible to create remote or cross-domain Ajax requests. The answer is yes and this week you’ll learn how to create an Ajax-enabled podcast aggregator with PHP and Ajax.

Remote Ajax requests allow you to request remote files, such as Web services, RSS feeds and as you’ll see in this article, podcasts. The sample that we’ll create is a podcast aggregator that relies on Ajax and PHP to retrieve its feeds. It also leverages Odeo to play the podcast files that are referenced in the feed. The sample for this article can be downloaded here and a live running sample can be viewed here. To get you started you can use the Talk of the Nation podcast from NPR by pasting http://www.npr.org/rss/podcast.php?id=5 into the input field or you can find more podcasts in the NPR podcast directory.

Designing the Aggregator

In order to begin designing the aggregator we need an index page. In the head of this file we will include three JavaScript files and a stylesheet, which we’ll create. This file will consist of a header, left and right column. The header will be wrapped in a form tag that has a JavaScript action, which makes an Ajax request. The header div also includes a feed input and submit button. The leftColumn will include a titles div that will hold all of the titles from a requested feed and the rightColumn will include a description div that will display the contents of a selected item in the feed.

<div style=”width: 700px;”>
 <textarea name=”code” class=”javascript” cols=”60″ rows=”10″>
  <html>
   <head>
    <title>Web Reference: How to Create Remote Ajax Requests</title>
    <link href=”css/layout.css” rel=”stylesheet” type=”text/css” />
    <script type=”text/javascript” src=”js/Ajax.js”></script>
    <script type=”text/javascript” src=”js/Aggregator.js”></script>
    <script type=”text/javascript” src=”js/Feed.js”></script>
   </head>
   <body>
    <br/><br/>
    <div id=”Aggregator”>
     <form name=”feedForm” action=”javascript:Ajax.Request(‘GET’, ‘bridge.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=”titles”></div>
     </div>
     <div class=”rightColumn”>
      <div id=”description”></div>
     </div>
    </div>
   </body>
  </html>
 </textarea>
</div>

Creating an Ajax Engine

Once we have the design in place we can create the JavaScript files that we are including. The first file is an Ajax engine that will handle all of our requests. It takes a request method, such as GET or POST, an url to make the request to and a callback method to send the final XML response back to for parsing.

<div style=”width: 700px;”>
 <textarea name=”code” class=”javascript” cols=”60″ rows=”10″>
  var Ajax = new Object();
  Ajax.isUpdating = true;
  Ajax.Request = function(method, url, callback)
  {
   this.isUpdating = true;
   this.callbackMethod = callback;
   this.request = (window.XMLHttpRequest)? new XMLHttpRequest(): new ActiveXObject(“MSXML2.XMLHTTP”);
   this.request.onreadystatechange = function() { Ajax.checkReadyState(); };
   this.request.open(method, url, true);
   this.request.send(url);
  }
  Ajax.checkReadyState = function(_id)
  {
   switch(this.request.readyState)
   {
    case 1: break;
    case 2: break;
    case 3: break;
    case 4:
     this.isUpdating = false;
     this.callbackMethod(this.request.responseXML.documentElement);
   }
  }
 </textarea>
</div>

How to Create Remote Ajax Requests

Designing the Aggregator

Creating an Ajax Engine

Kris Hadlock

Recommended for you...

Company

Categories