Head Rush Ajax

2.1. Break Neck Pizza Delivery 30-minute pizza delivery? Old skool. Try Break Neck Pizza, revolutionizing high speed pizza delivery through its patented "just in time" cooking process along with its distributed network of bicycle messengers. Bette...

2.2. Solving the pizza delivery problem Fortunately, web developers have been solving these sorts of problems for years. Instead of letting users enter their own address (and type something incorrectly), let's look up the customer's address in ...

2.3. Break Neck Pizza, Ajax-style Instead of starting with old 1990s development ideas, let's look at what the Break Neck app should do. Then you can use your new asynchronous programming skills to make sure Break Neck's order form is a respons...

2.4. Diagramming the Break Neck app Now that you know how customers will use the Break Neck app, let's take a look at what actually has to happen behind the scenes. Customer's Phone NumberOnce the customer enters their phone number, a JavaS...

2.5. Be the Architect You've seen what the Break Neck order form should do, and you've also got an idea of what has to happen behind the scenes to turn Break Neck into a customer-friendly web app. Now it's your turn to take charge. Below is the b...

2.6. Step 1: Get the customer's phone number It looks like the first thing we need to do with the Break Neck app is make sure we can get the customer's phone number. That's going to take some HTML, a bit of JavaScript, and a lot of help from the w...

2.7. HTML 101: accepting user input The Break Neck order form already has fields for the customer to enter in their phone number, address, and pizza order. Let's take a quick look at the HTML for the order form, and then figure out how to conne...

2.8. Event handlers connect HTML to JavaScript Remember event handlers from Chapter 1? You used the onClick handler to connect a button on an HTML page to a JavaScript function. Let's take a quick peek back at Chapter 1: Remember this? W...

2.9. Event handler roundup You have lots of different ways to attach your JavaScript code to your HTML pages. Here are just a few of the more popular event handlers, and a brief review of how each works. Take a close look; you'll be using one of t...

2.10. Frequently Asked Questions? Q:I used the onBlur handler, instead of onChange. Wouldn't that work also?A:onBlur will run whenever the customer leaves the phone number field, so that's also a good option. But with onBlur, getCustomerInfo() wil...

2.11. On to the JavaScript Now you're ready to dig into some JavaScript. You know the name of the function that you'll be using to get the customer's phone number: getCustomerInfo(). This function needs to send the customer's phone number to Break...

2.12. Use the DOM to get the phone number You can use the Document Object Model, or DOM, from your JavaScript to get the phone number that the customer entered into the Break Neck order form. We'll spend a lot more time looking at the Document Obj...

2.13. Connecting the DOM dots Let's use the DOM to get the customer's phone number. Below, we've connected the pieces of DOM code you saw on the last page, and added them to the empty getCustomerInfo() function: function getCustomerInfo() {...

2.14. Step 2: Request the customer's address Next up is sending the phone number we got in Step 1 to Break Neck's web server, and asking for the customer's address based on that phone number. We're on to the next part of our Break Neck diagram...

2.15. getCustomerInfo() at a glance You should be pretty comfortable with making a GET request after fixing up Katie's Boards 'R' Us app back in Chapter 1. Here's similar code for getCustomerInfo(); most of this JavaScript should look similar to t...

2.16. Creating a request object This step is all about making a request to the Break Neck server. For that, we need a request object that our JavaScript function can use. Luckily, though, you already wrote code that creates a request object bac...

2.17. Plans change Remember your plans for the Break Neck app from page 73? Well, you've learned a lot since then, and now's your chance to make a few changes. Flip back to your original plans, and see if there are any changes you might want to ma...

2.18. Supporting multiple browsers It's time to break into this pre-assembled JavaScript, and figure out exactly what's going on. Let's walk through exactly what each piece of createRequest() does, step-by-step. Declare a request variableFirst, w...

2.19. Just Do It Now that you've learned about static JavaScript, creating request objects, and better error handling, you need to make some more changes to pizza.html. Open up your HTML, and move all the code in createRequest() outside of the ...

2.20. Back to getCustomerInfo() With the request object taken care of, let's get back to coding getCustomerInfo(). Remember where we left this function? function getCustomerInfo() { var phone = document.getElementById("phone").val...

2.21. Talking to the server-side guys Here's what we need to have the server-side guys take care of for us: Create a new PHP script to lookup a customer's address based on their phone number.Name the script lookupCustomer.php.Figure out how the s...

