AJAX earned its share of stardom once industry giants like Google Maps, Zoho Writer and Y!Mail Beta started to actively implement AJAX into their services.

Though many webmasters out there are already using AJAX yet there is that section which is still unaware of its advantages.

This tutorial will help the latter part enjoy hands-on experience with AJAX and PHP. I won’t be using jargons yet I am assuming that you understand the basics of HTML, PHP and JavaScript.

What is AJAX?

Well, AJAX won’t be new for those who understand JavaScript. AJAX stands for Asynchronous JavaScript and XML. Using AJAX programmer can use JavaScript code to get content from server machine without re-loading the complete webpage. Now you know how Google Maps load on the fly without any page re-loads?

Server sends data to client in XML format and client uses JavaScript to parse XML in order to perform the designated task. AJAX can be seamlessly integrated with PHP, Python, ASP (.NET), JSP and almost every other server-side technology.

What is our goal?

We will create a small Availability Checker application for a restaurant. User will enter the number of customers and the application will return if a table is available for that much number of customers. Breaking down Availability Checker:

  • index.php will be responsible for displaying a field which consumes data from user and send the same to our business logic for processing.
  • myAJAX.php will receive data from index.php and process the same.
  • If the input number is within the availability range then we return “Table Available!” otherwise we return “We are full!” as output.
  • Lastly, please be aware that we won’t be processing XML anywhere throughout our code. We will dissect the usage of XML in some other tutorial.

Starting with index.html (instead of index.php)

<html>
<head>
<title>First ever Ajax application with PHP</title>
</head>
<body>
<form name="ajaxform" method="get" action="#">
Table for  <input type="text" name="number" id="number" value="" />?<br /><br />
<input type="submit" value=" Available? " />
</form>
</body>
</html>

Above code displays an empty text field with a submit button. Please note that I have left the action attribute blank for now.

Moving on to myAJAX.php

<?php

session_start(); // for starting a session

header("Content-type: text/plain");
// Setting HTTP header for plain text

$numbers= array( // this will be our list
'1',
'2',
'3',
'4'
);

if (in_array($_GET['number'], $numbers)) { // if condition satisfied

echo '1'; // results in true

}

else { // otherwise

echo '0'; // results in false

}
?>

myAJAX.php compares the input against a given set of numbers.

  • If the input numeral matches with any hardcoded number then it returns 1.
  • Otherwise, it returns 0.

The JavaScript!

<script language="JavaScript" type="text/javascript">
<!--
var ajaxVariable = false; // the variable which will make AJAX a possibility for our tutorial

function ajaxFunction(url) {

       ajaxVariable = false;

	try{
			// For latest web browsers like Chrome, Firefox, Safari
		ajaxVariable = new XMLHttpRequest();
	} catch (e){
		// In case of Internet Explorer 6 there are two ways of calling the object
		try{
			ajaxVariable = new ActiveXObject("Msxml2.XMLHTTP"); // the usual way
		} catch (e) {
			try{
				ajaxVariable = new ActiveXObject("Microsoft.XMLHTTP"); // creating ActiveX controls which will use older XML library
			} catch (e){
				// When no browser works
				alert("Get a working web browser, please!");
				return false;
			}
		}
	}

        ajaxVariable.onreadystatechange = ajaxReply; // whenever the ready state is changed

	ajaxVariable.open('GET', url, true); // opens a request to server

        ajaxVariable.send(null); // closes the request

		// Now, the code waits unless the ready state changes.
		// After every change ajaxReply() is executed

	return true;

    } // end function ajaxFunction

function ajaxReply() { // your code's logic goes here

	if (ajaxVariable.readyState == 4) { // 4 mean page loaded successfully

		if (ajaxVariable.status == 200) { // 200 mean all is OK

			if (ajaxVariable.responseText == '1') { // if the entry was in our range (1-4)

				alert('Table available!');

			}

			else { // otherwise

				alert('We are full!');

			}

		} // end if

		else { // if the status code is anything else (a rare case though)

			alert('Something weird occurred. HTTP error code ' + ajaxVariable.status.toString() + '.');
			return; // exit

		}

	} // end if

} // end function ajaxReply

//-->
</script>

AJAX must be initialized before being used in any part of the code. In case of latest browsers a built-in object called XMLHttpRequest is enough while for older versions, we require ActiveX control to perform the same. Although, initializing AJAX isn’t rocket science yet we won’t be discussing the same here. Another day, maybe!

After initializing ajaxVariable (from line 3 to line 25), the code checks for change in ready state of ajaxVariable. A change in ready state means a reply was received from server which kick starts the actual business logic (from line 49 to line 68).

It is time to append the above JavaScript code in your index.html (and rename index.html to index.php just to follow the convention). Remember that JavaScript goes above the <head> tag. Lastly, a minor change in <form> tag will be required so that myAJAX.php is called once the submit button is clicked.

<form name="ajaxform" method="get" action="javascript:;" onsubmit="ajaxFunction('myAJAX.php?number=' + document.getElementById('number').value);">
Table for  <input type="text" name="number" id="number" value="" />?<br /><br />
<input type="submit" value=" Available? " />

Test the Availability Checker application live and let us know about your experiments with AJAX.

  • Nicely written! I look forward to the subsequent article. Thanks!

    • Thanks! I want to do something useful in the second part of this series. Give me time and you will have something worth a bookmark 🙂

  • Cool article for getting hands dirty. Next article showing how to use jQuery, and cut the JS to one or two lines? 😉

    • Ahh!! Let me complete the second part of this series and then I will surely work on this idea IF my thought provoking brain helps me dish out something interesting 😉

  • I am trying to complete the second part of this series as soon as possible.

  • Rashid Omar

    The formatting of your code examples is very poor.

Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns