/**
* 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. python OpenCV安装

    linux系统 yum install -y libSM.x86_64 libXext.x86_64 libXrender.x86_64 pip install numpy Matplotlib pi ...

  2. H5谷歌登录 webview错误

    接入谷歌登录 H5接入谷歌登录打包apk使用webview谷歌登录不上(谷歌不支持用户代理被归类为嵌入式用户代理(也称为网络视图),因此不允许向Google发出OAuth授权请求) 解决办法:替换ua ...

  3. drf token刷新配置、认证组件(使用)、权限组件(使用)、频率组件(使用)、异常组件(使用)

    目录 一.特殊路由映射的请求 二.token刷新机制配置(了解) 三.认证组件项目使用:多方式登录 1.urls.py 路由 2.views.py 视图 3.serializers.py 序列化 4. ...

  4. 手把手教你快速使用数据可视化BI软件创建全球经济贸易分析大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以全球经济贸易分析大屏为例 ...

  5. Python3标准库:itertools迭代器函数

    1. itertools迭代器函数 itertools包括一组用于处理序列数据集的函数.这个模块提供的函数是受函数式编程语言(如Clojure.Haskell.APL和SML)中类似特性的启发.其目的 ...

  6. Android中通过Java代码实现ScrollView滚动视图-以歌词滚动为例

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...

  7. MySQL索引优化深入

    创建 test 测试表 CREATE TABLE `test` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `c1` varchar(10) DEFAULT N ...

  8. Codeforces 1301B Motarack's Birthday(二分)

    题目链接:http://codeforces.com/problemset/problem/1301/B 思路: (1)都是-1的情况 (2)只有一个除-1之外的数 (3)至少有两个除-1之外的不同的 ...

  9. PMP--2.2 效益管理计划

    一.文件背景概述 ​​​1. 所需文件/数据 制定效益管理计划需要使用商业论证和需求评估中的数据和信息,例如,成本效益分析数据. 成本效益分析数据是在商业论证和需求评估中得到的,在成本效益分析中已经把 ...

  10. #《Essential C++》读书笔记# 第二章 面向过程的编程风格

    基础知识 函数必须先被声明,然后才能被调用(被使用).函数的声明让编译器得以检查后续出现的使用方式是否正确--是否有足够的参数.参数类型是否正确,等等.函数声明不必提供函数体,但必须指明返回类型.函数 ...