2.22. Break Neck's PHP script Let's ask Frank over in the server-side group to write us a PHP script to look up customer addresses. Then you can send the customer's phone number to this script, and get the customer's address as a response. ...

2.23. Request URLs deliver data to the server The simple little request URL in getCustomerInfo() has a lot of responsibility. Let's take a closer look, and see exactly what that request URL is doing: The complete request URL.Since there'...

2.24. Giving instructions to the browser Next we need to tell the browser what to do when it gets a response from the server. Remember, the browser will run the function we tell it about every time the ready state changes. function ge...

2.25. Frequently Asked Questions? Q:If we aren't calling createRequest() in our getCustomerInfo() method anymore, how can we be sure that there's a request object available?A:Remember, all the JavaScript code that creates the request object is ...

2.26. Send the request to the server All that's left to complete this step is to actually send the request. This is a piece of cake, as you saw in Chapter 1. Let's look at the last line of getCustomerInfo() now: function getCustomerInfo() {...

2.27. Podcasting Studio HeadRush: We're here today with the ever-popular Web Browser. Browser, we've been really looking forward to talking with you today. Web Browser: Thanks for having me, HeadRush. HeadRush: Let's begin by talking about re...

2.28. Step 3: Retrieve the customer's address In this step, we need to use the address that the Break Neck PHP script will return in response to the request we made in Step 2. Then, we can have the browser run a JavaScript function once it has a r...

2.29. Under the Microscope: HTTP Ready States So when exactly does the ready state of a request change? Here's a close-up look at the ready state of a request, and how it changes as a request is processed by a web server. request.o...

2.30. Checking the ready state Now that you've got getCustomerInfo() working, and the browser knows to call updatePage() when the request's ready state changes, it's time to write the callback function for the Break Neck app. Let's start out by...

2.31. Frequently Asked Questions? Q:How does the server run the callback function when the ready state changes? I didn't think the server could call JavaScript code that's in an HTML page.A:You're rightit's the browser that actually runs ...

2.32. What is the browser doing? You've seen what the Break Neck server is doing, and you're written a lot of new JavaScript, but what's the browser doing as all these ready states are changing? Let's take a look and find out: Web BrowserT...

2.33. Get the server's response from the request object If the ready state is "4", the browser will have put the server's response in the request object's responseText property: function updatePage() { if (request.readyState == 4)...

2.34. Step 4: Update the order form Once you've got the customer's address, you need to update the pizza order form. You'll need the browser again, as well as some help from the Document Object Model. We're getting close to being done with the Br...

2.35. Finishing off the callback function With the address from the server, all that's left is to update the web form. Since the address is stored in a form field, you can use the DOM again, similar to how you got the value of the phone number ...

2.36. Frequently Asked Questions? Q:Why don't we have to use that JavaScript utility file from Chapter 1 to update the address field?A:In Chapter 1, we were updating the text in a <span> element. Since <span> isn't an HTML element t...

2.37. Test driving the Break Neck app Make sure you've added all the JavaScript we've talked about into pizza.html. Then, open up the page in your web browser, and enter in a phone number. It looks like everything is working! The server answers yo...

2.38. When browsers cache request URLs Let's take a closer look at exactly what browsers like Internet Explorer and Opera are doing, and figure out why that creates trouble for our asynchronous apps. 1 Your code makes a request to ...

2.39. Now the request URL changes Now, no two request URLs are the same getUpdatedBoardSales-ajax.php?dummy=1139262723388 getUpdatedBoardSales-ajax.php?dummy=1139262774440 getUpdatedBoardSales-ajax.php?dummy=1139262797519...

2.40. Just Do It Go back to your copy of boards.html, from the Chapter 1 examples, and update the getBoardsSold() function. Try your new version of the Boards app out on Windows using Internet Explorer, or on Opera (on the Mac or Windows). D...

2.41. Frequently Asked Questions? Q:Can't I just turn off caching in my browser, and avoid all this extra code?A:No, most of the options you have in your browser control caching of pages you directly load, by either typing a URL in the address bar...

2.42. Step 5: Place the customer's pizza order The customer enters their order into the form, and they'll see their address filled in, Ajax style, by the JavaScript function you wrote in Step 4. All that's left is to let the user submit his order,...

2.43. Back to Break Neck's order form With all the JavaScript sorted out, let's get back to the pizza order form. Once the customer enters their phone number, types in their pizza order, and verifies their address, all that's left is to send the o...

2.44. The final test drive The customer enters their phone number and then the JavaScript gets their order details and address from the server and fills in the web form. The customer makes sure the order and address are right, and p...