There’s a lot of hay being made around the Internet about Google’s new Suggest feature. Just so we’re all on the same page, Google Suggest will automatically return search results as you type in the search box. Of course, for this to be usable, it has to be unobtrusive, which means no full-page roundtrips to the server. Google’s implementation does this, and it works quite well.

Yes, it’s cool. But the demonstration of technology used is not new. Just had to get that out there, because a lot of people are saying WOW like it’s the latest sliced bread.

The technique used to accomplish this bit of slight-of-hand is the XMLHttpRequest set of routines, introduced in Internet Explorer. On other non-IE browsers, they appear to be using what I call “the IFRAME Conduit” technique. Both are very similar, with the former obviously a little more sexy since it uses XML. But both are equally valid and accomplish the same end-result: the ability to refresh data on a portion of a HTML page in the browser without a roundtrip to the server.

I discovered the IFRAME technique while working on a project for a large client that needed a very interactive interface in the app we were building. I won’t use the word “invented”, although at the time I had never seen the technique used elsewhere, and since have only seen it used in one or two other instances besides this entry from Google. Later in the project, for a slightly different use, we utilized the XML flavor. Both worked well, and achieved a level of functionality within the browser interface that most web apps can’t dream of. I’ve since used the IFRAME technique on a number of other apps. It turns out to be really simple.

Basically, on your page, create an IFRAME of almost no dimension (1×1). You can’t make it invisible, because on IE for the MAC, that renders it unusable for some strange reason, but you can make it borderless and at the bottom of the page so that the user never sees it. Then, when you need more data from the server, just set the document.location for the IFRAME to a URL on your server that will take requests. The code on the server that you execute returns a simple generated javascript who’s responsibility it is to populate various fields or do other DHTML things on the IFRAME’s parent document. That’s it. Round-trip to the server and no page refresh.

You can use this for all sorts of nifty interface tricks, and without having to send down the entire weight of the surrounding page, it’s very quick.

XMLHttpRequest or IFRAME? Dunno. The IFRAME is a bit more cross-browser friendly, but I’d imagine that a variant of XMLHttpRequest will make it into the ECMAscript spec at some point. Personally, I think XML can get a bit bloated; I can programatically create very efficient and small javascript in the response, so I typically go that way.

Kudos to Google for a very public implementation of a nifty technique.