Section 3.37. Change that baby back to asynchronous


3.37. Change that baby back to asynchronous!

Don't forget to change sendRequest(), in coffee.js, back to the asynchronous version... nobody wants to wait around on their caffeine fix.

Two coffee makers, asynchrony, and one jittery, wired, happy office.

Check out the coffee maker for yourself!

60 Second Review

  • Synchronous requests wait for a response from the server before anything else is allowed to happen.

  • Asynchronous requests don't wait for a response, so users can keep pounding away at an asynchronous application while a request is being handled.

  • A lot of Ajax applications are asynchronous, but when a web server returns a response quickly, it really doesn't matter whether the app is asynchronous or not.

  • Asynchronous applications work best when the server takes a while to send a response back, or when users need to do several things at one time on a web page or form.

  • When you call a request object's open() method, the third parameter tells the request whether or not it's asynchronous. A value of "true" means asynchronous; "false" means synchronous.

  • The DOM allows you to change a web page without reloading the page.

  • The innerHTML property is deprecated, and isn't as safe or stable an approach as using the DOM to change a web page from your JavaScript.

  • Once your requests are asynchronous, you don't need any special code in the rest of your application. You write code normally and it runs automatically, without waiting for a server's response.

  • It's a good idea to test an application in "synchronous" mode to see the difference being asynchronous really makes.

 Webville Tree Farm 5 miles ahead We're headed to the tree farm in Chapter 4... get ready for some Web Forestry. 

3.37.1. Just Do It Solution

Now that you know the name of your JavaScript functions, you can finish up the rest of the HTML for the coffee maker.

     <h3>Beverage</h3>     <p>      <input type="radio" name="beverage"               value="mocha"               checked="true">Mocha</input>      &nbsp;&nbsp;      <input type="radio" name="beverage"               value="latte">Latte</input>      &nbsp;&nbsp;      <input type="radio" name="beverage"               value="cappucino">Cappucino</input>    </p>    <p>     <input type="button"              onClick="orderCoffee();"orderCoffee() is     the JavaScript function you'll write to send a new coffee order to     thecoffee-making PHP script.              value="Order Coffee" />    </p>   </form>  </div> </div> In the first coffee maker, these ids were "coffeemaker1" and "coffeemaker1-status"... <div >    <h2>Coffee Maker #2</h2>    <p><img src="/books/2/850/1/html/2/images/CoffeeMaker2.gif"            alt="Coffee Maker #2" /></p>    <div >Idle</div>...so in this    coffee maker, we just changed all the "1"s to "2"s. </div> 




Head Rush Ajax
Head Rush Ajax (Head First)
ISBN: 0596102259
EAN: 2147483647
Year: 2004
Pages: 241

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net