Head Rush Ajax

3.1. What does asynchronous really mean? Asynchronous means that you don't have to wait around while a web server is responding to your request. That means you're not stuck: you can go on doing what you want, and have the server let you know when ...

3.2. Break Neck Pizza is an asynchronous app Take another look at the Break Neck Pizza Ajax application. You type in your phone number, and then move to the pizza order or address. The page's JavaScript then gets your phone number from the f...

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...

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 re...

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, ...

3.6. Three ingredients for asynchronous coffee There are three basic parts to the Ajax-powered coffee maker: Coffee maker HTMLFirst, you'll need the HTML for the coffee maker web page. The page needs to take orders, and report on the status of...

3.7. Connecting the parts of the coffee maker You've seen the three basic parts of the coffee maker app. But let's go a little further, and see how these parts combine into a coffee-making wonder. Obviously, we've got an HTML form, some JavaScr...

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 tak...

3.9. The back-and-forth of Ajax development In Chapters 1 and 2, you were able to start working on an application and develop it piece by piece until you were done. In this chapter, we're going to have to go back and forth a bit between the three ...

3.10. The coffee maker HTML Enough coffee talk; it's time to build the asynchronous coffee maker application. First, let's take a look at the HTML for the coffee maker application, in coffee.html. We've gone ahead and written the HTML for pl...

3.11. Here's what we did We put all the code that creates and tests the request object into common.js, and then put all the coffee-related functions into coffee.js. If you did things differently, that's okay. Just make sure you remember wher...

3.12. 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...

3.13. Writing JavaScript to send the request Now let's write the JavaScript to send the request to the coffee-making script: function sendRequest(url) {All this code should go in your copy of coffee.js. request.onreadystatechange = serveD...

3.14. Getting the beverage and size of the order Before we figure out how to get and update the status of the two coffee makers, you need to write the code for getSize() and getBeverage(). Let's look back at the coffee order form and see wh...

3.15. Getting the value of a radio group The key to getting the size and beverage that Jim selected is realizing that there are three different <input> elements, all named "size" (and "beverage"). So you need to figure out which of these ...

3.16. What JavaScript do we still need to write? There's a lot of JavaScript that you'll need to write to make the coffee maker work like it's supposed to. Let's take a look at all the functions we've got to code, and review what we still need to ...

3.17. Getting and setting the text content in a <div> Let's get back to orderCoffee(). We need to get the status of the first coffee maker from the "coffeemaker1-status" <div> element, and then if the status is "Idle", send a req...

3.18. Checking a coffee maker's status Now that you can use the utility functions in text-utils.js, you can easily check the status of a coffee maker using the getText() function, like this: function orderCoffee() { var name = document....

3.19. Setting the text in a <div> Now that you know how to get the text in the coffee maker status <div>s, you just need to be able to set the text in those status <div>s. You can use another utility function in text-utils....

3.20. Test drive Even though there is plenty of work left to do, go ahead and take the coffee maker for a test drive. Be sure you've added the sendRequest(), getSize(), getBeverage(), and orderCoffee() functions to coffee.js, and then load c...

3.21. What do we do with the server's response? You've completed orderCoffee(), and now coffeemaker.php is done. When you send a request to brew coffee to one of the coffee makers, coffeemaker.php runs and then returns the coffee maker that ...

3.22. Writing the callback function The only function left to write is serveDrink(), which needs to take the response from the server and figure out who placed the order, and which coffee maker was used to brew the order. Then serveDrink() can ...

3.23. Interpreting the server's response The server's response looks like this when it's received by the serveDrink() callback: We really need to split this response into two parts. Here's the response from the server-side coffee-making script...

3.24. Introducing the JavaScript substring() function JavaScript has a function that's just perfect for taking a string like the coffee maker is returning, and breaking it up into a few parts. Here's how you use the substring() function: var...

3.25. substring() practice Let's spend a little time practicing how to use the JavaScript substring() method, using the string you saw on the last two pages. myString 1Jim Position: 0 1 2 3 myString.length4You can ...

3.26. Finishing up serveDrink() Let's spend a little time practicing with the JavaScript substring() method, using the string you saw on the last two pages. function serveDrink() { if (request.readyState == 4)These two lines should be p...

3.27. Frequently Asked Questions? Q:Why didn't we just use form <input> elements for the coffee maker's status? Wouldn't that have been a lot easier than using all this DOM stuff?A:We certainly could have used form elements to...

3.28. The final test drive (right?) It looks like we've got all the JavaScript for the coffee maker app written. Be sure you've followed along with all the examples so far, and saved your changes to coffee.html and coffee.js. Then load coffee.html...

3.29. A closer look at the request object To figure out what's going on with Jim's order, let's take a closer look at each step of the test drive on the last two pages, and what our request object is actually doing. Enter an order for Jim: he ...

3.30. We need two request objects! Time to dig back into your JavaScript again. HTML form JavaScript PHP script When Jim places his order and your code sends a reuest to use the first coffee makeryou should use your first request o...

3.31. Creating two request objects First, we need to actually create both request objects. Open up ajax.js and make the following changes, so that we're creating two request objects instead of just one: This is your ajax.js file. var req...

3.32. Using two request objects With two request objects created and ready for use, you'll need to change updateCoffee() to use both request objects, instead of just one. We can use the first request object, request1, to send all requests to the f...

3.33. Updating orderCoffee() Since sendRequest() handles requesting that a coffee maker start brewing an order, you only need to pass in the right request object with orderCoffee(). That means just making two small changes: Make both of these c...

3.34. Frequently Asked Questions? Q:We're using two request objects so we can send requests to both coffee makers, right?A:We were actually able to make requests to both coffee makers with just one request object. The problem, though, was...

3.35. Welcome to the world of asynchrony! It's been a long ride, but you should have everything in place to get your co-workers all the caffeine they want, without any waiting. Be sure you've made the changes to ajax.js and coffee.js so that th...

3.36. A synchronous test drive When you run the synchronous version of the coffee maker application, you should notice quite a big difference. As soon as you click on "Order Coffee", you're stuck. The button stays highlighted, and if you try to en...