1.5. Reworking the Boards 'R' Us report Let's use Ajax to revamp Katie's web report. With Ajax, we can get rid of all those page reloads, and cut down on how much data the server has to send to the report. Here's what you're going to do in the rest of this chapter: Create a new object to make requests to the server First, you'll need a JavaScript function to create an object that will let you make requests to the server, and get a response back. Let's call this new function createRequest() <html> <head>You'll add this JavaScript into the head of your HTML. <title>Boards 'R' Us</title>Here's the current HTML for the Boards 'R' Us app. <link rel="stylesheet" type="text/css" href="boards.css" /> </head> <body> <h1>Boards 'R' Us Sales Report</h1> JavaScriptcreateRequest() will create a new request object.
Write a JavaScript function to request new board sales totals Next, you'll use the object you just created in Step 1 to make a request to the web server. We can put this code in another function, called getBoardsSold(), and run it when Katie clicks the "Show Me the Money" button. Request Total Boards Sold This is the same request that the server got in the non-Ajax version......except that now the server doesn't need to send back a bunch of HTML.getBoardsSold() will then ask the server for updated board sales.Clicking "Show Me the Money" starts a new request.We'll use the request object created in Step 1 to send this request.
Update Katie's report with new numbers using JavaScript Now you can update the report with the current number of boards sold, and figure out how much cash Katie's made. Let's take care of this another new JavaScript function that we'll write; we'll call this function updatePage() Now, the response only has the number of boards sold in it.Now, the server isn't doing any calculations. Updated NumberupdatePage() gets the server's response. of Boards Sold Cash for SlopesOnce updatePage() gets a response, it calculates the cash that Katie's made, and then updates the numbers in the web report. BoardsAll new totals. SoldThe rest of the web page never changes... it doesn't flash, or blink, or anything.
Say What? Don't worry if you don't understand everything that's going on... especially with the actual request. We're going to cover all of this in detail in this book. For now, just get an idea of the basics of how an Ajax application works. Pay careful attention to how the web page uses JavaScript to make a request, and how the server only returns a single number, and not HTML. |
We'll get to coding in just a few pages. First, let's take a short detour... The highlight reel: Chapter 1 So you're probably thinking, "What's a highlight reel doing at the beginning of the chapter? That's not normal." You're right... but this is Head Rush, remember? Before you go any further, stop and read each of these highlights out loud. Then, go on to the next page, and get ready to load these concepts into your brain. We'll work through each of these in detail throughout this chapter. Asynchronous applications make requests using a JavaScript object, and not a form submit. Your requests and responses are handled by the web browser, not directly by your JavaScript code. Once the web browser gets a response to your asynchronous request, it will "call back" your JavaScript with the server's response. We're not kidding... don't go any further until you've read these OUT LOUD. Trust us, nobody will think you're weird (well, maybe someone will, but then they'll be impressed with how smart you're becoming, too!) |
|
