Introduction to PHP and Ajax

As a web developer, you may have asked yourself whether it was possible to update information from the server without having to refresh a page or use a heavy applet such as Flash or Java. As you may have seen with weather information widgets and stock tickers, not only is it possible–it’s relatively easy when the solution is AJAX.

AJAX (Asynchronous Javascript And XML) is a collection of technologies which allow a script to communicate with a server in real time. There is a lot of history behind it, almost all of which is beyond the scope of this article, but I??d like to start this series by introducing you to the power of AJAX.

The most important thing to remember about AJAX is that it is server independent, which means you can use any server side language you please. For these examples we will use PHP; and if you have mastered basic JavaScript, you can start immediately.

The client side of AJAX is usually done with JavaScript, creating an instance of an “XMLHttpRequest” object. This is the internal object interface which will help us send and receive data from the server.

<script type="text/javascript">
 var xmlHttp;		
//This is the globally accessible xmlHttpRequest variable.

function createXMLHttpRequest()
{
	if (window.ActiveXObject)	
//If this is IE, or uses ActiveX, create an ActiveXObject
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)	
//Otherwise create an XMLHttpRequest object
{
	xmlHttp = new XMLHttpRequest();
}
}

Now that you have your xmlHttp object, and its initialization function, let’s create a basic request string to send to the server. For context, let’s imagine that we’re polling the server for weather information using a city name and its respective zip code.

function createQueryString()
{
var querystring = "myserver.com/myfolder/myfile.php?city=Beverly%20Hills&zip=90210";	//Create a simple query string, I??ll 
      //leave more complicated examples
	//as an exercise for later.
	return querystring;
}

We now have an xmlHttp object and a query for our server, let’s now send the request using the GET method and setup a callback function to handle the response from the server.

function doGETRequest()
{
	createXMLHttpRequest();	
// Set up our xmlHttp object
	var query = createQueryString();	
//create our query string
	xmlHttp.onreadystatechange = handleStateChange;	
//set our callback handler
	xmlHttp.open("GET", querystring, true);	
//open the connection
	xmlHttp.send(query);	
//Send our query to the server
}

function handleStateChange()	
//This is a callback function that gets notified 
//when server updates its response info. 
{
	if (xmlHttp.readyState == 4)	
//a readyState of 4 means the response has been received
	{
		if (xmlHttp.status == 200)	
//a status of 200 means everything went smoothly 
//with the server (not necessarily the script though!)
		{
			parseResults();	
//call the function that parses and handles our results
		}
	}
}

function parseResults()
{
	alert(xmlHttp.responseText); 
//The most simple method of handling the output.
}
</script>

This is a very simple example, but the important thing is that you know how to create and use an xmlHttp object. You may be wondering, what needs to happen on the server? Well, the easiest way to explain it is that the JavaScript code is making a form request, GET in this example, so you handle it in the same way you would a form submission. Keeping up with our example: