Ajax PHP tutorial - Sending data to PHP with Ajax

Home - Tutorials - AJAX basic tutorials

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.

Tutorial info:

Bookmark Ajax PHP tutorial

Step 2 - Sending data to PHP with Ajax

Ajax PHP tutorial

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:

Code: 
// Get the HTTP Object
function 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;
   }
}
Javascript F1

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:

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

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:

Code: 
// 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;
    }
}
Javascript F1

• 0 = uninitialized
• 1 = loading
• 2 = loaded
• 3 = interactive
• 4 = complete

So the setOutput() looks like this:

Code: 
// Change the value of the outputText field
function setOutput(){
    if(httpObject.readyState == 4){
        document.getElementById('outputText').value 
            = httpObject.responseText;
    }
 
}
Javascript F1

Now the client side is ready let's implement the server side.

Tags: ajax php tutorial, ajax php examples, ajax php, ajax, php, example