Friday, March 17th, 2006
Alternate Ajax Techniques, Part 2
Category: Ajax, Programming
They start off by jumping right in and looking at images and cookies – how to combine their forces and piggyback the needed cookie information onto of the image requests back and forth. The method, similar to just preloading an image with Javascript, uses an onLoad handler for the image, creating a place for your script to grab the cookie information being transmitted as well.
They continue on after the introduction with a more “real world” example – using the code to piggyback on a 1px by 1px GIF a request to take in a varaible from the URL line, pass it off to the PHP script (which is called as an image) to be sent back and forth between the client/server and spit that value out into a text box at the end.
It’s a little bit of a round-about way to get the same kind of effect that Ajax does on most modern browsers, but if you’re really stuck in a rut and need a more creative method to do the same thing – check this one out.
Related Content:
“Info from server: null”
Uhmm…
Brent Ashley‘s “RSLite” library uses this technique (originally from 2000, I think.)
Another amusing technique I’ve seen is for “pass/fail” conditions – an image is loaded in the same fashion via JS, but the image dimensions indicate the result; eg. a 1×1-pixel-image means OK, a 0×0 is fail.. ;)
It’s nice to see Nicholas providing some sane examples as some of these haven’t been documented very well.
I collected a list of alternatives a little while ago. Here are eight alternatives (See Alternatives for XMLHttpRequest Call pattern):
Frame/IFrame
On-Demand Javascript (Remote Scripting)
HTTP Streaming (Comet)
Import XML Document
Image-Cookie
Stylesheet
204 Response
Richer Plugin (Java/Flash) Socket (Yes, not “pure” Ajax)
I’ve used this technique myself, though not as round-trip, more like ‘request fullfillment’. Say you have a grid with a list of items that can be active or inactive… you could have a little ‘lightbulb’ icon for the active status (lit or unlit), inside a link that uses javascript to replace the image. The url to the image would be a backend file that would update the status of the entry in the database, then return the appropriate image. This will even work without cookies since the data is only one way.