Proxy for Ajax requests (Twitter API)

In this article we will show how to use components from our suite in mashup applications. Let us see for example Twitter API. As per the manual the following URL for example will return timeline (a list of messages) for user bob: http://twitter.com/statuses/user_timeline/bob.json. But we can not invoke this request directly in our mashup application. This URL points to Twitter's host, so Ajax sandbox does not allow execute that from client's computer. One of the solutions is a proxy on our own host. This proxy will be requested by Ajax call right from our mashup (actually from the clients page). And proxy itself being executed on the server (not in the clients code) is free from sandbox restriction. So proxy can request the actual information right from Twitter. And writing this proxy could be actually a very simple deal. Let us the following components from Coldtags suite: HTTP taglib. This component lets you perform HTTP requests (GET or POST). Let us see the following code for file twitterproxy.jsp:
 


<%@ taglib uri="taglib.tld" prefix="do" %>
<% String s="http://twitter.com/statuses/user_timeline/"+request.getQueryString()+".json"; %>
<do:GetPost url="<%=s%>" method="get"/>

This JSP file accepts a GET parameter (query string) - a name for Twitter's user. After that file performs requests to Twitter's API and prints the result. In this case it will be some JavaScript code (JSON) returned by Twitter. It is exactly what do we need. Just two lines of code will turn this JSP file into Ajax proxy.

So now if our JSP file (loaded from our server) will performs Ajax call to this proxy (it is possible because proxy will be on the same server) we can get JSOS from Twitter. For example:
 


<script language="JavaScript">

var twitterCallback;

function getTimeLine(user,callback)
{
twitterCallback = callback;
cjAjaxEngine("twitterproxy.jsp?"+user,twitterHandler,twitterError,
    beforeAction,afterAction);
}

function twitterHandler(txt,xmlDoc)
{
if (twitterCallback)
  twitterCallback(eval("("+txt+")"));
}

function twitterError()
{
alert("Could not get data from Twitter");
}

function beforeAction()
{
  document.getElementById("loading").style.display='block';
}

function afterAction()
{
  document.getElementById("loading").style.display='none';
}


function callTwitter(obj)
{
  if (!obj) alert("Could not get data from Twitter");
  else
   if (obj.error) alert("Twitter message:"+obj.error);
   else
    if (obj.length>0)
    {
    var u = obj[0].user;
    if (u.profile_image_url)
     document.getElementById("pic").innerHTML="<img src='"+u.profile_image_url+"' border='0' alt='"+u.screen_name+"'>";
    }
}

</script>

This JavaScript code uses a simply wrapper for XmlHttpRequest cjajax.js with callbacks. It is the same wrapper we are using in Ajax components from Coldtags suite. Function callTwitter is a callback that accepts the result from Ajax. In this example callback simply outputs the image (user's avatar) associated with the Twitter's message.

and the usage call for your JavaScript code is some like that:
 


getTimeLine("bob", callTwitter);

By the similar manner you can create proxies for many JSON-based services.

On practice you can see components using this approach in our mashups directory

Also in Coldtags & JSOS: