JavaScript 15 Ajax异步登陆
/**
 * Created by KING on 2017/11/28.
 */
var g_xhr_ui;
var g_xhr_login;
var g_id;
$(document).ready(function () {
    on_init_userinfo();
});
function createXMLHttpRequest() {
    var xhr;
    if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = null;
    }
    return xhr;
}
function on_init_userinfo() {
    g_xhr_ui = createXMLHttpRequest();
    if (g_xhr_ui) {
        g_xhr_ui.onreadystatechange = handleStateChangeInit;
        g_xhr_ui.open("GET", "json\\userinfo.json", true);
        g_xhr_ui.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
        g_xhr_ui.send(null);
    }
}
function handleStateChangeInit() {
    if (g_xhr_ui.readyState == 4) {
        if (g_xhr_ui.status == 200) {
            var resText = g_xhr_ui.responseText;
            console.log("The server response: " + resText);
            var jsonObj = JSON.parse(resText);
            var len = jsonObj.length;
            console.log("json length : " + len);
            var v_table = "<table>" + "<caption>客户信息表</caption>" + "<th>No</th>" + "<th>Company</th>" + "<th>WebSite</th>" + "<th>Email</th>" + "<th class='th-oper'>Oper.</th>";
            for (let i = 0; i < len; i++) {
                let v_tr =
                    "<tr>" +
                    "<td>" + jsonObj[i].cid + "</td>" +
                    "<td>" + jsonObj[i].cname + "</td>" +
                    "<td>" + jsonObj[i].csite + "</td>" +
                    "<td>" + jsonObj[i].cemail + "</td>" +
                    "<td class='td-oper'>" + "<a href='#'>Edit</a>" + "</td>" +
                    "</tr>";
                v_table += v_tr;
            }
            v_table += "</table>";
            document.getElementById("id-div-userinfo").innerHTML = v_table;
        }
    }
}
function on_login_click(thisid) {
    var param;
    var p_id = document.getElementById("id-input-login-id").value;
    g_id = p_id;
    var p_pwd = document.getElementById("id-input-login-pwd").value;
    var md5_pwd = $.md5(p_pwd);
    param = "id=" + p_id + "&pwd=" + md5_pwd;
    g_xhr_login = createXMLHttpRequest();
    if (g_xhr_login) {
        g_xhr_login.onreadystatechange = handleStateChangeLogin;
        g_xhr_login.open("POST", "login.php", true);
        g_xhr_login.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
        g_xhr_login.send(param);
    }
}
function handleStateChangeLogin() {
    var vLoginStatus;
    if (g_xhr_login.readyState == 4) {
        if (g_xhr_login.status == 200) {
            var vLoginStatus = g_xhr_login.responseText;
            console.log("The server response: " + vLoginStatus);
            if (vLoginStatus == "1") {
                document.getElementById("id-div-login").hidden = true;
                document.getElementById("id-div-login-ok").hidden = false;
                document.getElementById("id-div-login-ok").innerHTML =
                    "id : " + g_id + "  <a href='index.html'>Logout</a>";
                document.getElementsByClassName('th-oper')[0].style.visibility = "visible";
                let o_td_oper = document.getElementsByClassName('td-oper');
                let len = o_td_oper.length;
                for (let i = 0; i < len; i++)
                    o_td_oper[i].style.visibility = "visible";
            } else {
                document.getElementById("id-div-login").hidden = false;
                document.getElementById("id-div-login-ok").hidden = true;
                document.getElementById("id-input-login-id").value = "";
                document.getElementById("id-input-login-pwd").value = "";
            }
        }
    }
}

                
            
        
浙公网安备 33010602011771号