Barnaby Norman Home Page | Site Map | Family Norman Genealogy Site | Contact Me

Javascript / Ajax Source Code

The javascript / AJAX used here tests the form to ensure there is data to be sent and uses AJAX to send and receive the data between client and server.

Full source code for colouredCode.js

function clearForm()
{
    // Clears the form and coloured text area on form
    document.getElementById('phpCode').value = "";
    document.getElementById('phpCodeArea').innerHTML = "";            
}
        
function testTxtArea()
{
    // Ensures data is available for processing and calls function to process
    if(document.getElementById('phpCode').value)
    {
        colourCode();
    }
    
    return false;
            
}
        
function colourCode()
{
    // Set up AJAX
    if (window.XMLHttpRequest)
    {
        // Mozilla version
        ajax = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        // IE version
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // Get data from form
    var phpCode = document.getElementById('phpCode').value;
    var inline = document.getElementById('inline').checked;        
            
    if(inline)
    {
        var style = "inline";
    }
    else
    {
        var style = "styleSheet";
    }
                    
    // Prepare data for posting to server
    var sendData = style + ";" + phpCode; 
    var sendData = encodeURIComponent(sendData);

    // Send data
    ajax.open("POST","colouredCodeInterface.php");
    ajax.setRequestHeader('Content-Type', 
        'application/x-www-form-urlencoded; charset=UTF-8');
    ajax.send(sendData);

    // Test for response and recieve returned data
    ajax.onreadystatechange=function()
    {
        if (ajax.readyState==4)
        {
            // Send to screen
            var phpCode = document.getElementById('phpCodeArea');
            phpCode.innerHTML = ajax.responseText;
        }
    }
        
}
        
function addData()
{
    // Adds demo data for demonstration
    document.getElementById('phpCode').value 
        = "function test($name) { echo \"Hello there \" . $name; }";
}