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
Listing 2-7 Cookie-Powered Ajax
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.
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.
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
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.
At the heart of Ajax is the communication channel with your server. The best way to accomplish Ajax communication is by using
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 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: