Invinciblebrain.com

In this article I will try to summarize the basics of Ajax and PHP communication. At the and you can find a full working Ajax – PHP example.

Before the explanation of the doWork() function we first need to learn a more important thing. To make a communication between the client and the server the client code needs to create a so called XMLHttpRequest object. This object will be responsible for AJAX PHP communication.

However creating this object is bit triky as the browser implement it various ways. If you don’t want to support the quite old browsers we can do it as follows:

// Get the HTTP Objectfunction getHTTPObject(){ if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) return new XMLHttpRequest(); else { alert("Your browser does not support AJAX."); return null; }}


Ok, now we have the XMLHttpRequest object, so it’s time to implement the business logic inside the doWork() function.

First of all we need to get a valid XMLHttpRequest object. If we have it then we can send the value of the inputText field to the server script. We do this by composing an URL with parameter, so in the PHP script we can use the $_GET super-global array to catch the data. As next step we call the send() function of the XMLHttpRequest object which will send our request to the server. At the moment our doWork() function looks like this:

// Implement business logic function doWork(){ httpObject = getHTTPObject(); if (httpObject != null) { httpObject.open("GET", "upperCase.php?inputText=" +document.getElementById('inputText').value, true); httpObject.send(null); }}


It’s nice but how we can catch the response from the server? To do this we need to use an other special property of the XMLHttpRequest object. We can assign a function to this parameter and this function will be called if the state of the object was changed. The final code is the following:

// Implement business logic function doWork(){ httpObject = getHTTPObject(); if (httpObject != null) { httpObject.open("GET", "upperCase.php?inputText=" +document.getElementById('inputText').value, true); httpObject.send(null); httpObject.onreadystatechange = setOutput; }}
The last step on client side is to implement the setOutput() function which will change the value of our second field. The only interesting thing in this function that we need to check the actual state of the XMLHttpRequest object. We need to change the field value only if the state is complete. The readyState property can have the following values:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
So the setOutput() looks like this:

// Change the value of the outputText fieldfunction setOutput(){ if(httpObject.readyState == 4){ document.getElementById('outputText').value = httpObject.responseText; } }