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进行了封装 ...
随机推荐
- ntp时间服务器 时间同步
具体两种模式 1.服务器数量比较少,可以直接与时间服务器同步 2.本地服务器较多,在本地自建时间同步服务器, 时间同步的两个命令 ntpd : 校准时间,一点点的校准过来时间的 ...
- [CentOS7 mini]Linux命令补全 yum install bash-completion
CentOS7 mini默认不带命令补全需要自行安装 使用国内yum清华源 安装完后退出当前窗口再登录生效 # yum install -y bash-completion 已加载插件:fastest ...
- 如何在GitHub预览html
1.在GitHub中找到需要预览的html文件,点击settings 2.找到GitHub Pages,将其中的source改为master branch,此时出现了下图中的红色链接,打开一个新的网页 ...
- docker部署带mysql数据库连接的.netcore程序
docker部署带mysql数据库连接的程序和部署普通的程序完全一致 数据库可以是物理机删的mysql,同时也可以是docker里的mysql. 如果是docker中的mysql,配置连接字符串和物理 ...
- RT-Thread can - STM32F103ZET6
SDK版本v4.0.2 目前,RT-Thread Studio还不能够自定义添加can设备.下面介绍手动添加过程: 使用RT-Thread Studio创建一个简单工程 使用RT-Thread env ...
- leetcode-简单-栈-有效的括号
给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. 注意空字符串可被 ...
- P2214 [USACO14MAR]哞哞哞Mooo Moo
链接:Miku ---------------------- 这道题还是个背包 --------------------- 首先看一下声音的组成,对于每一个农场的声音,它是由两部分组成的 :上一个农场 ...
- opencv —— resize、pyrUp 和 pyrDown 图像金字塔(高斯金字塔、拉普拉斯金字塔)与尺寸缩放(向上采样、向下采样)
我们经常会将某种尺寸的图像转化为其他尺寸的图像,如果需要放大或者缩小图像的尺寸,在 OpenCV 中可以使用如下两种方法: resize 函数,最直接的方法. pyrUp 和 pyrDown 函数,即 ...
- sql查询 ——排序
-- 排序 -- order by 排序 默认为升序 -- asc 升序 -- desc 降序 -- 查询身高 分别用升序和降序 select *from student order by high ...
- python—lambda函数,三个常用的高阶函数
"""lambda 参数列表 : 返回值lambda 参数形式: 1.无参数:lambda:100 2.一个参数:lambda a: a 3.默认参数:lambda a, ...