Section 2.38. When browsers cache request URLs...


2.38. When browsers cache request URLs...

Let's take a closer look at exactly what browsers like Internet Explorer and Opera are doing, and figure out why that creates trouble for our asynchronous apps.

1 Your code makes a request to a web server

Most Ajax apps start by running a JavaScript function based on an event (like a phone number being entered in). The JavaScript builds a request URL, and sends a request to that URL.

     Request TotalThis request comes from the browser, and not directly from your JavaScript code.     Boards SoldThis request is sent to getUpdatedBoardSales -ajax.php. This is the request URL.     Web BrowserHere's a look at what happens with the Boards app, from Chapter 1.     getBoardSold()Your code asks that a request be sent.     PHP script 

2 The server sends back a response

When a response is sent back to the browser, the callback function you specified is run. But, if the browser is caching request URLs, it takes a note of the URL, and the answer from the server, and saves those two values for later.

     1643The server sends back an answer to the request.     Web BrowserThe browser also stores the URL and response so it can use them later.     updatePage()     PHP script 

At this point, everybody loves you. You're a hero!

3 You've got a dynamic application!

Your JavaScript callback function can update the web page with new values based on the server's response, all without having to submit any forms or redraw the page.

4 Your code makes another request to the web server

Since everyone loves your app, it gets a lot of repeat use. So in the Boards app, Katie's boyfriend clicks the "Show Me the Money" button a second time.

     Request Total     Boards SoldThis request is sent to getUpdatedBoardSales-ajax.php, the same URL as the first request.     Web Browser     getBoardSold()     PHP script 

5 The browser gives your code a response

The browser sees that it already has an answer for the request URL you supplied, so it figures it can save you some time. Instead of sending the response to the server, it gives you the response it has in its caching table.

     Request TotalThe browser thinks it's helping you...     Boards Sold     Web Browser     updatePage()     1643...but it ends up giving you the same data over and over. 

6 You've got a dynamic application!

Suddenly, your dynamic application is returning the same data, over and over. Your callback is getting stale data from the server, and your web page isn't getting updated with fresh information.

Now, everyone hates you. You're an idiot, and all this Ajax stuff was a waste of time.

So to get around the caching, we have to change our request URL every time. But... if we're talking to the same script, and we're not sending in data in the Boards app, how can we make the URL different?

2.38.1. Sometimes it takes a hack...

The browser doesn't care how the request URL is different; it just cares that it's different. So, we can add a dummy parameter onto the request URL, and give it a different value every time we send the request. And, since we don't want to write a random number generator, or do any extra work, we can just grab the current time (in seconds), and add that to the request URL. Let's take a look at how we can fix up getBoardsSold() from Chapter 1:

     function getBoardsSold() {       createRequest();Remember back in the old days, when our request object was created in a function?       var url = "getUpdatedBoardSales-ajax.php";This first line sets the URL normally, and the second line adds a dummy value to the URL.       url = url + "?dummy=" + new Date().getTime();Our dummy parameter has the current time as its value.       request.open("GET", url, true);       request.onreadystatechange = updatePage;       request.send(null);     } 




Head Rush Ajax
Head Rush Ajax (Head First)
ISBN: 0596102259
EAN: 2147483647
Year: 2004
Pages: 241

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net