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