Ajaxian

Julien Lamarre has demonstrated doing Ajax-style callbacks not using XHR. Nor iframes. Nor Java. Nor Flash.

He implemented it with images and CSS.

Ajax using an image

• The client to server connection works by sending a request to the server using a dynamically created image with some parameters added to its “.src” property.

  The server’s response is sent in a cookie at the same time the generated image is returned to the client. Or, when cookies are disabled, by using the image’s width and height to send, two by two, the characters forming the response!

• There are some limitations and performance issues related to this technique, especially when cookies are disabled on the client.
• A lot of improvements could be done. In the cookie version for example, an iteration method that would split the server’s response and send it chunk by chunk would be a good idea to deal with a cookie’s size limit.
• The associated PHP file: image.php

Ajax using a stylesheet

• This technique will only work if your browser supports [an element].currentStyle() or window.getComputedStyle(). This means it won’t work with old browsers.
• The client to server connection works by making a stylesheet’s “.href” property point to the PHP file, followed by the request’s parameters.

  The server’s response is done by generating a stylesheet that includes the response inside the “background-image” property of an hidden div.

• This technique’s main limitation is the number of characters that can be used for a “background-image” property’s value. An iteration method that would split the server’s response and send it chunk by chunk would be a good idea to deal with this.

  There is also the fact that only recent browsers can be targeted.

• The associated PHP file: stylesheet.php

9 Comments »

Comments feed

Brent Ashley did this a gazillion years ago: http://www.ashleyit.com/rs/

Comment by Luc — September 29, 2005

But those techniques work even if cookies are disabled…

Comment by Steve — September 29, 2005

Well, Brent Ashley’s technique, I think, was a bit different: it used iframes. That particular technique first appeared here: http://www.depressedpress.com/Content/Development/JavaScript/Articles/GIFAsPipe/Index.cfm

Comment by Keith Gaughan — September 29, 2005

While my JSRS library uses hidden iframes, my RSLite library uses img/cookie. I came up with it in 2001 independently of the GIFAsPipe article which was written in 2000 but I hadn’t yet stumbled upon it when I got the img/cookie idea from a discussion on the DYNAPI mailing list.

I still use the img/cookie technique for the Blogchat client at http://www.blogchat.com.

Comment by Brent Ashley — September 30, 2005

BTW, RSLite is showcased in Stuart Langridge’s new book, DHTML Utopia: Modern Web Design using JavaScript and DOM (http://www.sitepoint.com/books/dhtml1), where he uses it to build an example in his chapter about Remote Scripting.

Comment by Brent Ashley — September 30, 2005

About a year ago we did a chat using the style class method. It worked fine, actually its a livehelp
application so the op can talk to multiple users “asynchronously”. Main problem was js was not being multithreaded but with a bit of tweaking we got the messaging to behave ok you can deal with multiple questions at once.

Comment by kaller — November 29, 2005

Hi all. could any one show me how i can change image width dynamically within javascript when ever i call a php using image method(I make frequent call to php to get updated image width).The reason that i want to change image width is to activate diffrent functions inside javascript by getting width size from server without using any cookies,iframe. I wonder how this can be done without cookies and iframe or ajax. I made a lot of search and no luck. hope some one show me how this can be done.Thanks

Comment by method — March 27, 2007

http://www.turkish-property-world.com Crazy For You

Comment by PaulWills — January 1, 2008

Thank you

Comment by turkeyproperty — January 27, 2010