Understanding Ajax: Part 2 | 2

Understanding Ajax: Getting Started: Part 2

2.6 Fallback Option 2: Sending a Request Using a Cookie

You can transfer data to your server using cookies, but any implementation using them will be severely limited. Cookies have a maximum size of 4k, and each domain can set only 20 of them, which means that each request is going to be size-limited. Cookie-based Ajax is most useful when your site is designed for it, because its limitations make it hard to use it as a fallback. The basic functionality is provided by setting a cookie, loading an image, and then polling on an interval while waiting for the response to appear. The implementation is simple; to do something besides alerting the contents of the result, you just set your own custom onComplete event handler. An example where the server returns the input and the number of times it has been called is shown in Listings 2-7 and 2-8. The example’s JavaScript is shown in Listing 2-7, and the PHP code, which reads the cookie and then sets a response, is shown in Listing 2-8.

Listing 2-7 Cookie-Powered Ajax

In Listing 2-7, the cookie-powered Ajax functionality is wrapped inside the JavaScript class CookieRequest. Requests to the server are made with the call method (lines 11–19). The call method takes a URL to which to send the request. It also takes a payload (the content we want to send to the server), which is sent in the request cookie. The method then uses the setCookie method to set a cookie named CR (line 14); it then creates a new Image object and sets its src to the requested URL (line 15). The method finishes by starting a timer, which runs the read method every 500 milliseconds.

The read method (lines 20–38) checks for the presence of the CR cookie (lines 23–24). If it exists, the data in it is passed to the onComplete method (line 26). If the data isn’t present, we check for errors; this is done by comparing the number of checks we’ve completed against the max checks set in the attempts property (line 31). If there is an error, the onError method is called (line 32). If no error is present, we start another timer to do the next check (lines 34–35).

Lines 39–44 contain methods that you’ll override when using the class. The onComplete method is called when data is successfully loaded. This is the equivalent of the callback property in the HttpClient class. The onError method is called if the request doesn’t complete successfully; of course, you could leave this as an alert, but, in most cases, you’ll want to provide a more understandable error message to your users or even retry the request.

The CookieRequest class also contains helper methods for dealing with getting and setting cookies. setCookie (lines 45–49) works by setting the value of document.cookie to a urlencoded string in the format of cookie name=value. getCookie (lines 50–59) works by splitting document.cookie into one part for each cookie (the cookies are separated by ";") and then looping over these parts looking for a cookie with the specified name. If a matching name is found, the value is returned; otherwise, false is returned.

The PHP page that is used with Listing 2-7 is shown in Listing 2-8. It is used as the URL in the call method and processes the payload that is set; it then sets a response for read to grab.

Listing 2-8 PHP Server Page for Handling a Cookie Ajax Request

This PHP code provides the basic functionality needed to interact with cookie-based Ajax requests. It uses PHP sessions to store a counter and increments it as each request is made. As you extend this code, you could use different PHP pages to decide which action to perform, or you could include that information in the cookie that is sent from the client. Lines 2–5 handle basic session setup, setting the counter to 0 if this is the first call. Lines 6–10 handle the checking of the client cookie and the sending of the response. This is done by setting a cookie that then will be sent with the response (line 8–9). If you want to handle large server responses, you would need to include code to split the data among multiple cookies.

2.7 Summary

At the heart of Ajax is the communication channel with your server. The best way to accomplish Ajax communication is by using XMLHttpRequest. XMLHttpRequest provides the ability to make synchronous and asynchronous requests while providing an easy-to-use programming model. XMLHttpRequest’s biggest disadvantage is that it doesn’t work on IE6 when ActiveX is disabled, which can cause problems for security-conscious users. For cases in which XMLHttpRequest can’t be used, you do have a number of different options. The best of these options is the use of hidden IFrames. IFrames require server pages to be specially tailored to respond to their requests. This shortcoming makes for a much less flexible implementation but one that is still capable of getting the job done for many Ajax applications.

When you need to support old browsers, you can use either IFrames or cookie-based solutions. Cookie-based solutions can even be used on version 3 browsers, if needed. Note, however, that the limited dynamic ability of a browser from that period makes building any large-scale Ajax applications a very difficult task. When targeting modern browsers, compatibility isn’t a huge concern, and you can choose the Ajax communication layer with the best features: XMLHttpRequest.

This excerpt is taken from Chapter 2 of Understanding Ajax: Using JavaScript to Create Rich Internet Applications, written by Joshua Eichorn, and published by Pearson Education, Inc., Copyright © 2007 Pearson Education, Inc. All rights reserved.

URL: