spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / ajax_tech2 / 1 current pageTo page 2
[next]

Market Data Analyst (IL)
Next Step Systems
US-IL-Chicago

Justtechjobs.com Post A Job | Post A Resume
Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans


Alternate Ajax Techniques, Part 2

By Nicholas C. Zakas.

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);

      if (oRE.test(document.cookie)) {
        return decodeURIComponent(RegExp["$1"]);
      } else {
        return null;
      }
    }
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.

home / programming / ajax_tech / 1 current pageTo page 2
[next]


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

Created: March 27, 2003
Revised: March 17, 2006

URL: http://webreference.com/programming/ajax_tech2/1