Head Rush Ajax

you’re on your way 4

159

Sending a request for coffee

With the HTML complete, it’s back to our JavaScript. Let’s write the

JavaScript to send a request to the server to make coffee. By now, you’re

a pro at making requests, so orderCoffee() should be a piece of cake,

right? Let’s think through what this function needs to do:

coffee.js

orderCoffee()

sendRequest()

coffeemaker.php

3

4

JavaScript

PHP script

HTML form

1

1. Jim enters his name and

coffee order, and clicks the

“Order Coffee” button.

2. The onClick event handler

for the “Order Coffee”

button tells the browser

to run your orderCoffee()

JavaScript function.

2

3. orderCoffee() gets the name of your co-

worker (“Jim”), along with the drink size and

beverage he requested. Then it builds a URL

using the name of the coffee-making PHP

script and the drink order details, and passes

this URL to sendRequest().

coffeemaker.php?name=Jim

&size=large

&beverage=mocha

&coffeemaker=1

4. sendRequest() sets up

the callback function,

serveDrink(), to handle the

server’s response, and then

sends the request to the URL

it got from orderCoffee().

The request URL has the

name of the person who

ordered the coffee, the

size and type of drink,

and the number of the

coffee maker that should

brew the drink (1 or 2).