Weblogs: Atom

Javascript AtomAPI Client using XmlHttpRequest

Sunday, September 21, 2003

After I'd finished with my PHP Atom API implementation, it made sense to try developing a client. Looking at the current discussion of PUT and DELETE versus just using GET and POST there was a general feeling that Javascript and DHTML couldn't support PUT and DELETE.

Short history of XmlHttpRequest

I'd previously read about something called XmlHttpRequest which allowed Javascript to connect to a server and send or receive a resource without causing the current page to reload It was initially limited, implemented in Internet Explorer as an ActiveX plugin to the MSXML - the Microsoft XML Parser. Mozilla later implemented in in their browser mirroring the API Microsoft had created. So this functionality is available to a large audience currently using almost standards compliant browsers. The notable exceptions are Opera and Khtml browsers (Safari and Konqueror).

The XmlHttpRequest object is more an HTTP Request object, since its payload isn't limited to an XML document. Articles have sprung up over the last year about using this object as a means of seamless client side form validation which includes server-side lookups and checks.

Developing the Javascript AtomAPI client

The development only took a few hours over two weekends. I initially had a problem diagnosing where problems were occurring, and eventually tracked it down to a bug in my PHP server side implementation. The second problem I had was using DOM to create the relevant XML for an entry - for some reason, all the elements came out in uppercase. So I've had to hack a string builder method until I find the simple way out of it (which largely lies in consulting the right documentation).

Internet Explorer gave me a few headaches. Javascript variables are not allowed the same name as the name given to a form. Even though the correct identifier of a form is document.formname, Interner Explorer's error correction allows developers to reference it also as formname thus clobbering any variable using that name.

One piece of the application is listing all the entries in an Atom feed. This listing is done by dynamically generating an HTML list and inserting it directly into the visible document. Mozilla did this without a problem, and allowed me to create a list of links all with the onclick event handler. Internet Explorer, on the other hand, refused point blank, to notice the dynamic onclick event. So I had to create the links using <a href="javascript:...">. Uggh.

The last Internet Explorer problem was its caching. IE caches the XML documents returned from an XmlHttpRequest. So when an author creates and saves a new blog entry, the blog list URL is re-requested, but the cache interferes sending back the original feed list without the new blog entry. I've worked around this by inserting a timestamp in the query string of every get request - that way it forces IE to ignore the cache.

There is one limitation of this client, and it is a limitation of Javascript and Active X. The client is limited to interacting on AtomAPI services on the box the client code originated from - just like Java applets. Only a signed client will be able to connect to anything outside this range.(Just lucky I've done two AtomAPI server-side implementations!)

Details of the Javascript AtomAPI client

The AtomAPI client is written using HTML, CSS and Javascript (or DHTML in market-speak). Currently there are two predefined AtomAPI services it can use:

The source code for this client is available in a zip file.

Update 13 May 2004: Ned Baldessin writes in to say that Safari now handles the XMLHTTPRequest object just like Mozilla. Fantastic stuff - hopefully that feature is backported to Konqueror - that would leave Opera as the only browser not yet supporting this feature.

Update 10 June 2004: Mendrik writes in with a possible solution for Opera. Using Java's liveConnect in Opera allows exchanging of XML documents. He has an example page up. Quick test in Opera 7.20 worked.

Relevant Resources

[ Weblog | Categories and feeds | 2011 | 2010 | 2009 | 2008 | 2007 | 2006 | 2005 | 2004 | 2003 | 2002 ]