Head Rush Ajax

10

Chapter 1

<html>

<head>

<title>Boards ‘R’ Us</title>

<link rel=”stylesheet” type=”text/css”

href=”boards.css” />

</head>

<body>

<h1>Boards ‘R’ Us Sales Report</h1>

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:

JavaScript

1

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().

Create a new object to make requests to the server

2

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.

Write a JavaScript function to request new board sales totals

You’ll add this

JavaScript into the head

of your HTML.

createRequest()

will create a new

request object.

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.

<script>

var request...

function

createRequest()

{

...

}

</script>

<script>

var request...

functio ...