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进行了封装 ...
随机推荐
- [WPF 自定义控件]在MenuItem上使用RadioButton
1. 需求 上图这种包含多选(CheckBox)和单选(RadioButton)的菜单十分常见,可是在WPF中只提供了多选的MenuItem.顺便一提,要使MenuItem可以多选,只需要将MenuI ...
- Go语言基础之面向对象编程中
1 Golang面向对象编程基本介绍 Golang仍然有面向对象编程的继承,封装和多态的特性,只是实现的方式和其它OPP语言不一样,随后分别介绍Golang对面向对象编程的三大特性是如何实现的. 2 ...
- Python模块之Requests
目录 Requests 模块 常规的get请求 基于ajax的get请求 常规的post请求 基于ajax的post请求 综合项目实战 requests模块高级 requests代理 验证码处理 Re ...
- 【USACO】JZOJ,Luogu P2690 接苹果 (dp-线性动规)
同步于CSDN:戳这里QAQ 来源:Luogu P2690,JZOJ 题目描述 很少有人知道奶牛爱吃苹果.农夫约翰的农场上有两棵苹果树(编号为 \(1\) 和 \(2\)), 每一棵树上都长满了苹果. ...
- Ubuntu-Server18.04开启无线网卡并配置静态ip
手里有一个笔记本快10年了,还是奔腾处理器,最近把它做成了Ubuntu-Server的系统,花了点时间折腾无线网卡,稍微记录一下,希望看见的人能少踩点坑. 1. 制作U盘启动工具,从Ubuntu官网下 ...
- C#的冒泡排序
C#实现的从小到大的冒泡排序: public void BubbleSort(int[] array) { int length = array.Length; ; i < length - ; ...
- zerotier的下载、安装、配置与使用(win10、ubuntu)
一.需求描述 2020年,由于“野味肺炎”的影响,笔者要开始在家办公,需要远程连接公司的电脑和设备. 但是公司的网络和家里的网络不是同个局域网,不能直接用微软的远程桌面连接.想挂上公司的vpn,但是又 ...
- ES6和node的模块化
ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量.CommonJS 和 AMD 模块,都只能在运行时确定这些东西.比如,CommonJS 模块就是对象,输入 ...
- python基礎學習第二天
字符编码 # 需知:## 1.在python2默认编码是ASCII, python3里默认是unicode## 2.unicode 分为 utf-32(占4个字节),utf-16(占两个字节),utf ...
- 3.3 Zabbix容器安装
课程资料:https://github.com/findsec-cn/zabbix 1. yum install docker-latest :安装最新的docker ,选择 y ,等待自 ...