Listing 3. 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 parseUsernames() {

            // Set up empty array of usernames
            var usernames = [ ];

            // Wait for the HTTP response
        if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            usernames = xhr.responseText.split("\n");
        }
        else
        {
            alert("problem: xhr.status = " + xhr.status);
        }
        }

            // Get the username that the person wants
            var new_username = document.forms[0].username.value;
            var found = false;
            var warning = document.getElementById("warning");
            var submit_button = document.getElementById("submit-button");

        // Is this new username already taken? Iterate over
        // the list of usernames to be sure.
            for (i=0 ; i<usernames.length; i++)
            {
                if (usernames[i] == new_username)
                {
                    found = true;
                }
            }

        // If we find the username, issue a warning and stop
        // the user from submitting the form.
            if (found)
            {
                setText(warning, "Warning: username '" + new_username
                +"' was taken!");
                submit_button.disabled = true;
            }

            else
            {
                removeText(warning);
                submit_button.disabled = false;
            }

        }

        function checkUsername() {
            // Send the HTTP request
        xhr.open("GET", "usernames.txt", true);
        xhr.onreadystatechange = parseUsernames;
        xhr.send(null);
        }
        }

    </script>
  </head>
  <body>
    <h2>Register</h2>
    <p id="warning"></p>
    <form action="/cgi-bin/register.pl" method="post">
        <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>

