1.1. The Web, Reloaded
Actually, we're getting rid of page reloads
in this chapter
Are your customers tired of waiting around
when they place an order on your site? Are you getting complaints that every time a button is pushed, the page ...
1.2. Welcome to the new millenium!
Anybody can program using the same old request/response model. But if you want faster
apps that feel like you're working on a desktop, you need something newyou need Ajax, a completely different approach to we...
1.3. "Reloads? We don't need no stinking reloads."
There's nothing more annoying than an application that redraws the whole page everytime you push a button or type in a value. In Katie's report, only a few numbers are changing, but the entire pag...
1.4. Ajax to the rescue
Do you see what the problem is? Every time Katie wants to find out the latest number of boards sold, the entire screen is redrawn, and she's left with the Internet version of snow blindness.
Didn't you say that Ajax will l...
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 ...
1.6. HTML Refresher
Feeling a little rusty on your <div>
s and <span>
s? We're going to dive into some HTML on the next page, so before we do, here's a quick refresher course on two of the coolest HTML elements you'll ever run ac...
1.7. What the server used to do
Remember how the non-Ajax version of Katie's report works? Every time a request is made to the PHP
script, it has to return the number of boards sold, along with an entirely new HTML page. Flip back a page, an...
1.8. Frequently Asked Questions?
Q:You've mentioned the Document Object Model a
couple of times. What's that? And what does it have to do with Katie's web report?A:The Document Object Model, called the DOM for short, is how web browsers store and...
1.9. Make sure the server is finished
Right now, your updatePage()
function assumes that the server is finished when it runs but that's not the case! To understand what's going on with your request, it's time to learn about ready states . Yo...
1.10. Checking for the right ready state
You already know that the browser will run your updatePage()
function when it gets a response from the server. But, there's a twist: the browser actually runs updatePage()every time the ready state chang...
1.11. Just Do It
Open up your boards.html file, and add in all this new JavaScript. Make sure your updatePage()
function has the JavaScript that checks the request object's ready state, as well as code to update the total board sales and figure...
1.12. Showing Katie some Ajax magic
It's time to see what all this hard work has done for Katie's web report. Make sure you've added all the JavaScript we've talked about in this chapter, and double-check that the "Show Me the Money" button runs g...
1.13. You did it! You took a boring sales report, and turned it into a dynamic Ajax application!
Nice work. Katie's web report is back online, Katie knows how much cash she's making without having to wait on her server or suffer a bunch of page re...
