Recent Comments
AJAX Example Programs
To understand how AJAX works, we will just examine these AJAX examples programs.
1.AJAX sample program to see the contents of a text file
2.Fetching data with Ajax
3.XML in ACTION : AJAX Sample Program
4.AJAX PHP Form Validation
5.Sample program demonstrating AJAX
6.Using two XMLHttpRequest objects - Sample AJAX Code
7.Buy a television by dragging it to the shopping cart - AJAX Sample Program
8.Fetching data with Ajax - Sample AJAX Program
9.Using Ajax and XML - AJAX Sample Program
10.Using Ajax and XML 2 - Sample AJAX Program
11.Using Ajax and XML 3 - Sample Ajax Code
12.Reading header information - AJAX Sample Program
13.Downloading images with Ajax - Sample Ajax Code
14.Fetching data with Ajax 1 - Sample AJAX Code
15.Fetching data with Ajax 2 - Sample AJAX Codes
16.Fetching data with Ajax and ASP, PHP - AJAX Sample Program
17.Creating Ajax-enabled menus - Sample AJAX Code
18.Using multiple XMLHttpRequest objects - AJAX Sample Programs
19.Buy a television by dragging it to the shopping cart | Ajax Drag and Drop
AJAX Form Validation - Learn step by step final part
12. The class that supports the validation functionality is called Validate, and it is hosted in a script file called validate.class.php, which looks like this:
<?php
// load error handler and database configuration
require_once ('config.php');
// Class supports
class Validate
{
// stored database connection
private $mMysqli;
// constructor opens database connection
function __construct()
{
$this->mMysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
}
// destructor closes database connection
function __destruct()
{
$this->mMysqli->close();
}
// supports
public function ValidateAJAX($inputValue, $fieldID)
{
// check which field is being validated and perform validation
switch($fieldID)
{
// Check if the username is valid
case 'txtUsername':
return $this->validateUserName($inputValue);
break;
// Check if the name is valid
case 'txtName':
return $this->validateName($inputValue);
break;
// Check if a gender was selected
case 'selGender':
return $this->validateGender($inputValue);
break;
// Check if birth month is valid
case 'selBthMonth':
return $this->validateBirthMonth($inputValue);
break;
// Check if birth day is valid
case 'txtBthDay':
return $this->validateBirthDay($inputValue);
break;
// Check if birth year is valid
case 'txtBthYear':
return $this->validateBirthYear($inputValue);
break;
// Check if email is valid
case 'txtEmail':
return $this->validateEmail($inputValue);
break;
// Check if phone is valid
case 'txtPhone':
return $this->validatePhone($inputValue);
break;
// Check if "I have read the terms" checkbox has been checked
case 'chkReadTerms':
return $this->validateReadTerms($inputValue);
break;
}
}
// validates all form fields on form submit
public function ValidatePHP()
{
// error flag, becomes 1 when errors are found.
$errorsExist = 0;
// clears the errors session flag
if (isset($_SESSION['errors']))
unset($_SESSION['errors']);
// By default all fields are considered valid
$_SESSION['errors']['txtUsername'] = 'hidden';
$_SESSION['errors']['txtName'] = 'hidden';
$_SESSION['errors']['selGender'] = 'hidden';
$_SESSION['errors']['selBthMonth'] = 'hidden';
$_SESSION['errors']['txtBthDay'] = 'hidden';
$_SESSION['errors']['txtBthYear'] = 'hidden';
$_SESSION['errors']['txtEmail'] = 'hidden';
$_SESSION['errors']['txtPhone'] = 'hidden';
$_SESSION['errors']['chkReadTerms'] = 'hidden';
// Validate username
if (!$this->validateUserName($_POST['txtUsername']))
{
$_SESSION['errors']['txtUsername'] = 'error';
$errorsExist = 1;
}
// Validate name
if (!$this->validateName($_POST['txtName']))
{
$_SESSION['errors']['txtName'] = 'error';
$errorsExist = 1;
}
// Validate gender
if (!$this->validateGender($_POST['selGender']))
{
$_SESSION['errors']['selGender'] = 'error';
$errorsExist = 1;
}
// Validate birth month
if (!$this->validateBirthMonth($_POST['selBthMonth']))
{
$_SESSION['errors']['selBthMonth'] = 'error';
$errorsExist = 1;
}
// Validate birth day
if (!$this->validateBirthDay($_POST['txtBthDay']))
{
$_SESSION['errors']['txtBthDay'] = 'error';
$errorsExist = 1;
}
// Validate birth year and date
if (!$this->validateBirthYear($_POST['selBthMonth'] . '#' .
$_POST['txtBthDay'] . '#' .
$_POST['txtBthYear']))
{
$_SESSION['errors']['txtBthYear'] = 'error';
$errorsExist = 1;
}
// Validate email
if (!$this->validateEmail($_POST['txtEmail']))
{
$_SESSION['errors']['txtEmail'] = 'error';
$errorsExist = 1;
}
// Validate phone
if (!$this->validatePhone($_POST['txtPhone']))
{
$_SESSION['errors']['txtPhone'] = 'error';
$errorsExist = 1;
}
// Validate read terms
if (!isset($_POST['chkReadTerms']) ||
!$this->validateReadTerms($_POST['chkReadTerms']))
{
$_SESSION['errors']['chkReadTerms'] = 'error';
$_SESSION['values']['chkReadTerms'] = '';
$errorsExist = 1;
}
// If no errors are found, point to a successful validation page
if ($errorsExist == 0)
{
return 'allok.php';
}
else
{
// If errors are found, save current user input
foreach ($_POST as $key => $value)
{
$_SESSION['values'][$key] = $_POST[$key];
}
return 'index.php';
}
}
// validate user name (must be empty, and must not be already registered)
private function validateUserName($value)
{
// trim and escape input value
$value = $this->mMysqli->real_escape_string(trim($value));
// empty user name is not valid
if ($value == null)
return 0; // not valid
// check if the username exists in the database
$query = $this->mMysqli->query('SELECT user_name FROM users ' .
'WHERE user_name="' . $value . '"');
if ($this->mMysqli->affected_rows > 0)
return '0'; // not valid
else
return '1'; // valid
}
// validate name
private function validateName($value)
{
// trim and escape input value
$value = trim($value);
// empty user name is not valid
if ($value)
return 1; // valid
else
return 0; // not valid
}
// validate gender
private function validateGender($value)
{
// user must have a gender
return ($value == '0') ? 0 : 1;
}
// validate birth month
private function validateBirthMonth($value)
{
// month must be non-null, and between 1 and 12
return ($value == '' || $value > 12 || $value < 1) ? 0 : 1;
}
// validate birth day
private function validateBirthDay($value)
{
// day must be non-null, and between 1 and 31
return ($value == '' || $value > 31 || $value < 1) ? 0 : 1;
}
// validate birth year and the whole date
private function validateBirthYear($value)
{
// valid birth year is between 1900 and 2000
// get whole date (mm#dd#yyyy)
$date = explode('#', $value);
// date can't be valid if there is no day, month, or year
if (!$date[0]) return 0;
if (!$date[1] || !is_numeric($date[1])) return 0;
if (!$date[2] || !is_numeric($date[2])) return 0;
// check the date
return (checkdate($date[0], $date[1], $date[2])) ? 1 : 0;
}
// validate email
private function validateEmail($value)
{
// valid email formats: *@*.*, *@*.*.*, *.*@*.*, *.*@*.*.*)
return (!eregi('^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$', $value)) ? 0 : 1;
}
// validate phone
private function validatePhone($value)
{
// valid phone format: ###-###-####
return (!eregi('^[0-9]{3}-*[0-9]{3}-*[0-9]{4}$', $value)) ? 0 : 1;
}
// check the user has read the terms of use
private function validateReadTerms($value)
{
// valid value is 'true'
return ($value == 'true' || $value == 'on') ? 1 : 0;
}
}
?>
13. Test your script by loading http://localhost/ajax/validate/index.php in a web browser.
AJAX Form Validation - Learn step by step PART - 5
9. It's time to add the business logic now. Start by creating config.php, with this code in it:
<?php
// defines database connection data
define('DB_HOST', 'localhost');
define('DB_USER', 'ajaxuser');
define('DB_PASSWORD', 'practical');
define('DB_DATABASE', '
?>
10. Now create the error handler code in a file named error_handler.php:
<?php
// set the user error handler method to be error_handler
set_error_handler('error_handler', E_ALL);
// error handler function
function error_handler($errNo, $errStr, $errFile, $errLine)
{
// clear any output that has already been generated
if(ob_get_length()) ob_clean();
// output the error message
$error_message = 'ERRNO: ' . $errNo . chr(10) .
'TEXT: ' . $errStr . chr(10) .
'LOCATION: ' . $errFile .
', line ' . $errLine;
echo $error_message;
// prevent processing any more PHP scripts
exit;
}
?>
11. The PHP script that handles the client's
<?php
// start PHP session
session_start();
// load error handling script and validation class
require_once ('error_handler.php');
require_once ('validate.class.php');
// Create new validator object
$validator = new Validate();
// read validation type (PHP or
$validationType = '';
if (isset($_GET['validationType']))
{
$validationType = $_GET['validationType'];
}
//
if ($validationType == 'php')
{
// PHP validation is performed by the ValidatePHP method, which returns
// the page the visitor should be redirected to (which is allok.php if
// all the data is valid, or back to index.php if not)
header("Location:" . $validator->ValidatePHP());
}
else
{
//
// are used to form an XML document that is sent back to the client
$response =
'<?xml version="1.0" encoding="UTF-8" standalone="yes"?>' .
'<response>' .
'<result>' .
$validator->ValidateAJAX($_POST['inputValue'], $_POST['fieldID']) .
'</result>' .
'<fieldid>' .
$_POST['fieldID'] .
'</fieldid>' .
'</response>';
// generate the response
if(ob_get_length()) ob_clean();
header('Content-Type: text/xml');
echo $response;
}
?>
AJAX Form Validation - Learn step by step PART - 4
7. Create a new file named allok.php, and add the following code to it: <?php
// clear any data saved in the session
session_start();
session_destroy();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Form Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="validate.css" rel="stylesheet" type="text/css" />
</head>
<body>
Registration Successfull!<br />
<a href="index.php" title="Go back"><< Go back</a>
</body>
</html>
8. Create a file named validate.js. This file performs the client-side functionality, including the
// holds an instance of XMLHttpRequest
var xmlHttp = createXmlHttpRequestObject();
// holds the remote server address
var serverAddress = "validate.php";
// when set to true, display detailed error messages
var showErrors = true;
// initialize the validation requests cache
var cache = new Array();
// creates an XMLHttpRequest instance
function createXmlHttpRequestObject()
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// this should work for all browsers except IE6 and older
try
{
// try to create XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
// assume IE6 or older
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
// try every id until one works
for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
{
try
{
// try to create XMLHttpRequest object
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
}
catch (e) {} // ignore potential error
}
}
// return the created object or display an error message
if (!xmlHttp)
displayError("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
// function that displays an error message
function displayError($message)
{
// ignore errors if showErrors is false
if (showErrors)
{
// turn error displaying Off
showErrors = false;
// display error message
alert("Error encountered: \n" + $message);
// retry validation after 10 seconds
setTimeout("validate();", 10000);
}
}
// the function handles the validation for any form field
function validate(inputValue, fieldID)
{
// only continue if xmlHttp isn't void
if (xmlHttp)
{
// if we received non-null parameters, we add them to cache in the
// form of the query string to be sent to the server for validation
if (fieldID)
{
// encode values for safely adding them to an HTTP request query string
inputValue = encodeURIComponent(inputValue);
fieldID = encodeURIComponent(fieldID);
// add the values to the queue
cache.push("inputValue=" + inputValue + "&fieldID=" + fieldID);
}
// try to connect to the server
try
{
// continue only if the XMLHttpRequest object isn't busy
// and the cache is not empty
if ((xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
&& cache.length > 0)
{
// get a new set of parameters from the cache
var cacheEntry = cache.shift();
// make a server request to validate the extracted data
xmlHttp.open("POST", serverAddress, true);
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(cacheEntry);
}
}
catch (e)
{
// display an error when failing to connect to the server
displayError(e.toString());
}
}
}
// function that handles the HTTP response
function handleRequestStateChange()
{
// when readyState is 4, we read the server response
if (xmlHttp.readyState == 4)
{
// continue only if HTTP status is "OK"
if (xmlHttp.status == 200)
{
try
{
// read the response from the server
readResponse();
}
catch(e)
{
// display error message
displayError(e.toString());
}
}
else
{
// display error message
displayError(xmlHttp.statusText);
}
}
}
// read server's response
function readResponse()
{
// retrieve the server's response
var response = xmlHttp.responseText;
// server error?
if (response.indexOf("ERRNO") >= 0
|| response.indexOf("error:") >= 0
|| response.length == 0)
throw(response.length == 0 ? "Server error." : response);
// get response in XML format (assume the response is valid XML)
responseXml = xmlHttp.responseXML;
// get the document element
xmlDoc = responseXml.documentElement;
result = xmlDoc.getElementsByTagName("result")[0].firstChild.data;
fieldID = xmlDoc.getElementsByTagName("fieldid")[0].firstChild.data;
// find the HTML element that displays the error
message = document.getElementById(fieldID + "Failed");
// show the error or hide the error
message.className = (result == "0") ? "error" : "hidden";
// call validate() again, in case there are values left in the cache
setTimeout("validate();", 500);
}
// sets focus on the first field of the form
function setFocus()
{
document.getElementById("txtUsername").focus();
}
AJAX Form Validation - Learn step by step PART -3
6. Now create index.php, and add this code to it:
<?php
require_once ('index_top.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Practical AJAX: Form Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="validate.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="validate.js"></script>
</head>
<body onload="setFocus();">
<fieldset>
<legend class="txtFormLegend">New User Registration Form</legend>
<br />
<form name="frmRegistration" method="post"
action="validate.php?validationType=php">
<!-- Username -->
<label for="txtUsername">Desired username:</label>
<input id="txtUsername" name="txtUsername" type="text"
onblur="validate(this.value, this.id)"
value="<?php echo $_SESSION['values']['txtUsername'] ?>" />
<span id="txtUsernameFailed"
class="<?php echo $_SESSION['errors']['txtUsername'] ?>">
This username is in use, or empty username field.
</span>
<br />
<!-- Name -->
<label for="txtName">Your name:</label>
<input id="txtName" name="txtName" type="text"
onblur="validate(this.value, this.id)"
value="<?php echo $_SESSION['values']['txtName'] ?>" />
<span id="txtNameFailed"
class="<?php echo $_SESSION['errors']['txtName'] ?>">
Please enter your name.
</span>
<br />
<!-- Gender -->
<label for="selGender">Gender:</label>
<select name="selGender" id="selGender"
onblur="validate(this.value, this.id)">
<?php buildOptions($genderOptions,
$_SESSION['values']['selGender']); ?>
</select>
<span id="selGenderFailed"
class="<?php echo $_SESSION['errors']['selGender'] ?>">
Please select your gender.
</span>
<br />
<!-- Birthday -->
<label for="selBthMonth">Birthday:</label>
<!-- Month -->
<select name="selBthMonth" id="selBthMonth"
onblur="validate(this.value, this.id)">
<?php buildOptions($monthOptions,
$_SESSION['values']['selBthMonth']); ?>
</select>
-
<!-- Day -->
<input type="text" name="txtBthDay" id="txtBthDay" maxlength="2"
size="2"
onblur="validate(this.value, this.id)"
value="<?php echo $_SESSION['values']['txtBthDay'] ?>" />
-
<!-- Year -->
<input type="text" name="txtBthYear" id="txtBthYear" maxlength="4"
size="2" onblur="validate(document.getElementById('selBthMonth').options[document.getElementById('selBthMonth').selectedIndex].value + '#' + document.getElementById('txtBthDay').value + '#' + this.value, this.id)"
value="<?php echo $_SESSION['values']['txtBthYear'] ?>" />
<!-- Month, Day, Year validation -->
<span id="selBthMonthFailed"
class="<?php echo $_SESSION['errors']['selBthMonth'] ?>">
Please select your birth month.
</span>
<span id="txtBthDayFailed"
class="<?php echo $_SESSION['errors']['txtBthDay'] ?>">
Please enter your birth day.
</span>
<span id="txtBthYearFailed"
class="<?php echo $_SESSION['errors']['txtBthYear'] ?>">
Please enter a valid date.
</span>
<br />
<!-- Email -->
<label for="txtEmail">E-mail:</label>
<input id="txtEmail" name="txtEmail" type="text"
onblur="validate(this.value, this.id)"
value="<?php echo $_SESSION['values']['txtEmail'] ?>" />
<span id="txtEmailFailed"
class="<?php echo $_SESSION['errors']['txtEmail'] ?>">
Invalid e-mail address.
</span>
<br />
<!-- Phone number -->
<label for="txtPhone">Phone number:</label>
<input id="txtPhone" name="txtPhone" type="text"
onblur="validate(this.value, this.id)"
value="<?php echo $_SESSION['values']['txtPhone'] ?>" />
<span id="txtPhoneFailed"
class="<?php echo $_SESSION['errors']['txtPhone'] ?>">
Please insert a valid US phone number (xxx-xxx-xxxx).
</span>
<br />
<!-- Read terms checkbox -->
<input type="checkbox" id="chkReadTerms" name="chkReadTerms"
class="left"
onblur="validate(this.checked, this.id)"
<?php if ($_SESSION['values']['chkReadTerms'] == 'on')
echo 'checked="checked"' ?> />
I've read the Terms of Use
<span id="chkReadTermsFailed"
class="<?php echo $_SESSION['errors']['chkReadTerms'] ?>">
Please make sure you read the Terms of Use.
</span>
<!-- End of form -->
<hr />
<span class="txtSmall">Note: All fields are required.</span>
<br /><br />
<input type="submit" name="submitbutton" value="Register"
class="left button" />
</form>
</fieldset>
</body>
</html>
AJAX Form Validation - Learn step by step PART -2
5. Now create a new file named index_top.php, and add the following code. This script will be loaded from the main page index.php.
// enable PHP session
session_start();
// Build HTML
function buildOptions($options, $selectedOption)
{
foreach ($options as $value => $text)
{
if ($value == $selectedOption)
{
echo '
'" selected="selected">' . $text . '';
}
else
{
echo '';
}
}
}
// initialize gender options array
$genderOptions = array("0" => "[Select]",
"1" => "Male",
"2" => "Female");
// initialize month options array
$monthOptions = array("0" => "[Select]",
"1" => "January",
"2" => "February",
"3" => "March",
"4" => "April",
"5" => "May",
"6" => "June",
"7" => "July",
"8" => "August",
"9" => "September",
"10" => "October",
"11" => "November",
"12" => "December");
// initialize some session variables to prevent PHP throwing Notices
if (!isset($_SESSION['values']))
{
$_SESSION['values']['txtUsername'] = '';
$_SESSION['values']['txtName'] = '';
$_SESSION['values']['selGender'] = '';
$_SESSION['values']['selBthMonth'] = '';
$_SESSION['values']['txtBthDay'] = '';
$_SESSION['values']['txtBthYear'] = '';
$_SESSION['values']['txtEmail'] = '';
$_SESSION['values']['txtPhone'] = '';
$_SESSION['values']['chkReadTerms'] = '';
}
if (!isset($_SESSION['errors']))
{
$_SESSION['errors']['txtUsername'] = 'hidden';
$_SESSION['errors']['txtName'] = 'hidden';
$_SESSION['errors']['selGender'] = 'hidden';
$_SESSION['errors']['selBthMonth'] = 'hidden';
$_SESSION['errors']['txtBthDay'] = 'hidden';
$_SESSION['errors']['txtBthYear'] = 'hidden';
$_SESSION['errors']['txtEmail'] = 'hidden';
$_SESSION['errors']['txtPhone'] = 'hidden';
$_SESSION['errors']['chkReadTerms'] = 'hidden';
}
?>