HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [314]
5. Indicate the program to receive the request.
Typically your AJAX requests will specify a program that should respond to the request. I’m using greetUser.php.
6. Pass form data as a JSON object.
Encapsulate all the data you want to send to the program as a JSON object. (Check out Book IV, Chapter 4 for a refresher on JSON.) Typically this will be a series of name/value pairs. In this example, I’m simply indicating a field named userName with the value “Andy”.
7. Specify a callback function.
Normally you want to do something with the results of an AJAX call. Use a callback function to indicate which function should execute when the AJAX call is completed. In this example, I call the processResult function as soon as the server has finished returning the form data.
Simplifying PHP for AJAX
One of the nice things about AJAX is how it simplifies your server-side programming. Most PHP programs create an entire page every time. (Check out nameForm.html and greetUser.php on the Web site to compare a more typical HTML/PHP solution.) That’s a lot of overhead, building an entire XHTML page every pass. A lot of material is repeated. However, because you’re using AJAX, the PHP result doesn’t have to create an entire Web page. The PHP can simply create a small snippet of HTML.
Take a look at simpleGreet.php and you can see that it’s very stripped down:
$userName = $_REQUEST[“userName”];
print “
Hi, $userName!
“;?>
This is a lot simpler than most PHP programs. All it needs to do is grab the username and print it back out. The JavaScript function takes care of making the code go in the right place. When you’re using AJAX, the HTML page stays on the client, and JavaScript makes smaller calls to the server. The PHP is simpler, and the code transmission is generally smaller, because there’s less repeated structural information.
Back in the HTML, I need a function to process the results of the AJAX request after it has returned from the server. The processResult() function has been designated as the callback function, so take another look at that function:
function processResult(data, textStatus){
$(“#output”).html(data);
}
This function is pretty simple with jQuery:
1. Accept two parameters.
AJAX callback functions always accept two parameters. The first is a string that contains whatever output was sent by the server (in this case, the greeting from processResult.php). The second parameter contains the text version of the HTTP status result. The status is useful for testing in case the AJAX request was unsuccessful.
2. Identify an output area.
Just make a jQuery node from the output div.
3. Pass the data to the output.
You sometimes do more elaborate work with AJAX results, but for now, the results are plain HTML that you can just copy straight to the div.
Building a Multipass Application
The most common use of AJAX is to build an application that hides the relationship between the client and the server. For example, look at the multiPass.html page shown in Figure 6-2. This seems to be an ordinary HTML page. It features a drop-down list that contains hero names. However, that list of names comes directly from a database, which can’t be read directly in HTML/JavaScript. When the user selects a hero from the list, the page is automatically updated to display details about that hero. Again, this data comes directly from the database. Figure 6-3 shows the page after a hero has been selected.
Figure 6-2: The user can choose from a list of heroes.
Figure 6-3: Hero data is automatically updated from the database.
It’s certainly possible to get this behavior from PHP alone, but it’s interesting to see an HTML/JavaScript page that can access data from a database. Of course, some PHP is happening, but AJAX manages the process. Take a look at the code for multiPass.html to see what’s happening: