3.8. How is the coffee maker going to work? You should have a good idea of what you'll need to build the coffee-making app. Now you just need to be sure you know what the app will do. Before diving into the actual HTML and JavaScript, let's take a closer look at how the coffee maker will handle requests to make a cup of coffee. Let's say that Jim wants to get a caffeine fix. He enters his name into the web form, selects Large and Mocha, and then clicks "Order Coffee". This causes your JavaScript to run, which then sends a request to the first coffee maker. Jim enters in his name and coffee order. JavaScript Make Jim a large mocha coffeemaker.php Clicking on "Order Coffee" causes the Javascript to send a request to the server to brew a cup of coffee. using the first coffee maker
While the first coffee maker is brewing coffee for Jim, Mary decides she needs some cappucino to keep her going. Good thing this is an asynchronous applicationshe can order a drink from the second coffee maker, even though the server is still brewing coffee in response to Jim's earlier request. The first coffee maker is working on Jim's order, and we've updated the status of the coffee maker. Since coffee maker 2 is idle, and this is an asynchronous app, Mary can place her own coffee order. Make Mary a mediumThe server is still busy brewing coffee for Jim... JavaScript cappucino using the second coffeemaker.php ...but is able to go ahead and brew another cup using the second coffee maker. coffee maker
The coffee maker is finally done brewing Jim's mocha, and sends a response back to your page. The browser runs your Javascript callback, which updates the status of the first coffee maker to "Idle" and lets Jim know that his order is ready . Your JavaScript sets the status of coffee maker #1 back to "Idle"... ...and lets Jim know that his coffee is ready. Finished brewing coffee for Jim using coffee maker #1 JavaScriptYour JavaScript uses the server's response to figure out which coffee maker is finished, and whose coffee is ready. coffeemaker.php The server's still brewing Mary's coffee, but finished up with Jim's cup.
Now, Jim has has mocha, Mary's capuccino is almost ready, and the first coffee maker's available again to brew more coffee. Even better, nobody had to wait around for their caffeine fix. Even your boss is smiling now. Productivity is up, coffee mugs are full, and you're on your way to scoring a raise for your Ajax expertise.
Just Do It In the book's examples, find the chapter03/coffee directory. We've already written the PHP for the coffee maker and named the script coffeemaker.php. You'll also see an HTML file, coffee.html, and some CSS for the page, in coffee.css. Your job is to finish off the HTML in coffee.html, and to write the JavaScript to put all this coffee brewing and pouring into action. But first, turn the page for a little brain teaser... |
Coffee Conundrum What do you think would happen if you implemented the coffee maker application as a synchronous application instead of an asynchronous application? Try this exercise and see if you can figure it out. The answer comes later in the chapter, so you'll have to keep going to know if you got it right! Sara places an order for a small latte and gets the first coffee maker brewing. Brew Sara a small JavaScript latte with the coffeemaker.php first coffee maker
Your officemate needs some coffee. Can she use the second coffee maker while the first coffee maker is brewing Sara's order? Remember, this is a synchronous application (at least for now). Janice needs some coffee. Coffee conundrum: can Janice use the second coffee maker while the first coffee maker is still brewing a cup for Sara? Brewing coffeemaker.phpThe first coffee maker is still brewing coffee for Sara.
|
|
