Section 3.6. Three ingredients for asynchronous coffee

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.