Head Rush Ajax

next generation applications

Any time Katie clicks the “Show Me the Money” button, the getBoardsSold()

function should run. You can use a JavaScript event handler to take care

of this. An event handler connects a piece of JavaScript code—like the

getBoardsSold() function—to a certain event, like when someone clicks a

button on a web page.

In the Boards app, let’s use an event handler to connect the “Show Me the Money”

button to the getBoardsSold() function. Since you want to attach the event to

a button click, use the onClick handler, like this:

Adding an event handler

updatePage()createRequest() getBoardsSold()

<form method=”GET” action=”getUpdatedBoardSales.php”>

<input value=”Show Me the Money” type=”button”

onClick=”getBoardsSold();” />

</form>

Since this form should never get

submitted in the Ajax version of

the report, you can remove the

“action” attribute if you want.

“onClick” means that anytime

Katie clicks this button...

...this function will get run.

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 run a callback function.

Reviewing the highlight reel

Remember our highlight reel? Have you been keeping up with what

we’ve covered, and what you’ve still got to look forward to? Let’s take a

quick look at what you’ve learned in this chapter so far:

We used

cr ...