We usually implement AJAX whenever we need to insert or fetch data from the server-side database tables, thus improving performance.
Let's say we want to display detailed book information whose ISBN number has been entered by the user. This data is already stored in the books server-side database table.
We'll need two things to fetch the data:
- A function to invoke AJAX method
- A server side PHP script
Invoking the AJAX Method
To implement AJAX, we need to invoke the
ajax() method, and we will do so by creating a function called
showdetails. The user-entered ISBN number is passed to
showdetails as a parameter. The code of
showdetails is shown in Listing 1.
Listing 1. Invoking the ajax() Method
ajax() method loads a remote page via an HTTP request, and also creates and returns the
XMLHttpRequest object required to talk to the server asynchronously. The
ajax() method takes one argument, an object of key/value pairs, which is used to initialize and handle the request. The
ajax() method syntax is:
.ajax( object of key/value pairs )
A brief description of key/value pairs frequently used in the
ajax() method are shown in Table 1.
Table 1. Key Value Pairs Used in the ajax() Method
string that defines the HTTP method we used for the request—
POST. The default is
string containing the URL of the server script file to which we want to send the request.
A map or
string we want sent to the server script along with the request. The script will then process the sent data.
To create the data map, we retrieve the user-entered information and assign it to variables in the following format:
Here's a snippet of how the data map is used:
We assume the Form on our web page contains two input fields,
subcategory. The information entered into the two fields is retrieved and stored in variables
subcat respectively. Thereafter, the data map is created by using these two variables.
We can also assign all the variable=value pairs to a variable and then use it to make our data map, as shown below:
If this data variable exists, it is sent to the server to be assigned to the specified script file, which performs its function and generates a response. We can skip the data variable if we don't want any information passed to the script.
||A callback function executed if the request sent to the script succeeds. The returned response from the server script is assigned to this callback function's parameter.
The steps involved in Listing 1 are as follows:
- The code in the
showdetails function invokes the request via the
ajax(), we specify that the request method we will use is
POST and the name of the server-side script file that will be executed is getdetails.php.
- <![endif]>We create a data
string to be passed to the PHP script consisting of an
isbn variable set to the value of the
isbn passed to the function.
data string, in turn, passes the
isbn number to the script file, getdetails.php.
- This script fetches the corresponding ISBN information from the
books table and generates the appropriate output. The
success call back function will execute if the request passed to the script succeeds. The output of the script will be assigned to the callback function's
- The contents of the
html parameter is then appended to the
bookdetails div element for displaying result. We assume that there exists a
id bookdetails nested inside the
- The statement,
jQT.goTo('#bookdetailsdisplay', 'slide'); navigates to the
bookdetailsdisplay panel with a slide animation to display the response generated by the getdetails.php script.
- Finally, we return a value of
false to the
showdetails function to suppress the default browser click behavior. We explain this code in more detail below.
Let's assume that
showdetails is invoked by a click event on the button created here:
<a class="whiteButton" href="#"
A button, called Show Details, is created by assigning a
whiteButton to the hyperlink. When clicked, this button invokes the
showdetails function with a parameter '11111-1111-1111' that has been passed to it. We want to suppress the default browser click behavior, so, we return
false from the
The Server side PHP Script
The server-side PHP script is the core of the fetch process. The script file getdetails.php reads the
isbn number passed to it via
data and will use this value to fetch the detailed book information from the
books table. The script will generate the output for display in the panel. The code of getdetails.php is shown in listing 2.
Listing 2. getdetails.php
$connect=mysql_connect("localhost","root", "mce") or die ("Please check your server
$query="Select isbn, title, author1, author2, author3, publisher,
publish_date_edition, price, image, description from books where isbn ='$isbn'";
$results =mysql_query($query) or die (mysql_query());
echo '<fieldset style="background-color:white; color:black;">';
echo '<img src=' . $image .'>';
echo '<h3>' . $title . ' by </h3>';
echo '<h4>' . $author1 . '</h4>';
echo '<h4>' . $author2 . '</h4>';
echo '<h4>' . $author3 . '</h4>';
echo '<label>Publisher :</label><h4>' . $publisher . '</h4>';
echo '<h4>' . $publish_date_edition . '</h4>';
echo '<label>Price: </label>';
echo '<em>' . $price . '</em><br/>';
echo '<label>Book Details :</label><h4>' . $description . '</h4>';
We can see that the above code of the script does the following:
- Retrieves the value of
isbn from the
$_POST array and stores it in variable
- Establishes a connection to the MySQL server using
root as the user and
mce as the password.
- Selects the shopping database to make it active.
- Writes a query to fetch the information for the book having the supplied ISBN number.
- Executes the query and receives the result in a
- Retrieves a row from
$result and stores it into a
- Extracts the
$row containing the retrieved row fields.
- Displays the information in the
$row's fields in a fieldset.
Remember that the detailed information displayed by this PHP script will be returned to the success callback function's
html parameter (see Listing 1). The detailed book information assigned to the
html parameter is then appended to the
bookdetails div element for display.
For more information, refer to my book: "Beginning Web Development for Smartphones: Developing Web Applications with PHP, MySQL and jQTouch" available at Amazon.
- 24th September, 2010: Initial version
B.M.Harwani is founder and owner of Microchip Computer Education (MCE), based in Ajmer, India that provides computer education in all programming and web developing platforms. He graduated with a BE in computer engineering from the University of Pune, and also has a 'C' Level (master's diploma in computer technology) from DOEACC, Government Of India. Being involved in teaching field for over 16 years, he has developed the art of explaining even the most complicated topics in a straight forward and easily understandable fashion. He has written several books on various subjects that includes JSP, JSF, EJB, PHP, .Net, Joomla, jQuery and Smartphones. To know more, visit http://bmharwani.com/blog