HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [313]
In This Chapter
Understanding the advantages of server-side programming
Getting to know PHP
Writing a form for standard PHP processing
Building virtual forms with AJAX
Submitting interactive AJAX requests
Working with XML data
Responding to JSON data
AJAX and jQuery are incredibly useful, but perhaps the most important use of AJAX is to serve as a conduit between the Web page and programs written on the server. In this chapter, you get an overview of how programming works on the Web server and how AJAX changes the relationship between client-side and server-side programming. You read about the main forms of data sent from the server, and you see how to interpret this data with jQuery and JavaScript.
Sending Requests AJAX Style
AJAX work in other parts of this book involves importing a preformatted HTML file. That’s a great use of AJAX, but the really exciting aspect of AJAX is how it tightens the relationship between the client and server. Figure 6-1 shows a page called AJAXtest.html, which uses a JavaScript function to call a PHP program and incorporates the results into the same page.
Figure 6-1: This page gets data from PHP with no form!
Sending the data
The AJAX version of this program is interesting because it has no form. Normally an HTML page that makes a request of a PHP document has a form, and the form requests the PHP page. This page has no form, but a JavaScript function creates a “virtual form” and passes this form data to a PHP page. Normally the result of a PHP program is a completely new page, but in this example the results of the PHP program are integrated directly onto the original HTML page. Begin by looking over the HTML/JavaScript code:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
AJAX Test
This is the default output
This program uses a jQuery function to simulate a form. It generates its own virtual form and passes it directly to the PHP program. The PHP program then processes the form data and produces text results, which are available for JavaScript to handle directly. In essence, JavaScript and jQuery are directly managing the server request (rather than allowing the browser to do it automatically) so that the programmer has more control over the process.
Here’s how it works:
1. Begin with an XHTML framework.
As always, XHTML forms the spine of any Web program. The XHTML here is quite simple — a heading and a div for output. Note that this example does not include a form.
2. Include the jQuery library.
You can do AJAX without jQuery, but you don’t have much reason to do that. The jQuery library makes life much easier and manages cross-browser issues to boot. You can also incorporate the jQuery UI and a theme if you choose, but they aren’t absolutely necessary.
3. Initialize as usual.
As soon as this program runs, it’s going to get data from the server. (In the next example, I show you how to make this process more interactive.) Set up an init() function in the normal way to handle immediate execution after the page has loaded.
4. Use the .get() function to set up an AJAX call.
jQuery has a number of interesting AJAX functions. The .ajax function is a very powerful tool for managing all kinds of AJAX requests, but jQuery also includes a number of utility functions that simplify particular kinds of requests. The get() function used here sets up a request that looks to the