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 = "";
            }
        }
    }
}
JavaScript 15 Ajax异步登陆的更多相关文章
- ssm+ajax实现登陆
		
ssm的搭建见上一章 1.数据协议层 public User selectByLoginnameAndPassword(@Param("loginname")String logi ...
 - Javascript与Ajax
		
不使用jquery来处理ajax请求该怎么做? 首先要明确html中的某些数据需要从服务端获得,也就是客户端向服务端请求(request)数据,服务端就响应(response)这个请求,把客户端要的数 ...
 - ajax异步服务器获取时间
		
1.创建ajax对象 <script type="text/javascript"> //创建AJAX异步对象 function createAJAX(){ var a ...
 - python操作三大主流数据库(6)python操作mysql⑥新闻管理后台功能的完善(增、ajax异步删除新闻、改、查)
		
python操作mysql⑥新闻管理后台功能的完善(增.删.改.查)安装表单验证D:\python\python_mysql_redis_mongodb\version02>pip instal ...
 - 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
		
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
 - Ajax异步验证登陆或者注册
		
首先介绍一个不错的学习Ajax的中文网站:http://www.w3school.com.cn/ajax/index.asp AJAX = 异步 JavaScript 和 XML.详细介绍见上面的网址 ...
 - Ajax 传统的异步登陆
		
这是一个传统的异步登陆,利用Ajax实现的,主要代码如下: 客户端代码: var http; function Button1_onclick() { if (window.ActiveXObject ...
 - [转] 为什么javascript是单线程的却能让AJAX异步调用?
		
为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的? function foo() { console.log( 'first' ); ...
 - JavaScript、Ajax与jQuery的关系                                                    分类:            C1_HTML/JS/JQUERY             2014-07-31 10:15    3388人阅读    评论(0)    收藏
		
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
 
随机推荐
- Cacti 升级
			
现在用的 cacti 1.0.3 决定升级一下cacti到最新版本 1.1.1 官方升级指导文件 Upgrading Cacti Backup the old Cacti database. ...
 - React之props、state和render函数的关系
			
1.当组件中的state或者props发生改变的的时候,render函数就会被重新执行 2.当父组件的render函数被运行时,它的子组件的render都将被重新运行一次 3.子组件作为父组件里的一个 ...
 - [LeetCode] [链表] 相关题目总结
			
刷完了LeetCode链表相关的经典题目,总结一下用到的技巧: 技巧 哑节点--哑节点可以将很多特殊case(比如:NULL或者单节点问题)转化为一般case进行统一处理,这样代码实现更加简洁,优雅 ...
 - 快速筛出topK的快速选择算法和BFPRT优化
			
本文始发于个人公众号:TechFlow,原创不易,求个关注 在之前Python系列当中,我们介绍了heapq这个库的用法,它可以在\(O(nlogn)\)的时间里筛选出前K大或者前K小的元素.今天我们 ...
 - Web登录配置-H3C-S5120-LI系列
			
1.开启http服务和修改端口号 ip http enable ip http port 80 2.添加用户和密码.用户名:admin.密码:admin@123 [Sysname] local-us ...
 - jdk升级后Eclipse无法启动问题
			
overview: 今日安装jdk11,设置好环境变量后,eclipse无法运行,由于项目依赖原因,不想更新eclipse的版本. 我的jdk是1.8,在将环境变量设回1.8后依然无法运行.在多次尝试 ...
 - ES6学习笔记(二):教你玩转类的继承和类的对象
			
继承 程序中的继承: 子类可以继承父类的一些属性和方法 class Father { //父类 constructor () { } money () { console.log(100) } } c ...
 - [javascript] 利用chrome的overrides实时调试线上js
			
chrome的开发者工具,在source选项卡下,可以看到js的源代码,有一个断点调试功能,就是在js的源代码行号那里点击一下,出现一个箭头,当再次刷新页面并且进行了相应操作时,就会停在断点的地方.我 ...
 - CODEFORCES ROUND#624 DIV3
			
这次比赛从名字就可以看出非常水,然鹅因为第一次打codeforces不太熟悉操作只来的及做签到题(还错了一次) A,B,C都是签到题考点思维就不写了 D题 https://codeforces.ml/ ...
 - 用Python制作酷炫词云图,原来这么简单!
			
一.简介词云图是文本挖掘中用来表征词频的数据可视化图像,通过它可以很直观地展现文本数据中地高频词:! 图1 词云图示例 在Python中有很多可视化框架可以用来制作词云图,如pyecharts,但这些 ...