<!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>
|