Ajax and PHP

PHP and Ajax are combined by webmasters to make Web applications as complete as desktop applications.

Ajax allows you to create an interface that runs on a browser with JavaScript, now extremely fast on the latest versions of browsers.

PHP runs on the server and it consults a database and automatically update it with data entered through the interface and it executes processing requested by the user, requiring data stored on the server.

Interaction between Ajax and PHP

How to make the interaction between the interface in Ajax and PHP scripts on the server?

The Ajax tutorial provides the basics, including the demonstration of the POST command to send data to a PHP script that writes them into a file on the server.

Using GET

There was no difference with the Ajax code to load a file, except that the filename is a script with the PHP extension rather than a simple text file.

And in this case, the variable responseText will not be assigned with the file, but with what the PHP script displays.

For example, if the PHP script holds this command:

<?php
   echo "Hello!";
?>

responseText will hold: Hello!

The JavaScript code will be:

function submitForm()
{ 
   var req = createInstance();
   req.onreadystatechange = function()
   { 
      if(req.readyState == 4)
      {
         if(req.status == 200)
         {
            alert(req.responseText);	
         }	
         else	
         {
            alert("Error: returned status code " + req.status + " " + req.statusText);
         }	
      } 
   }; 
   req.open("GET", "ajax-get.php", true); 
   req.send(null); 
   } 

• See the GET et PHP demonstration.
  Display the source of the page to see the complete JavaScript code.

Using POST

The Ajax code is very simple.

A string is built from the data:

var data = "var1=" + value1 +  "&var2=" + value2;

And it is sent to the server using the XMLHttpRequest object:

xhr.open("POST", "script.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
xhr.send(data);

Data taken from a form in the HTML interface, are sent to the server by the send() method of the XMLHttpRequest object, and a PHP program, named script.php for example, receives them as parameters and performs some processing for which it is programmed.

The PHP code might look like this:

$myarray = &$_POST ; 
$var1=$myarray["var1"];
$var2=$myarray["var2"];
... processing...

Values value1 and value2 sent by the JavaScript interface are assigned to the PHP variables $var1 and $var2.

We can go further by seeing how that is stored into a database ...

Demonstration of POST and PHP

Using a PHP script with a parameter sent by a Web page. In the example, the parameter is a URL and the script checkes whether this URL is a valid link.

The JavaScript code that launches the script and provide it with the parameter:

function storing(data)
{
    var element = document.getElementById('storage');
    element.innerHTML = data;
}

function submitForm(element)
{ 
    var req =  createInstance();
    var url = document.ajax.url.value;
    var data = "url=" + url;
    req.onreadystatechange = function()
    { 
        if(req.readyState == 4)
        {
                if(req.status == 200)
                {
                        storing(req.responseText);	
                }	
                else	
                {
                        alert("Error: returned status code " + req.status + " " + req.statusText);
                }	
        } 
}; 

req.open("POST", "pingurl.php", true); 
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(data); 

The pingurl script receives the URL assigned to the url variable.

• Demonstration
  Checking a URL.

Interacting with an SQL database

One can imagine a table named mytable, with columns named var1 and var2.

var1	var2

PHP has functions for reading and writing in a SQL table, and this in fact has no dependence with Ajax.

$base = mysql_connect($HOST, $USER, $PWD);  
mysql_select_db($name, $base); 
$query = "INSERT INTO mytable(var1, var2) VALUES ('$var1', '$var2'')"; 
mysql_query($query, $base);

The data from an HTML form are transferred to the PHP script that inserts them into an SQL database in a few lines ...

Conclusion

Ajax provides to PHP, a scripting language operating mainly on servers, what is lacks: a graphical interface allowing the user to interact with an online application, working with instant reactivity.