Your AJAX Starter Kit (Part 2/2)

All right! You have the front-end HTML and the back-end PHP script. Now it's time to unite them.

Use this code. Place it in the ajax_frontend() function of your HTML file.

ajax_test.html

        function ajax_frontend()
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var backendresponse=xmlhttp.responseText;
                    document.getElementById("ajax_placeholder").innerHTML=backendresponse;           
                }
            }

            xmlhttp.open("POST","ajax_backend.php",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send("user=teochewthunder");
        }

The code first creates an object, the XMLHttpRequest object which we will name xmlhttp. Different methods have been used for cross-browser compatibility.

So we use the open() method to query the server. In it, we specify the method to be a POST, and the URL of the back-end script. GET works as well, but POST is usually the more versatile option.

The method setRequestHeader() specifies more properties of the back-end script, and lets the server know what kind of content it's expecting. There are more variations on this, but this will do for your starter kit.

And then there's the send() method which sends the value(s) over to the back-end script.

After that, it asynchronously listens for a response from the server  using the property onreadystatechange and status. These properties change every time there's a response to the listener.

For more on these properties, follow this link. (http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp)

readyState has to be 4 (meaning "Done") and status has to be 200 (meaning "OK") before the script can progress further. Once the all-clear is given, the output of ajax_backend.php will be sent through the responseText property. And that's when I put the data in a variable named backendresponse (rename as you see fit) and assign it to the innerHTML property of the ajax_placeholder div.

If your script works, this is what you should see upon running your HTML file from the server.

Is this it?

Hell no, this isn't it! But it will do for a start. There are many variations on this theme. For instance, you may be using multiple asynchronous calls to populate different named divs in your HTML file, obtaining data from multiple back-end scripts.

There's tons you can achieve with this simple and unassuming piece of code. Save this somewhere in your personal code depository. You'll copy and paste this as your basic AJAX building block in your web applications, and expand on it when required. In fact, I did exactly that for the CAPTCHA web tutorial.

Have lots of fun with this!

All clear? Got any queries? By all means, send() them over.
T___T