AJAX is a method of making a web page more application like. It allows server interaction without having to reload the web page. It uses a combination of server-side scripting (in this example PHP), and client-side JavaScript and the XMLHttpRequest object. This is not an AJAX tutorial, but if you have done some homework in advance, the best way to learn a new technique is with a working example. Name the html page ajax.htm and name the PHP script ajax.php. The only change you need to make is the domain name in the html page (currently example.com). Load the html page in your browser, enter the input and click anywhere else on the page.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>AJAX Example</title>
<style type="text/css">
span.hidden {
display: none;
}
span.display {
display: inline;
color: red;
}
</style>
<script type="text/javascript">
// ajax processing - this is a generic function to process the server response
function processReqChange() {
if (req.readyState == 4) // only if req shows "complete"
if (req.status == 200) { // then only if req shows "OK"
response = req.responseXML.documentElement;
method = response.getElementsByTagName('method')[0].firstChild.data;
result = response.getElementsByTagName('result')[0].firstChild.data;
eval(method + '(result)');
} else
alert("There was a problem retrieving the XML data:\n" + req.statusText);
}
// ajax processing - this is a generic function to access the server script
function loadXML(url) {
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
// ajax processing - accepts input for the name variable
function nameInput(input) {
document.getElementById('nameCheckValid').className = 'hidden';
document.getElementById('nameCheckFailed').className = 'hidden';
if (input == '') document.getElementById('name').value = document.getElementById('name').defaultValue; // reset value if empty
else loadXML('http://example.com/ajax.php?name=' + input); // ensure proper domain/script name
}
// ajax processing - processes the server response for the name variable
function nameResponse(response) {
if (response == '1')
document.getElementById('nameCheckValid').className = 'display';
else
document.getElementById('nameCheckFailed').className = 'display';
}
function focusInput(el) {
if (document.getElementById(el).defaultValue==document.getElementById(el).value) document.getElementById(el).value = "";
}
</script>
</head>
<body>
<div>
<input type="text" id="name" onfocus="focusInput(this.id)" onblur="nameInput(this.value)" value="Enter Name" />
<span class="hidden" id="nameCheckFailed">Invalid name</span>
<span class="hidden" id="nameCheckValid">Valid name</span>
</div>
</body>
</html>
Code: Select all
<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" ?>';
// this script can do database validation, database updates, or what ever is needed
if (strtolower($_GET['name']) == "fred") $result = 1; else $result = 0;
?>
<response>
<method>nameResponse</method>
<result><?php echo $result; ?></result>
</response>