Listing 2. post-ajax-register.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head><title>Register</title>

    <script type="text/javascript">
    function getXMLHttpRequest () {
        try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {};
        try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e)
{}
        try { return new XMLHttpRequest(); } catch(e) {};
        return null;
    }

    function removeText(node) {
        if (node != null)
        {
        if (node.childNodes)
        {
            for (var i=0 ; i < node.childNodes.length ; i++)
            {
            var oldTextNode = node.childNodes[i];
            if (oldTextNode.nodeValue != null)
            {
                node.removeChild(oldTextNode);
            }
            }
        }
        }
    }

        function appendText(node, text) {
            var newTextNode = document.createTextNode(text);
            node.appendChild(newTextNode);
        }


        function setText(node, text) {
            removeText(node);
            appendText(node, text);
        }

        var xhr = getXMLHttpRequest();

        function parseResponse() {

            // Get variables ready
            var response = "";
            var new_username = document.forms[0].username.value;
            var warning = document.getElementById("warning");
            var submit_button = document.getElementById("submit-button");

            // Wait for the HTTP response
        if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            response = xhr.responseText;

                    switch (response)
                    {
            case "yes":
                setText(warning,
                    "Warning: username '" +
                    new_username +"' was taken!");
                submit_button.disabled = true;
                break;

            case "no":
                removeText(warning);
                submit_button.disabled = false;
                            break;

            case "":
                break;

            default:
                alert("Unexpected response '" + response + "'");
                    }

        }
        else
        {
            alert("problem: xhr.status = " + xhr.status);
        }
        }
        }

        function checkUsername() {
            // Send the HTTP request
        xhr.open("POST", "/cgi-bin/check-name-exists.pl", true);
        xhr.onreadystatechange = parseResponse;

        var username = document.forms[0].username.value;
            xhr.send("username=" + escape(username));
        }

    </script>
  </head>
  <body>
    <h2>Register</h2>
    <p id="warning"></p>
    <form action="/cgi-bin/register.pl" method="post"
enctype="application/x-www-form-urlencoded">
        <p>Username: <input type="text" name="username"
onchange="checkUsername()" /></p>
        <p>Password: <input type="password" name="password" /></p>
        <p>E-mail address: <input type="text" name="email_address" /></p>
        <p><input type="submit" value="Register" id="submit-button"
/></p>
    </form>
  </body>
</html>

