Building an AJAX proxy

Since in AJAX the same-domain policy prevents most of requests from taking place when they're directed to another domain, it's somewhat useful to build a proxy system for retrieving remote content and display it using AJAX. Basically, a proxy is a script or a library written in a server side language that fetches the remote content and returns it in a format that can be handled by AJAX. For example, if you want to parse and display a remote RSS feed, you can use PHP as follows:

<?php
header('Content-Type: text/xml');
$feed = file_get_contents('http://anothersite.com/feed/');
echo $feed;
?>

Then you can fetch this document through the open() method of the XMLHttpRequest object or in a similar way if you're using an AJAX framework. The key part here is the choice of the format in which your proxy script will return the remote content. There are several options:

• XML

  XML is surely the most solid and consistent way of representing complex data structures, but it can cause some performance overhead in case of large and complex files. An XML file is treated by JavaScript as a separate DOM document, so you have to manually access every node to get your contents. Further, things get more complicated when such documents contains namespaces (e.g. Atom), because IE still doesn't support XML-related DOM methods and properties.

• JSON

  JSON uses JavaScript object literal notation to represent data structures. For that reason, it's most suitable for simple documents. One of its greatest advantages is that it doesn't cause performance overheads like XML. All server-side languages have methods to handle this format (e.g. json_encode() in PHP).

• HTML

  HTML is always treated as a subset of the main text content type. As such, it comes associated with the responseText property of the XMLHttpRequest object. It's very useful when it comes to injecting code snippets into the DOM, for example when you have to update your documents on the fly.

• Text

  Text is by far the simplest and fastest way to handle your responses, though it requires sometimes a lot of preprocessing in order to parse the response correctly. It's useful when you have to display only single messages.

When you develop your proxy system, you should always code it in a object-oriented way. For example, you can provide a single file for global settings and then write down your class accordingly. The above example is procedural, because everything was about retrieving a single RSS document. But when you have to write, say, a feed aggregator, then things get more complicated if you don't start your project in the right way.

Also, your client-side script should communicate with your proxy through the verbs of the HTTP protocol. If you have a series of links that retrieve each one a different RSS feed, your proxy system should be able to perform different actions based on the parameters passed along with the request from the client (in this case, a GET request). For example, if you're using jQuery:

$('#twitter-feed').click(function(e) {
    $.ajax({
        url: 'proxy.php',
       type: 'GET',
       data: 'feed=twitter',
      success: function(feed) { // do something }
  });

  e.preventDefault();
});

By passing data to your proxy, you make sure that your request will be handled correctly.