ADBRITE ads links
You are here: CodeIdol.com > Ajax > Head Rush Ajax > POST Requests Saying More With POST
Head Rush Ajax
|
5.1. Repeat business rocks
Remember all the work you did on Break Neck Pizza? Well, it seems like everyone's been loving the Ajax version of the pizza order form. In fact, Break Neck has a few new features they want to add, and they're depending o...
|
|
|
5.2. Submitting a form with Ajax
Break Neck doesn't seem to be asking for anything that complicated. Let's see if we can convert the Break Neck pizza form submission into an asynchronous request.
Here's what you'll need to do:
submitOrd...
|
|
|
5.3. 1. Update the Break Neck HTML
First, we need to change Break Neck's HTML so that it no longer submits the form when a customer clicks "Order Pizza". Let's take a look at the Break Neck order form, and make a few changes:
<body>
...
|
|
|
5.4. 2. Send the order to the server
Code Magnets
Next on the Break Neck task list is writing the submitOrder()
JavaScript function. This function needs to get the customer's phone number, address, and pizza order from t...
|
|
|
5.5. 3. Update placeOrder.php
You're moving along pretty quickly now! Let's get our old pal Frank to update his PHP script. It doesn't need to send us back a bunch of HTML anymore.
...
|
|
|
5.6. PHP at a glance
Frank hardly took any time in updating the placeOrder.php script. It still places an order, but now it doesn't need to return any HTML. Instead, it just gives an estimate for when the pizza will arrive at the custo...
|
|
|
5.7. 4. Write the callback function
Now that the Break Neck PHP
script just returns a delivery estimate, we can write a new JavaScript function to display this to the customer. Let's figure out exactly what we need to do.
What we have: An HTML...
|
|
|
5.8. The DOM is connected to what a customer sees
Let's take a closer look at exactly what happens when you replace an element in the DOM:
divHere's the part of the DOM tree that we're working on.Here's
the <form> we want to replace ...
|
|
|
5.9. Test driving Break Neck
Make sure you've checked your answers to the Just Do It exercise on the last page with ours, and made these changes to your pizza.js JavaScript file. Then, load up pizza.html, and let's see how things look.
The fir...
|
|
|
5.10. Just Do It Solution
Below is the completed showConfirmation()
callback function; make sure your answers match up with ours and make sure you understand all this code.
function showConfirmation() {Remember, this is run...
|
|
|
5.11. The PHP code creates a new response
header:
if (strlen($order) <= 0) {
header("Status: No order was received.", true, 400);
exit;
}
if (strlen($address) <= 0) {
header("Status: No address was received....
|
|
|
5.12. The server talks back
Anytime the server sends a response to your request, it can give you information about its response using response headers.
Web server
HTTP/1.1 400 Bad RequestHere's part of the actual HTTP response that the
Brea...
|
|
|
5.13. Break Neck error handling
Now that you know how to get a response header from the server, you can improve the Break Neck JavaScript, and let customers know a little more about any errors they run into.
Let's make a few simple changes ...
|
|
|
5.14. GET requests versus POST requests
Losing part of a customer's order would definitely be a problem for Break Neck. But, it looks like using a POST request might help solve the problem.
Let's take a closer look at both types of requests:
5...
|
|
|
5.15. Web servers unencode POST data
Once a web server gets a POST request, it figures out what type of data it has received, and then passes that information on to the program in the request URL.
placeOrder.php
Since this is a POST req...
|
|
|
5.16. Send more data with a POST request
It looks like POST is just what we need to make sure those big orders get to Break Neck's placeOrder.php
script intact. Let's update the JavaScript in plac...
|
|
|
5.17. Trying out POST requests
Make sure you've taken care of everything in the Just Do It exercise on page 299, and then load pizza.html in your web browser.
Go ahead and enter a phone number, and while the server is filling in your address...
|
|
|
5.18. Why didn't the POST request work?
It's got to be the placeOrder.php script. We told open() to use POST for the request, so it's got to be a server problem.
I already told you, there's no problem with my script. You must have scr...
|
|
|
5.19. The mysterious POST data
Frank and Jim are onto something. Remember when we talked about the server decoding the POST data from your request? Once the server opens up the POST request data, it doesn't know what ...
|
|
|
5.20. Setting the Content Type
You have to set the content type
for your POST data before you send the request. Then, when the request is sent, the server will get the request URL,
the POST data, and the type of data it should expect. Any...
|
|
|
5.21. Another test drive
Add the line of JavaScript that sets the "Content-Type" request header in pizza.js, and save your JavaScript. Then load pizza.html in your web browser...
|
|
You are here: CodeIdol.com > Ajax > Head Rush Ajax > POST Requests Saying More With POST
|
|
Related tags
Popular Categories
Unix books and guides
AJAX popular information
C# language guides
Windows books and cookbooks
.......
|
|
