Head Rush Ajax

50

Chapter 1

The browser stores the server’s response in the request object, and then runs

updatePage(). We’re nally ready to start coding this function. Let’s see what

we need to do:

Planning the updatePage() function

First: Get the updated number of boards sold

The server returns this number to the browser, and then the browser

puts this value in the request object’s responseText property:

function updatePage() {

var newTotal = request.responseText;

}

This is the property of the request

object that the browser uses to pass on

response data from the server.

Here’s the request object again.

Second: Get the HTML elements you need to update

There are two elements you have to update: the number of boards

sold, and the cash that Katie has made. You can use JavaScript’s

getElementById() method to grab each of these based on their

id attributes.

function updatePage() {

var newTotal = request.responseText;

var boardsSoldEl = document.getElementById(“boards-sold”);

var cashEl = document.getElementById(“cash”);

}

Assign each element

to a variable, so

you can easily

reference them in

your code later.

document represents the entire

HTML page...

...and getElementById() nds

the element with the ID you

pass into the function.

These are the names

of the HTML

elements we want

to get.

<span id=”boards-sold”>1012</span>

<span id=”cash”>167718.76</span>

Remember how Katie

added id attributes to

her <span> elements ...