Category list

Section 3.3. But it was probably too fast for you to notice...

3.3. But it was probably too fast for you to notice...

Break Neck Pizza isn't called "break neck" for nothingthe request to get your address and the response from the server happens so fast that you probably don't have time to start typing in your ordermuch less improve your golf gamebefore your address pops up.

As soon as you type in your phone number, the browser sends a request for your address to the server.


JavaScript       Customer's
                     Phone Number   PHP script


JavaScript       Customer's     PHP Script


No time for typing or golf here!
The server responds with your
address almost immediately.

Address

You probably see your address pop up right away, before you have a chance to do anything else.

3.4. What does asynchronous get you?

So what's the point of an "asynchronous" application if the server responds so fast that it doesn't make a difference anyway?

Both of the applications you've built so far are asynchronous. Still, the server responded so fast to your requests that you probably didn't notice any benefit from the asynchronous part of these applications.

But what happens if it takes a really long time to get the data back from the server? Or what if you really do need to do two things at one time? You'd like to keep using the application while that's happening, right?

That's when you'll really see the benefits of the "asynchronous" part of Ajax. In fact, you're going to build another applicationan Ajax- powered coffee makerwhere being asynchronous makes a big difference. Ready? Let's get started.

BRAIN POWER

What applications do you use on the Web that would be better if they were asynchronous?

3.5. Building an Ajax- powered coffee maker

Two coffee makers ... ...and a whole office of caffeine addicts.

As the official "coffee pot manager," it's your job to make sure that the caffeine needs of your officemates are met... and quickly, at that. All your mates are caffeine addicts, and they get a bit testy if there's no fresh coffee on hand. Good thing that there are two coffee makers; even if one order is being brewed, your co-workers can place another order, and have it filled by the second coffee maker.

You're going to build an Ajax application to allow your co-workers to order their coffee online .

You don't want anyone coming after you with empty coffee cups, so let's write an Ajax application for ordering coffee and keeping track of the status of both coffee makers. Here's what it will look like:

Here's the second coffee maker. If an order is brewing in coffee maker #1, this coffee maker will handle any additional orders. Just like coffee maker #1, it takes a little time to brew a cup.

This is the main coffee maker. Anytime an order is placed, and no coffee is brewing, this coffee maker handles the order. It takes a little time to brew a cup, though, and the coffee maker can only brew one cup at a time.

Here's where you place your order. You enter your name , the size of the cup you want, and what type of beverage you're interested in.

Once you've told the coffee maker what you want, you click "Order Coffee" to send the order to an open coffee maker.

3.6. Three ingredients for asynchronous coffee

There are three basic parts to the Ajax- powered coffee maker:

Coffee maker HTML

First, you'll need the HTML for the coffee maker web page. The page needs to take orders, and report on the status of the two coffee makers .

</p>
<h3>Beverage</h3>
<p>
<input type="radio" name="beverage"
value="mocha" checked="true">Mocha</input>&nbsp;&nbsp;
<input type="radio" name="beverage"

We'll have to create the controls for ordering coffee in the HTML page.

value="latte">Latte</input>&nbsp;&nbsp;
<input type="radio" name="beverage"
value="cappucino">Cappucino</input>
</p>
<p>
<input type="button"
onClick="orderCoffee();"
value="Order Coffee" />
</p>
</form>
</div>

<html>
...</html>
HTML

JavaScript code

Second, you'll need some JavaScript, including:

Code to create a request object.
A function to send an order to the coffee-making script.
A function to serve a drink when it's been brewed.
Event handlers to connect the web form buttons to these JavaScript functions.

<html>
<head>
<title>Break Neck Pizza Delivery</title>
<link rel="stylesheet" type="text/css" href="breakneck.css" />
<script language="javascript" type="text/javascript">

var request = null;
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {

orderCoffee()
serveDrink()

Server-side coffee-making script

You'll also need a server-side coffee-making script, which will brew coffee anytime it gets a request.

This is the PHP script that makes coffee. You'll send all the coffee orders to this script for brewing.

This script can handle the brewing for both coffee makers, since two cups can be brewing at the same time in the app.