• Choose a category
• All
• Classic-Fiction

$(“#output”).load(“showHero.php”, {“heroID”: heroID});

} // end showHero

If the user has selected a hero, you have the hero’s heroID as the value of the select object. You can use this data to bundle a request to a PHP program. That program uses the heroID to build a query and return data about the requested hero:

1. Extract the heroID from the select element.

You’re building a JSON object which will act as a virtual form, so you need access to all the data you want to send to the server. The only information the PHP program needs is a heroID, so use the jQuery val() method to extract the value from the select element.

2. Use the load() method to update the output element.

Once again, use the exceptionally handy load() method to invoke an AJAX request. This time, load the results of showHero.php.

3. Pass form data to the server.

The showHero.php program thinks it’s getting information from a form. In AJAX, the easiest way to simulate a form is to put all the data that would have been in the form in a JSON object. In this case, only one data element needs to be passed: {“heroID”: heroID}. This sends a field called heroID that contains the contents of the JavaScript variable heroID. See Book IV, Chapter 4 if you need a refresher on the JSON format.

The virtual form technique is a common AJAX idiom. It’s important because it overcomes a serious usability limitation of ordinary HTML. In old-school programming, the primary way to invoke a server-side program was through an HTML form submission. With AJAX, you can respond to any JavaScript event (like the onchange event used in this example) and use JavaScript code to create any kind of fake form you want. You can use variables that come from one or more forms, or you can send data from JavaScript variables. AJAX lets you use JavaScript to control precisely what data gets sent to the server and when that data gets sent. This improves the user experience (as in this example). It’s also commonly used to allow form validation in JavaScript before passing the data to the server.

Writing the showHero.php script

The showHero.php script is a simple PHP program that has a single task: After being given a heroID, pass a query to the database based on that key, and return an HTML snippet based on the query. The code is a standard database access script:

//get heroID

$heroID = $_REQUEST[‘heroID’];

//connect to db

$heroID = mysql_real_escape_string($heroID);

$db = mysql_connect(“localhost”, “userName”, “password”) or die(mysql_error);

mysql_select_db(“xfd”);

//extract query

$query = “SELECT * FROM hero WHERE heroID = $heroID”;

$result = mysql_query($query);

while ($row = mysql_fetch_assoc($result)){

foreach ($row as $name => $value){

print “$name: $value
”;

}

} // end while

?>

As far as the showQuery.php program is concerned, it got a request from an ordinary form. Its job is to produce HTML output based on that input:

1. Get the $heroID value from the form.

Use the standard $_REQUEST mechanism to extract data from the form. (It doesn’t matter to the PHP program that this isn’t a normal form.)

2. Sanitize the $heroID variable.

Any form variable that can be used in an SQL query should be sanitized to prevent SQL injection attacks. See Book V, Chapter 7 for more information on the use of mysql_real_escape_string().

3. Build an SQL query.

You only want data from the hero identified by $heroID, so build a query that selects a single record.

4. Print each field name and value.

Of course, you can make more sophisticated output, but it’s best to start with something simple and clean.

Working with XML Data

Server-side work normally involves storage of data, because that’s one thing that’s easy to do on the server and difficult to do on the client. Data can be stored in many ways:

♦ In plain-text files

♦ In HTML

♦ In XHTML

♦ In XML

♦ In a relational database

The database approach is most common because it’s incredibly powerful and flexible. Normally