In the last installment of this series, you learned about dynamic
script loading, which involves creating a <script/> element
dynamically and using it load JavaScript from the server. To make that work,
your browser had to be DOM-compliant. In Part 2, you'll learn how to use images
and cookies to enable client-server communication even on older browsers that
don't support the DOM.
Images and Cookies
When people think about cookies nowadays, most think about security concerns,
spyware and evil corporations tracking their every move. Those fears
are understandable given what goes on in the world of the Web, but cookies really
are just small pieces of data that can be accessed by both the client (through
JavaScript) and the server. However, there are several restrictions placed on
cookies that you need to be aware of before using them:
Each domain can store a maximum of 20 cookies on a user's machine. It's
best to reuse cookies whenever possible instead of creating new ones.
The total size of the cookie (including name, equals sign, and value) cannot
exceed 4096 bytes, meaning cookies are useful for storing small amounts of
data only.
The total number of cookies allowed on a machine is 300.
Each request to and response from the server contains cookie information, regardless
of what type of resource is being requested. This is where images come in.
Since Netscape Navigator 3, you've been able to change the src
attribute of an image using JavaScript. This counts as a request and, therefore,
brings with it cookie information from the server. As it turns out, images also
fire a load event when the image has completely finished loading, allowing you
to know exactly when the data you requested is ready. This makes images an ideal
way to manipulate cookies for client-server communication.
The Technique
The basic technique behind using images and cookies is similar to preloading
images. You need to create a <img/> element and then assign
its src attribute. To tell when the image is loaded, assign an
onload event handler:
var oImg = document.createElement("img");
oImg.onload = function () {
alert("Image is ready");
}
oImg.src = "/path/to/myimage.gif";
Unlike dynamically creating a <script/> element, the download
of an image begins as soon as the src attribute is assigned, meaning
that you don't even need to add the image to the page. In fact, you don't even
need to use an <img/> element at all, you can use the Image
object:
var oImg = new Image();
oImg.onload = function () {
alert("Image is ready");
}
oImg.src = "/path/to/myimage.gif";
Of course, this is just part of the process. If the image request was meant
to be bring back data in a cookie, then you'll need to read that data in the
onload event handler. The getCookie() method gives
you easy access to specific cookie values:
function getCookie(sName) {
var sRE = "(?:; )?" + sName + "=([^;]*);?";
var oRE = new RegExp(sRE);
Without going too deeply into this code, document.cookie returns
a series of name-value pairs that are URL-encoded and separated by semicolons.
This function looks through the string for the value matching the given name.
