AJAX - 实现一个简单的登录验证
/**Ajax 编写流程
* 1、创建 XHR (XMLHttpRequest)对象
var xmlHttpReq = false; // var xmlHttpReq = ""; 数据类型改变--弱类型
//Part1:创建 [一个函数，初始化] XHR 对象--->是 Ajax的基础
function createXmlHttpRequest() {
/**这里要完成两个步骤：
* 1.IE7+、FireFox、Chrome、Safari、Opera浏览器下的 XHR 是如何初始化的
* 2.IE5、IE6 浏览器下的 XHR 有是如何初始化的
**/
if(window.XMLHttpRequest){ //IE7+、FireFox、Chrome、Safari、Opera下创建的 XHR
xmlHttpReq = new XMLHttpRequest();
}else if(window.ActiveXObject){ //IE5、IE6下创建的 XMLHttpRequest
try{ // 所有现代浏览器均支持 XHR 对象（IE5 和 IE6 使用 ActiveXObject）。
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
console.log("=====Fail======");
}
}
}
* 2、利用XHR发送Ajax请求
* 3、写一个回调函数来解析服务器端返回的数据
* 4、把数据渲染到HTML页面上
//Part2:利用XMLHttpRequest发送Ajax请求---->将请求发送到服务器 用 XHR 对象的 open() 和 send() 方法
function sendRequest(url, params){
// 1创建 XMLHttpReq对象（先调用，使xmlHttpReq初始化）
createXmlHttpRequest();
// 2向服务器发送请求---->设置发送请求相关属性
xmlHttpReq.open("POST",url,true);// 2.1 规定请求的类型、URL 以及是否异步处理请求。
xmlHttpReq.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 2.2 设置Http请求头
xmlHttpReq.send(params); // 2.3 将请求发送到服务器 发送数据
// Part3 回调函数 处理服务器返回的数据
xmlHttpReq.onreadystatechange = function() {
if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200){
//Part4 数据解析---> 把数据渲染到HTML页面上
// nodeValue 返回元素值
var res = xmlHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.nodeValue;
window.alert(res);
}
}
}
完整代码如下：
1.html文件
<!-- 01_ajax.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax案例</title>
<script src="js/01_ajax.js"></script> </head>
<body>
<form action="" method="post">
<p><label>账号:</label><input type="text" name="uname" id="uname"></p>
<p><label>密码:</label><input type="password" name="upass" id="upass"></p>
<p><input type="button" value="登录" onclick="login()"></p>
</form>
</body>
</html>
01_ajax.html
2.js文件
/**Ajax编写流程
* 1、创建 XHR (XMLHttpRequest)对象
* 2、利用XHR发送Ajax请求
* 3、学会写一个回调函数来解析服务器端返回的数据
* 4、把数据渲染到HTML页面上
*/ $ = function(obj){
return document.getElementById(obj);
} var xmlHttpReq = false; // var xmlHttpReq = ""; 数据类型改变--弱类型
//Part1:创建 [一个函数，初始化] XHR 对象--->是 Ajax的基础
function createXmlHttpRequest() {
/**这里要完成两个步骤：
* 1.IE7+、FireFox、Chrome、Safari、Opera浏览器下的 XHR 是如何初始化的
* 2.IE5、IE6 浏览器下的 XHR 有是如何初始化的
**/
if(window.XMLHttpRequest){ //IE7+、FireFox、Chrome、Safari、Opera下创建的 XHR
xmlHttpReq = new XMLHttpRequest();
}else if(window.ActiveXObject){ //IE5、IE6下创建的 XMLHttpRequest
try{ // 所有现代浏览器均支持 XHR 对象（IE5 和 IE6 使用 ActiveXObject）。
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
console.log("=====Fail======");
}
}
} //Part2:利用XMLHttpRequest发送Ajax请求---->将请求发送到服务器 用 XHR 对象的 open() 和 send() 方法
function sendRequest(url, params){
// 1创建 XMLHttpReq对象（先调用，使xmlHttpReq初始化）
createXmlHttpRequest();
// 2向服务器发送请求---->设置发送请求相关属性
xmlHttpReq.open("POST",url,true);// 2.1 规定请求的类型、URL 以及是否异步处理请求。
xmlHttpReq.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 2.2设置Http请求头
xmlHttpReq.send(params); // 2.3 将请求发送到服务器 发送数据
// Part3 使用回调函数 处理服务器返回的数据
xmlHttpReq.onreadystatechange = function() {
if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200){
// Part4 数据解析 ---> 把数据渲染到HTML页面上
var res = xmlHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.nodeValue; // nodeValue 返回元素值
window.alert(res);
}
}
} // 登录点击事件方法
function login(){
var uname = $("uname").value;
var upass = $("upass").value;
var params = "uname=" + uname + "&upass=" + upass;
sendRequest("01_ajax.do",params);
}
01_ajax.js
3.java文件
package com.lsy.ajaxtest1; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; // 服务器端 ---> ervlet @WebServlet("/01_ajax.do")
/*只要在Servlet上设置@WebServlet标注，容器就会自动读取当中的信息。上面的@WebServlet告诉容器，
如果请求的URL是“/01_ajax.do”，则由HelloServlet的实例提供服务。可以使用@WebServlet提供更多信息*/
public class AjaxServelet_01 extends HttpServlet { private static final long serialVersionUID = 4776153483702612333L; /**服务器端要做怎样的操作
* 1、获得数据（请求）
* 2、返回数据（响应）
**/
@Override
protected void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
request.setCharacterEncoding("utf-8"); //请求的中文处理
response.setCharacterEncoding("utf-8"); //响应的中文处理
response.setContentType("text/xml;charset=utf-8"); //响应类型的设置
PrintWriter out = response.getWriter(); //输出流（字符流），输出xml格式数据 String uname = request.getParameter("uname");
String upass = request.getParameter("upass"); // System.out.println(uname + "---" + upass);
// String xml = "<response><res>欢迎光临...</res></response>";
StringBuffer xml = new StringBuffer();
xml.append("<response>");
if("zs".equals(uname) && "123".equals(upass)) {
xml.append("<res>欢迎光临...</res>");
}else {
xml.append("<res>输入信息有错！</res>");
}
xml.append("</response>");
out.println(xml.toString());
out.flush();
out.close(); //输出流关闭
}
}
AjaxServelet_01.java
AJAX - 实现一个简单的登录验证的更多相关文章
- Web开发技术---简单的登录验证
制作一个APP或系统最基础的是登录界面,下面通过一个简单的登录注册界面的程序,来熟练掌握Web开发的技术. 一.知识点: 1.在网页界面获取用户的输入信息 2.标签的基本应用 3.用户输入结果的错误提 ...
- Asp.Net WebApi一个简单的Token验证
1.前言: WebAPI主要开放数据给手机APP,Pad,其他需要得知数据的系统,或者软件应用.Web 用户的身份验证,及页面操作权限验证是B/S系统的基础功能.我上次写的<Asp.Net MV ...
- 第四章 .net core做一个简单的登录
项目目标部署环境:CentOS 7+ 项目技术点:.netcore2.0 + Autofac +webAPI + NHibernate5.1 + mysql5.6 + nginx 开源地址:https ...
- asp.net 一个简单的登录控制
如果说一个网站需要用户登录后才能浏览,那么用户登录控制就不可避免.但是对于几百个以上的页面,不可能每个页面都做一次登录验证.因此,这需要在母版页中进行登录控制,这样就可以使得每一个使用这个母版页的子页 ...
- jmeter 压力测试（一）一个简单的登录
写在最前面,之所以记录这个最最简单的http的登录,是因为捣鼓了一天,真的是找错也找不错了,后来请教的同事,重新写了一个ok了,最后发现竟然是因为[http信息头]写的有问题,简直是!!醉了 如下,这 ...
- SSM框架完成Ajax简单用户登录验证
一.前端JSP <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...
- struts-spring-mybatis实现最简单的登录验证
1.导入项目相关的jar包 2.建立项目结构 3.配置文件的配置及代码 db.properties: jdbc.driver=com.mysql.jdbc.Driverjdbc.url=jdbc:my ...
- 7. Swift 基于Xmpp和openfire实现一个简单的登录注册
1. 基本步骤:首先导入Xmpp框架,配置环境 ->由于我们使用的是OC的Xmpp框架,再进行Swift开发时需要进行桥接. 具体方法就是创建一个基于c的.h的头文件,然后将我们需要编译OC的语 ...
- node.js 实现一个简单的登录拦截器
拦截器在web开发中随处可见,比如站点的管理后台,不说所有人都能进入,所以就需要做一个拦截器并友好的跳转到提示页. 下面我们简单实现一种,判断用户是否登录成功,登录不成功的用户自动重定向到登录页面. ...
随机推荐
- gay绿论第一章两点注意事项
1.不可能事件的概率为0,但概率为0的事件不一定是不可能事件,例如从自然数中取一个数结果是1的概率,从极限角度看,分子是1,分母是∞,结果是0,但它显然是有可能发生的,所以不是不可能事件. 2.两事件 ...
- 为什么需要bootloader
本文链接:https://blog.csdn.net/u012351051/article/details/50557899 受单片机和ARM7等小型CPU设备编程思维的影响,开始对嵌入式linux和 ...
- pandas.DataFrame.drop_duplicates 用法说明
DataFrame.drop_duplicates(subset=None, keep='first', inplace=False) subset考虑重复发生在哪一列,默认考虑所有列,就是在任何一列 ...
- MaxCompute Studio 使用入门
MaxCompute Studio 是MaxCompute 平台提供的安装在开发者客户端的大数据集成开发环境工具,是一套基于流行的集成开发平台 IntelliJ IDEA 的开发插件,可以帮助您方便地 ...
- delegate operator (C# reference) and => operator (C# reference)
The delegate operator creates an anonymous method that can be converted to a delegate type: C#CopyRu ...
- 大数据分析：hadoop工具
一.hadoop工具 Hadoop介绍: Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储 ...
- 安卓环境home assistant搭建
准备搞个智能家居玩玩 先从home assistant(后面简写为HASS)开始吧 莫得树莓派,拿旧手机凑活一下 准备材料: root过的安卓机 一.安卓机Linux环境搭建 个人习惯不详细写基础环境 ...
- 【HDOJ6667】Roundgod and Milk Tea（模拟）
题意:有n个班级,每个班级有a[i]个人,b[i]杯奶茶 每个人至多喝一杯奶茶,且不能喝自己班的 问能喝到奶茶的最多总人数 n<=1e6,a[i],b[i]<=1e9 思路: 做法一: # ...
- 31 October
https://www.cnblogs.com/RabbitHu/p/51nod1353.html 树形 DP 求所有联通块 \(\ge K\) 的方案数. 切断:\(\forall i\in\lef ...
- vue实现动态显示与隐藏底部导航的方法分析
本文实例讲述了vue实现动态显示与隐藏底部导航的方法.分享给大家供大家参考,具体如下: 在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显 ...