Source Code of: ajax.htm
Date Last Modified: May 02, 2009 - 01:59:17 AM
Size: 5 KB  |  226 lines  |  5,917 characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Playing with AJAX (I hate that acronym)</title>

<style type="text/css">

.success, .failure {
    font-weight: bold;
}

.success {
    color: #393;
}

.failure {
    color: #933;
}
</style>

<script type="text/javascript">
// this is general supporting script

var init = new Array();
init[0] = new Function("{}");

function initBody()
{
    var i;
    for (i = 0; i < init.length; i++)
        init[i]();
    // end for
} // end function initBody

function addBodyOnload(funct)
{
    init[init.length] = funct;
} // end function addBodyOnload

window.onload = initBody;
</script>


<script type="text/javascript">

// this is a script with general AJAX library methods
// based mainly on http://www.xml.com/pub/a/2005/02/09/xml-http-request.html

// global request object
var req = null;

// global variable referencing the handler for state changes
var stateChangeHandlerFunc;


// function registerOnStateChange(func)
// {
//     if (func) stateChangeHandlerFunc = func;
// }


function loadXMLDoc(url) 
{
    // native XMLHttpRequest object
    if (window.XMLHttpRequest) {
//        if (req == null)
//    {
//        alert('Creating a new instance of XMLHttpRequest object');
        req = new XMLHttpRequest();
//    } // end if
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
    // IE/Windows
    } else if (window.ActiveXObject) {
//        if (req == null)
//    {
//        alert('Creating a new instance of Microsoft.XMLHTTP object');
        req = new ActiveXObject("Microsoft.XMLHTTP");
//    } // end if
        if (req && req != null) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.send();
        }
    } // end if
}


function processReqChange() 
{
    // if state is "complete"
    if (req.readyState == 4)
    {
        if (req.status == 200) 
        {
            // this is using a sort of 'interface' design
            var res = req.responseText;
            handleResponse(res);
        } // end if
    } // end if
}

</script>


<script type="text/javascript">

var newnode = null;

function handleResponse(resText)
{
    if (resText && resText != '')
    { 
        // Response mode
        
        if (!document.getElementById) return;
        
        var frm = document.getElementById('signupform');
        newnode = document.createElement('p');
        var msg;
        
        if (resText == 'notfound')
        {
            newnode.className = 'success';
            msg = 'The username you selected is available and you have been registered. '
                + 'If you try again, you should get a message saying the username is unavailable.';
        }
        else if (resText == 'found')
        {
            newnode.className = 'failure';
            msg = 'The username you selected is unavailable.';
        }
        else if (resText == 'error')
        {
            newnode.className = 'failure';
            msg = 'There was an error in attempting to check whether the username you selected is available.';
        }
        else
        {
            newnode.className = 'failure';
            msg = 'Something has gone horribly wrong. The following was returned: '+ resText;
        }// end if
        
        newnode.appendChild(document.createTextNode(msg));
        frm.parentNode.insertBefore(newnode, frm);
    } // end if
}

function checkUsername()
{
    // remove current message if there is one from a previous attempt
    if (newnode != null)
    {
        newnode.parentNode.removeChild(newnode);
    } // end if
    
    var script = 'http://mwarden.f2o.org/sandbox/ajaxSearchForUsername.php';
    var url  = script + '?u=' + this.value;
    loadXMLDoc(url);
} // end if


function initAJAX()
{
    
    // make DOM modifications
    if (document.getElementById && document.getElementById('uname'))
    {
        document.getElementById('uname').onblur = checkUsername;
    } // end if
    
//     // register the state change handler. you might have chosen to put
//     // this in the above condition, as it's not relevant unless that onblur
//     // is set, but I dislike making such assumptions, as they might change
//     // with future additions. It makes more sense to me to be as minimal as 
//     // is wise with the function/object detection.
//     registerOnStateChange(checkUsername);
}

addBodyOnload(initAJAX);
</script>









</head>
<body>

<h1>AJAX Test</h1>
<p>
This form uses AJAX to check, while you are filling out the rest of the form, 
whether the username you have supplied has already been taken. To see it in action, 
fill out the form as you typically would. For testing purposes, you will get a 
message either way (so that you know it worked). Note: when you submit the form, 
it will just kick you back to this page, as this is just a demonstration.
</p>
<p>
The AJAX related code is added to the document via Javascript and DOM, so there 
would be no problems if the required JS is not supported in your browser (however, 
since the form doesn't actually submit to anything, you won't find this page very 
interesting if your browser doesn't support AJAX related Javascript). Typically, 
the Javascript would be in an external script file, but it is included inline 
here for demonstration purposes (same with the CSS). You can easily see how it 
could be cut and pasted into an external file, because it uses the DOM and is not 
at all intermingled with the markup.
</p>
<form action="" method="post" id="signupform">
<ul>
    <li>Username: <input type="text" name="uname" id="uname" value="" /></li>
    <li>Password: <input type="password" name="pword" id="pword" value="" /></li>
    <li>First name: <input type="text" name="fname" id="fname" value="" /></li>
    <li>Last name: <input type="text" name="lname" id="lname" value="" /></li>
    <li>Favorite color: <input type="text" name="favcolor" id="favcolor" value="" /></li>
    <li>The answer to life, the Universe, and everything: <input type="text" name="an42" id="an42" value="" /></li>
    <li><input type="submit" name="sbmt" id="sbmt" value="Click if you want, but it doesnt really do anything" /></li>
</ul>
</form>
</body>
</html>

A Derivative Work of: PHP Source Code Utility - Version 1.0.0 Copyright © 0php.com 2002.