Returning Zero-Length Images Works Just Fine
Posted September 10, 2007 at 7:14 PM by Ben Nadel
NOTE: I have updated the Status Code returned by image.cfm to be 204 as per Justin's comments (see below). According to the w3c, 204 stands for No Content (which can/should be used in conjunction with the zero-length header).
I like AJAX a lot; I think it has a lot of uses. But, at the same time, I don't think it needs to be used every time you want to sent a message back to the server. AJAX is only a requirement if you actually care what (if anything) the server sends back as its response (or if you need to POST information vs. GET'ing it). In the past, if I didn't need to listen for a server response, I have advocated using a Javascript IMG object to ping the server.
The idea here is that you contact the server by setting an image's source equal to the ColdFusion page that you are trying to hit. Then, the server grabs all the URL params you send as the image SRC request and returns an image such as a 1x1 GIF image. However, what happens if you don't return an image at all? Why go through the overhead? Not returning an image has always made me nervous. Not sure why. It's not like the page is gonna explode or anything?
To put my mind at ease, I finally did a test to see what would actually happen if no image was returned to the Javascript image request. First, I put together a small XHTML page that would make an IMG src request to the server and then output whether the image loaded successfully:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>Zero-Length Image Test</title>
-
- <script type="text/javascript">
-
- function TestImage(){
- var imgTest = new Image();
- var objMessage = document.getElementById( "message" );
-
-
- // Set up load handler.
- imgTest.onload = function(){
- objMessage.innerHTML = (
- "Loaded: " +
- imgTest.complete
- );
- }
-
-
- // Set up error handler.
- imgTest.onerror = function(){
- objMessage.innerHTML = (
- "Error: " +
- imgTest.complete
- );
- }
-
-
- // Set the image source.
- imgTest.src = "image.cfm";
-
- return;
- }
-
- </script>
- </head>
- <body onload="TestImage();">
-
- <h1>
- Zero-length Image Test
- </h1>
-
- <p>
- <span id="message"></span>
- </p>
-
- </body>
- </html>
Notice here that source of the image is the images.cfm ColdFusion template. This would theoretically allow us to pass variables to the server via the IMG source URL.
Then, I put together a small ColdFusion page that returns nothing. And, not only does it return nothing, it tells the browser, using the ColdFusion CFHeader tag, to expect zero bytes of content. This should get the browser to stop downloading the requested file immediately (what we want).
- <!--- Kill extra output. --->
- <cfsilent>
- <!---
- Tell the browser that the image was found but that
- it has no content. Status 204 means no content.
- --->
- <cfheader
- statuscode="204"
- statustext="No Content"
- />
-
- <!--- Tell the browser that the image has no content. --->
- <cfheader
- name="content-length"
- value="0"
- />
-
- <!--- Set the content type. --->
- <cfcontent
- type="text/gif"
- reset="true"
- />
-
- </cfsilent>
Running the code above, we get the following output:
Zero-length Image Test
Error: true
Awesome - the world didn't stop spinning! Returning a zero-length image seems to work perfectly well; doesn't launch any Javascript errors; doesn't mess up the browser at all. All it does is trigger the OnError handler of the image which shows the "complete" flag as being true. I am very OK with this, and it makes me feel very comfortable to use a Javascript IMG object as a no-overhead server request method.
Reader Comments
Hi Ben, you could also pass back a status code of 204 (http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.2.5) which tells the client that the request was successful but that it has no data to return... I've been using this technique ever since Brandon Harper had wrote about in the CFDJ a few years back (http://www.sys-con.com/story/?storyid=46789&de=1)
@Justing,
Awesome tip! I rare use anything other that 200, 500, 404, 301 and 302. Good to know there is one like that (that stands for no data). I will modify the post to reflect this (after I test it).
