(AJAX登陆例子部分JS代码)--JamesDam.com - "AJAX" Login System Demo

创建XMLHttpRequest的Js代码--xml_http_request.js

// method that sets up a cross-browser XMLHttpRequest object
function getHTTPObject() {
    var http_object;

    // MSIE Proprietary method

    /**//*@cc_on
    @if (@_jscript_version >= 5)
        try {
            http_object = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try {
                http_object = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (E) {
                http_object = false;
            }
        }
    @else
        xmlhttp = http_object;
    @end @*/


    // Mozilla and others method

    if (!http_object && typeof XMLHttpRequest != 'undefined') {
        try {
            http_object = new XMLHttpRequest();
        }
        catch (e) {
            http_object = false;
        }
    }

    return http_object;
}

登陆控制器代码--login_controller.js

// js handling the login procedures

// constants
var NORMAL_STATE = 4;
var LOGIN_PREFIX = 'login.php?';

// variables
var http = getHTTPObject(); // We create the HTTP Object
var hasSeed = false;
var loggedIn = false;
var seed_id = 0;
var seed = 0;
var fullname = '';
var messages = '';

// getSeed method:  gets a seed from the server for this transaction
function getSeed() 
{        // only get a seed if we're not logged in and we don't already have one
        if (!loggedIn && !hasSeed) {
            // open up the path
            http.open('GET', LOGIN_PREFIX + 'task=getseed', true);
            http.onreadystatechange = handleHttpGetSeed;
            http.send(null);
        }
}

// handleHttpGetSeed method: called when the seed is returned from the server
function handleHttpGetSeed()
{
    // if there hasn't been any errors
    if (http.readyState == NORMAL_STATE) {
        // split by the divider |
        results = http.responseText.split('|');
        
        // id is the first element
        seed_id = results[0];
        
        // seed is the second element
        seed = results[1];
        
        // now we have the seed
        hasSeed = true;
    }
}

// validateLogin method: validates a login request
function validateLogin()
{
    // ignore request if we are already logged in
    if (loggedIn)
        return;

    // get form form elements 'username' and 'password'
    username = document.getElementById('username').value;
    password = document.getElementById('password').value;

    // ignore if either is empty
    if (username != '' && password  != '') {
        // compute the hash of the hash of the password and the seed
        hash = hex_md5(hex_md5(password) + seed);
        
        // open the http connection
        http.open('GET', LOGIN_PREFIX + 'task=checklogin&username='+username+'&id='+seed_id+'&hash='+hash, true);
        
        // where to go
        http.onreadystatechange = handleHttpValidateLogin;
        http.send(null);
    }
}

// handleHttpValidateLogin method: called when the validation results are returned from the server
function handleHttpValidateLogin()
{
    // did the connection work?
    if (http.readyState == NORMAL_STATE) {
        // split by the pipe
        results = http.responseText.split('|');
        if (results[0] == 'true')
        {
            hasSeed = false;
            loggedIn = true;
            fullname = results[1];
            messages = '';
        }
        else
        {
            messages = results[1];
        }
        showLogin();
    }
}

// resetLogin method: if logged in, 'logs out' and allows a different user/pass to be entered
function resetLogin()
{
    loggedIn = false;
    hasSeed = false;
}

login_presentation.js代码

var showingLoggedIn = false;
var messageElement = false;
var messageP = false;

// focusField method: called when username and password gain focus
function focusField()
{
    try {
        if (messageElement != false)
        {
            document.getElementById('message').removeChild(messageElement);
        }
        getSeed();
    }
    catch (e)
    { } // do nothing hides an apparent firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=236791
}

// blurField method: called when username and password are blurred
function blurField()
{
    try {
        validateLogin();
    }
    catch (e)
    { } // hide bug https://bugzilla.mozilla.org/show_bug.cgi?id=236791
}

