/**
* 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 + "&nbsp;&nbsp;<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异步登陆的更多相关文章

  1. ssm+ajax实现登陆

    ssm的搭建见上一章 1.数据协议层 public User selectByLoginnameAndPassword(@Param("loginname")String logi ...

  2. Javascript与Ajax

    不使用jquery来处理ajax请求该怎么做? 首先要明确html中的某些数据需要从服务端获得,也就是客户端向服务端请求(request)数据,服务端就响应(response)这个请求,把客户端要的数 ...

  3. ajax异步服务器获取时间

    1.创建ajax对象 <script type="text/javascript"> //创建AJAX异步对象 function createAJAX(){ var a ...

  4. python操作三大主流数据库(6)python操作mysql⑥新闻管理后台功能的完善(增、ajax异步删除新闻、改、查)

    python操作mysql⑥新闻管理后台功能的完善(增.删.改.查)安装表单验证D:\python\python_mysql_redis_mongodb\version02>pip instal ...

  5. 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  6. Ajax异步验证登陆或者注册

    首先介绍一个不错的学习Ajax的中文网站:http://www.w3school.com.cn/ajax/index.asp AJAX = 异步 JavaScript 和 XML.详细介绍见上面的网址 ...

  7. Ajax 传统的异步登陆

    这是一个传统的异步登陆,利用Ajax实现的,主要代码如下: 客户端代码: var http; function Button1_onclick() { if (window.ActiveXObject ...

  8. [转] 为什么javascript是单线程的却能让AJAX异步调用?

    为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的? function foo() { console.log( 'first' ); ...

  9. JavaScript、Ajax与jQuery的关系 分类: C1_HTML/JS/JQUERY 2014-07-31 10:15 3388人阅读 评论(0) 收藏

    简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

随机推荐

  1. yum安装logstash 不生效

    问题描述 根据logstash的配置方法写了一个配置文件,并放入/etc/logstash/conf.d/目录下,然后我们运行logstash # service logstash start Log ...

  2. 1336 - Sigma Functio

    1336 - Sigma Function Sigma function is an interesting function in Number Theory. It is denoted by t ...

  3. python新手如何编写一个猜数字小游戏

    此文章只针对新手,希望大家勿喷,感谢!话不多说先上代码: import random if __name__ == '__main__': yourname = input("你好! 你的名 ...

  4. JS高阶编程技巧--compose函数

    先看代码: let fn1 = function (x) { return x + 10; }; let fn2 = function (x) { return x * 10; }; let fn3 ...

  5. Objective-C编程 — 并行编程

    多线程 线程的基本概念 线程 (thread)是进程(process)A 内假想的持有 CPU 使用权的执行单位.一般情况下,一个进程 只有一个线程,但也可以创建多个线程并在进程中并行执行.应用在执行 ...

  6. Linux部署.NetCore站点 使用Supervisor进行托管部署

    前言 之前终于在Linux上部署好了.NetCore站点,但是这个站点非常“脆弱”.当我的ssh连接关闭或者我想在当前连接执行其他命令时候就必须关闭dotnet站点的执行程序.这显然不是我想要达到的效 ...

  7. asp.net core 3.1 入口:Program.cs中的Main函数

    本文分析Program.cs 中Main()函数中代码的运行顺序分析asp.net core程序的启动,重点不是剖析源码,而是理清程序开始时执行的顺序.到底用了哪些实例,哪些法方. asp.net c ...

  8. git系列之---将本地的项目添加到码云仓库

    1.前情: 本地写的 Demo 传到码云上面进行维护. 2.操作步骤: git init   将本地文件初始化为git 仓库,文件件会多一个 .git 文件夹[版本库]: git add .   或者 ...

  9. Android中使用Notification在状态栏上显示通知

    场景 状态栏上显示通知效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新 ...

  10. SecureCRT的下载、安装( 过程非常详细!!值得查看)

    SecureCRT的下载.安装( 过程非常详细!!值得查看) 简单介绍下SecureCRT 一.SecureCRT的下载 二.SecureCRT的安装 简单介绍下SecureCRT SecureCRT ...