ajax的简单表单登录异步验证

最新推荐文章于 2021-08-05 16:30:33 发布

lenks124

最新推荐文章于 2021-08-05 16:30:33 发布

阅读量5.9k

点赞数 3

分类专栏： ajax 文章标签： ajax 简单表单账户登录异步验证

本文链接：https://blog.csdn.net/u011358195/article/details/83449767

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AJAX

解释：Asynchronous JavaScript And XML 异步的JavaScript和XML

AJAX是多个技术的联合产物是浏览器客户端上的前端技术 PHP .NET C# Python 等

注意：只要做web开发，B/S架构，都要学习。不管服务器编程语言

通俗理解：

看视频时，看到一半的时候，网页视频已经缓存完毕，这时候如果登录的话，只会在账户小范围等部分刷新，不用完全刷新页面。

百度地图的扩大等，只会扩大小范围，不会涉及到全局

多个下拉列表的联动，通过ajax，可以实时更新下一个列表的内容，不需要把全部的数据发送到客户

经典案例：

Google的输入框自动补全 auto_complete

Google的谷歌地图

浏览器本身软件也是支持多线程并发的，其中的ajax请求就是一个线程，一个页面可以可以发送多个请求

传统请求：

请求只要一发送，浏览器数据全部清除，准备迎接新的页面
如果上一个请求未完成，新的请求开始，则会放弃上个请求操作
传统请求会刷新整个页面，会造成一定时间的空白

AJAX操作 ：

用户登录功能，输入错误的话，会在下面提示用户输入错误等，不会重新刷新页面，只刷新下面的块元素等。
用户请求不会间断，用户可以继续操作。在页面的其他地方继续操作

AJAX的发送请求全靠浏览器内置的这个对象：XMLHttpRequest 对象.

使用这个对象可以在浏览器中单独起用一个线程，通过浏览器线程发送该请求，达到异步效果

base标签可以用来设置基础地址<base href=""+>
${pageCOntext.request.scheme}---协议方式 如https
${pageCOntext.request.serverName}---服务器名字
${pageCOntext.request.serverPort}--- 服务器端口
${pageCOntext.request.contextPath}--- 基础路径

发送ajax的请求包含四步：

创建ajax核心对象，XMLHttpRequest，（浏览器内置的，可以直接使用）；

var xhr = new XMLhttpRequest();

注册回调函数

// 程序执行到这里的时候，后面的回调函数并不会执行，只是将回调函数注册给xhr对象
// xhr的对象发生改变的时候，后面的回调函数会执行 
/*
 * 对象在请求和响应的过程中，从 0 到 4
 * 0: 请求未初始化
 * 1: 服务器连接已建立
 * 2: 请求已接收
 * 3: 请求处理中
 * 4: 请求已完成，且响应已就绪
 */
 xhr.onreadystatechange = function(){
     // xhr 对象改变的时候，执行该函数（回调）
     if(xhr.readyState == 4){// 服务端响应结束
         if(xhr.status == 200){// 200表示服务器正常响应结束
             // 接收返回来的响应文本
             var s = xhr.responseText;
             alert(s);
         }else{
             //弹出错误代码
             alert(xhr.status);
         }
     }
 }
 // 给按钮对象注册一个单击事件，鼠标单击时，回调函数
 myBtn.onclick = function(){}

开启浏览器与服务器之间的通道

method:指定请求方式为get或post
url：请求路径
async:true/false 支持异步/支持同步
xhr.open("GET","/checkusername.do?username="+username,true);// 这里只开启通道，不发送请求

发送ajax请求

xhr.send();//这里才会发送请求

简单案例

用户名：<input type="text" name="username" onblur="checkUsername(this.value);">
<span id="nameTipMsg"></span>
<script type="text/javascript">
    function checkUsername(username){
        // 发送ajax请求，验证用户名是否可用
    }

</script>

表单案例

JSP页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登陆页面</title>
</head>
<script type="text/javascript">
	function userLogin() {
		//发送ajax Post 请求完成登陆
		// 获取用户名和密码
		var username = document.getElementById("username").value;
		var password = document.getElementById("password").value;
		var msg = document.getElementById("tipMsg");
		msg.innerHTML = "正在进行身份认证，请稍候";
		// 创建ajax核心对象
		var xhr = null;
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}

		// 注册回调函数
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4) {
				if (xhr.status == 200) {
					// 接收服务器端发送的数据
					// 假设服务器响应的是JSON格式的数据
					var jsonString = xhr.responseText;
					// 变成json对象
					eval("var jsonObj=" + jsonString);// 
					
					if (jsonObj.success) {
						// 登录成功
						//document.location="list.do"
						msg.innerHTML = "登录成功";
					} else {
						msg.innerHTML = "用户名不存在或密码错误";
					}
				}
			}
		}
		// 开启通道
		// 注意，例如用户注册页面，表单项可以设置为true，使用异步验证.
		// 但是注册按钮必须使用同步，为的是提交按钮的时候，锁住页面，不允许操作
		xhr.open("POST", "/ajax/login.do", true);
		// 发送POST请求，必须使用表单提交，只有form表单才能提交post请求
		// 使用post请求必须使用以下代码
		// ajax post请求的乱码 需要在这里处理，注意 字符集需要和浏览器和服务器字符集相同
		xhr.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded;charset=UTF-8");// 模拟表单提交数据

		// 发送请求
		// post 请求数据在send 中提交 
		xhr.send("username=" + username + "&password=" + password);

	}
</script>




<body>
	<h1 align="center">用户登录</h1>
	<hr>
	<form action="" enctype="application/x-www-form-urlencoded"></form>
	用户名:<input type="text" id="username" size="40"><br> 
	密&#12288;码:<input type="password" id="password" size="40"><br>
	<input type="button" value="登录" onclick="userLogin();" /><br>
	<span id="tipMsg" style="font-size: 12px; color: red;"></span>
</body>
</html>

servlet 页面：

package cn.lenk.ajax;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import cn.lenk.bean.User;

/**
 * Servlet implementation class UserLogin
 */
@WebServlet("/login.do")
public class UserLogin extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public UserLogin() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		// 获取用户名和密码
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		User user = null;
		if(username !=null && password!=null) {
			if(username.equals("lenks") && password.equals("123")) {
				user = new User();
				user.setAddress("河北省保定市");
				user.setId("0001");
				user.setName(username);
				
			}
		}
		StringBuilder json = new StringBuilder();
		if(user!=null) {
			HttpSession session = request.getSession();
			session.setAttribute("user", user);
			json.append("{\"success\":true}");
		} else {
			json.append("{\"success\":false}");
		}
		// 响应json
		response.getWriter().print(json);
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

lenks124

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
ajax的简单表单登录异步验证

AJAX解释：Asynchronous JavaScript And XML 异步的JavaScript和XMLAJAX是多个技术的联合产物是浏览器客户端上的前端技术 PHP .NET C# Python 等注意：只要做web开发，B/S架构，都要学习。不管服务器编程语言通俗理解：看视频时，看到一半的时候，网页视频已经缓存完毕，这时候如果登录的话，只会在账户小范围等部分刷...
复制链接

扫一扫

专栏目录