// showLogin method: displays if necessariy that we are logged in
function showLogin() {
    if (messageElement != false)
    {
        try {
            document.getElementById('message').removeChild(messageElement);
        }
        catch (e) { }
    }
    if (loggedIn)
    {
        showingLoggedIn = true;
        
        loginPanel = document.getElementById('login');
        p = document.createElement('p');
        pre = document.createTextNode('Logged in as ');
        strong = document.createElement('strong');
        strong_text = document.createTextNode(fullname);
        strong.appendChild(strong_text);
        mid = document.createTextNode(' [');
        a = document.createElement('a');
        a.href='javascript:logout();';
        a_text = document.createTextNode('logout');
        a.appendChild(a_text);
        post = document.createTextNode(']');
        
        p.appendChild(pre);
        p.appendChild(strong);
        p.appendChild(mid);
        p.appendChild(a);
        p.appendChild(post);
        
        messageP = document.getElementById('message');
        loginPanel.removeChild(messageP);
        loginPanel.appendChild(p);
        
        messageElement = p;
        
        document.getElementById('username').disabled = 'disabled';
        document.getElementById('password').disabled = 'disabled';
        
        document.getElementById('comments').focus();
    }
    else
    {
        messageElement = document.createElement('strong');
        messageElement.appendChild(document.createTextNode(' ' + messages));
        messageElement.style.color = '#ff0000';
        document.getElementById('message').appendChild(messageElement);
    }
}

// logout method: prepares for a new login
function logout()
{
    resetLogin();
    username = document.getElementById('username');
    password = document.getElementById('password');
    loginPanel = document.getElementById('login');
    username.value = '';
    password.value = '';
    username.disabled = null;
    password.disabled = null;
    
    loginPanel.removeChild(messageElement);
    loginPanel.appendChild(messageP);
    
    messageElement = false;
    showingLoggedIn = false;
    
    username.focus();
}

// setupLogin method: to be called on page load, sets up the login script
function setupLogin()
{
    username = document.getElementById('username');
    password = document.getElementById('password');
    addEvent(username, 'focus', focusField);
    addEvent(username, 'blur', blurField);
    addEvent(password, 'focus', focusField);
    addEvent(password, 'blur', blurField);
}


// function to add events to the page in a cross-browser manner
function addEvent(objObject, strEventName, fnHandler) { 
    // DOM-compliant way to add an event listener 
     if (objObject.addEventListener) {
        objObject.addEventListener(strEventName, fnHandler, false); 
    }
    // IE/windows way to add an event listener 
    else if (objObject.attachEvent) {
        objObject.attachEvent('on' + strEventName, fnHandler); 
    }
}

addEvent(window,'load',setupLogin);

部分页面代码-login.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JamesDam.com ≈ AJAX Login System Demo</title>
<script src="md5.js" type="text/javascript">
// javascript md5 encoder originated from <http://pajhome.org.uk/crypt/md5/>
// used under license as outlined at <http://pajhome.org.uk/site/legal.html>
// Copyright (c) 1998 - 2002, Paul Johnston & Contributors
// All rights reserved.
</script>
<script src="xml_http_request.js" type="text/javascript">
// xml http request script modified slightly from that found at
// <http://www.webpasties.com/xmlHttpRequest/index.html>, which is
// Copyright 2005 Bill Bercik.
</script>
<script src="login_controller.js" type="text/javascript"></script>
<script src="login_presentation.js" type="text/javascript"></script>
<link rel="stylesheet" href="login.css" type="text/css" />
</head>

<body>



<div id="post_comment">
<form action="post" onSubmit="return false">
<div id="login" class="login">
<label for="username">Username: </label>
<input type="text" name="username" id="username" size=20>
<label for="password">Password: </label>
<input type="password" name="password" id="password" size=20>
<p id="message">Enter your username and password to log in.</p>
</div>
<label for="comments">Comments:</label>
<textarea rows="6" cols="80" id="comments"></textarea>
</form>
</div>


</body>
</html>

其中,除了我们要学习XMLHttpRequest对象的使用之外,我们还要学习document对象的使用,我贴这些代码的原因就是代码中多次出现document对象的使用方法.希望在以后的项目和工作中得到参考.