AJAX (Asynchronous JavaScript and XML) uses a combination of JavaScript, XHTML/XML, and DHTML techniques to create dynamic web pages that can update without reloading. The technique is based on the use of the JavaScript XMLHttpRequest() function to perform GET and POST operations with a server script, with additional client side DHTML code to modify the requested page elements.

In this example the entire process is handled with three client side JavaScript functions and one server side script. One function to setup the request and response handler. One to encode the query string and one to update the page data with the results.

function xmlhttppost(strURL) { }
function getquerystring() { }
function updatepage(str) { }

An HTML page contains a JavaScript AJAX handler that updates the page contents. When the form containing a user name is submitted, a server side script named test-ajax-1.php is called. The server script responds, and the user’s email address is displayed.

<script language="JavaScript">
function xmlHttpFunction(URL) {

	var xmlHttpReq;

	// create an XMLHttpRequest object
	if (window.XMLHttpRequest) {
		xmlHttpReq = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) {
		xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else {
		alert("Your browser does not support Ajax.");
		return false;
	}

	// setup a function to handle the response
	xmlHttpReq.onreadystatechange = function() {
		if (xmlHttpReq == 4) {
			updatepage(xmlHttpReq.responseText);
		}
	}

	// encode the query string and post request
	xmlHttpReq.open('POST', URL, true);
	xmlHttpReq.setRequestHeader('Content-Type',
		'application/x-www-form-urlencoded');
	xmlHttpReq.send(getquerystring());
}

function getquerystring() {
	var theForm = document.forms['theForm']'
	var theText = form.username.value;
	str = 'user=' + escape(theText);
	return str;
}

function updatepage(str) {
	document.getElementById("usermail").innerHTML = str;
}
</script>

The page with the JavaScript also contains this simple form:

<form name="theForm">
<p>
Name: <input type="text" name="username" />
<input value="Submit" type="button"
	onclick='JavaScript:xmlHttpFunction("test-ajax-1.php")'>
</p>
Email: 
</form>

The client side program is a simple PHP script. Normally the script would check the values sent by the form POST then perform some action to determine the result and send those results back to the calling page. This might entail performing and database query and formatting the results. In this example the action simply checks to see if the user’s name is Robert, and returns an email address. Any other name results in the response *unknown*.

<?php
	// test-ajax-1.php
	$user = $_POST['user'];
	if ($user == 'Robert') {
		echo "rob@simcodes.com";
	} else {
		echo "* $user unknown *";
	}
?>

AJAX is a powerful technique for developing dynamic web pages. This article touches on the simplicity of the underlying mechanism used by the browser. The possibility for developing sophisticated applications that use web services is another possibility. JavaScript libraries like Prototype and MooTools have become popular for handling the DHTML on the client side. Simple data exchange standards like JSON make it easy to send complex data structures using AJAX, without using a full blown Web Services mechanism like SOAP.

The simplicity of AJAX ensures that it is here to stay for the foreseeable future. AJAX is more than a fad for creating fancy web pages. AJAX is a viable alternative to heavyweight SOA schemes, and will continue to shape how we use the internet for both work and pleasure.

References

W3Schools Ajax Tutorial
http://www.w3schools.com/ajax/default.asp

Tags: AJAX, JavaScript, Programming