Ajaxular - All Things AJAX

Yesterday I posted an article on the del.icio.us Spy Widget. After writing the post I thought that other developers may be interested in how the communication was accomplished between the widget and the server. Since the browser stops cross-domain calls using the XMLHTTPRequest object (at least until Firefox 3 takes over the web) we have to turn to using JSON with a dynamic script tag.

So now that I've given a brief overview of how it will work let's get right down to the code. The below code would be used to dynamically create the script tag and load the JSON feed. Since the script tag does not have a cross-domain security restraint we can use it to load the feed from any domain.

var TimeStamp = new Date().getTime();
		var JSONCode=document.createElement("script");
       	JSONCode.setAttribute('type', 'text/javascript');
       	JSONCode.setAttribute("src", "http://someurl.com/somefeed.php?timestamp=" + TimeStamp);
        document.getElementById('codeholder').appendChild(JSONCode);

The important things to note in the above code is the timestamp variable passed in the URL and the codeholder DOM element. The timestamp variable is just a simple time stamp that is passed in the URL to prevent client side caching issues. In the URL is also where you would pass any additional variables to get the JSON feed. The codeholder DOM element (in the example code codeholder would be the id of the DOM element, but this could be a different id) is a DOM element that can hold a script tag such as a div tag.

Below we have an example of the JSON feed that would be received.

callbackfunction([{"title":"House of Marathon: A Very Brady Conservative","url":"http://houseofmarathon.blogspot.com/2008/01/very-brady-conservative-unlikeliest.html","tags":"BobbyJindal Louisiana RonaldReagan conservative ethics government health politics","user":"nathanm_mn"},{"title":"注�?��?� ?...�?�??�??�??... - NoName Information Team XPE - Yahoo!�?�?��?�落� �","url":"http://tw.myblog.yahoo.com/noname-team/article?mid=432&l=f&fid=9","tags":"XP","user":"square12"},{"title":"Retail-Menswear-Freemans Sporting Club - New York Times","url":"http://www.nytimes.com/2007/03/01/fashion/01CRITIC.html?_r=2&oref=slogin&oref=slogin","tags":"style","user":"MJDAOG"}]);

The important thing is that the feed has a call back function. This callback function could be named anything and is the JavaScript function that would be called to handle the JSON object.

The below code is an example of what a call back function might look like.

function callbackfunction(obj){
		alert(obj);
	}

In the above code the function would just display the object in an alert. This is where you would put the logic to go through the JSON object and then use it however you would like to in your application.

If you are using this in a widget you would have the user putting the widget on their site or blog copy and past some code and put it into the site or blog code. While you may have multiple lines of HTML for the user to copy you would need to have a script tag calling either a .JS file or a server side script that would produce dynamic JavaScript. The code that the script tag references would have the call back function and the portion of code that dynamically creates the script tag.

The above method allows you to create some more interactive widgets to make the web more interactive. While the above is all "hand rolled" code you can use many libraries to accomplish the dynamic creation of the script tag such as jQuery.

If you have ever created a widget that used this type of connection then I would love to hear about it. You can leave it in the comments or you can write a blog post with your free Ajaxonomy account.

---