Getting Very Dynamic at XML.com

10 February 2005

In response to an article I wrote late last year about XMLHttpRequest the nice people at XML.com got in touch and asked if I’d like to write an article for them on the same subject. Of course I refused – until they threatened to hurt my teddy bear – at which point I caved in and agreed under duress.

Introducing Very Dynamic Web Interfaces. You thought your interfaces were dynamic? Well, pah! Now they can be very dynamic. PUT THAT IN YOUR TEA AND STIR IT.

The article itself introduces XMLHttpRequest with a macro view, and then rolls up its sleeves and gets you writing some code to put it all to use. I hope that it’ll serve as a useful way of dipping your toes into the XMLHttpRequest waters, enough to pique your interest and allow you to explore the possibilities further on your own. I’d be interested in hearing people’s feedback.

- Drew McLellan

Comments

Follow me on Twitter

Comments

§ Geoff: Nice article – I noticed that you are using an XML response in the article, and parsing that with the Javascript. I checked out Google suggest when it came out, and noticed that they are returning a JS function instead of XML when you send an XMLHttpRequest instead of XML.

Do you have any insight on why they might have done it this way instead of returning some XML? Do you know of any down side to doing it one way or the other?
§ Jonathan Snook: Decent article, for sure. Some other stuff that you can discuss in your next article is using HTTP headers to send and receive information. I often do this if I only need to retrieve just a smidgen of information. Who knows if it’s faster but if you can do it, why not. :)
§ Bob Sawyer: Earlier today I posted a comment on your original XMLHttpRequest post, which I found via Google. It seems appropriate to repost it here:
——-
I just implemented a series of dropdown menus that are populated from our database using this method. Seems to work everywhere except for Mac IE5. More here.
§ B: I especially liked the idea of having the handler function be returned in the XML stream by the server. Brilliant.
§ Jonathan Fenocchi: This is great, I needed a bit more information on this, since I’m just getting into XML a lot more now. In fact, I will be using XMLHttpRequest in the next version of my Chategory software to make the PHP application a lot more like a Java chatroom (sans the terrible, slow applet part). This is going in the bookmarks. :)
§ Lawrence Carvalho: Great articles, Drew. Thought I’d let you know about a script which uses xmlhttprequest I’ve been working on called liveInfo.

Inspired by LiveSearch (http://blog.bitflux.ch/wiki/LiveSearch) I’ve created a script which is cross browser, skinnable with plugin and webservice support.

This works on Opera 7+ (using iframes), Gecko browsers and IE 5+. It also has pageable results with keyboard nav using left and right keys. I’ve also extended the architecture (with PHP) behind it using XML which makes it possible to have multiple skinnable elements on one page. The architecture also supports plugins which I call services and XMLRPC and SOAP webservices. I’ve posted about it on my blog which has two liveInfo elements on it (http://www.nodetraveller.com/blog/?p=31) and more info about how it all works.
§ andrew: Thank you for all your writing on this subject. Between you and Apple’s dev page, I’ve gotten a darn good start on learning XMLHttpRequest. I’d also like to suggest a Part Deux for the Masses/Very-Dynamic pair of articles.

After playing around with some cheesey “real world” applications, it seems that a common problem becomes managing multiple XMLHttpRequests. I’ve run into overwritten requests and it can be frustrating. Moving toward individual objects/instances of an XMLHttpRequest object may help in keeping things in the right order.

Would you be willing to expand that article in the future to show how to accomplish something like this?
§ Jessica Lopez: Thanks for the great article! I found it very helpful…
§ Kevin Davis: Hey there.. I thought your article was very well done. I’m trying to expand on it by handling multiple results returned.. everything seems to be working great until I have to process the results back in Javascript. Where can I go for help re: navigating around DOM stuff?

http://kevin.is-a-geek.net/projects/deliciousfilter/
§ Kevin Davis: strike that.. ‘link’ is a reserved word! snakes!
§ Angela Wilson: Too late… But I just read the article and it’s everything that I would have liked to have read, and a ton more. Thanks.

Great job!

Photographs

Work With Me

At edgeofmyseat.com we build custom content management systems, ecommerce solutions and develop web apps.

Follow me

Follow @drewm

Affiliation

I made

About Drew McLellan

Drew McLellan (@drewm) has been hacking on the web since around 1996 following an unfortunate incident with a margarine tub. Since then he’s spread himself between both front- and back-end development projects, and now is Director and Senior Web Developer at edgeofmyseat.com in Maidenhead, UK (GEO: 51.5217, -0.7177). Prior to this, Drew was a Web Developer for Yahoo!, and before that primarily worked as a technical lead within design and branding agencies for clients such as Nissan, Goodyear Dunlop, Siemens/Bosch, Cadburys, ICI Dulux and Virgin.net. Somewhere along the way, Drew managed to get himself embroiled with Dreamweaver and was made an early Macromedia Evangelist for that product. This lead to book deals, public appearances, fame, glory, and his eventual downfall.

Picking himself up again, Drew is now a strong advocate for best practises, and stood as Group Lead for The Web Standards Project 2006-08. He has had articles published by A List Apart, Adobe, and O’Reilly Media’s XML.com, mostly due to mistaken identity. Drew is a proponent of the lower-case semantic web, and is currently expending energies in the direction of the microformats movement, with particular interests in making parsers an off-the-shelf commodity and developing simple UI conventions. He writes here at all in the head and, with a little help from his friends, at 24 ways.

All in the <head>