Ajax登录效果源码

最新推荐文章于 2022-04-05 19:25:11 发布

原创最新推荐文章于 2022-04-05 19:25:11 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #源码

javaweb 同时被 2 个专栏收录

4 篇文章

订阅专栏

Ajax

1 篇文章

订阅专栏

这篇博客分享了如何使用Ajax技术实现用户登录时的交互效果，包括无刷新验证和信息反馈。

用户登录信息

用户名：

密码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>用户登录</title>
<script type="text/javascript" src="jq/jquery-1.8.3.js"></script>

<script type="text/javascript">
<!-- 第一种方法，比较简洁 --!>

$(function() {
		//失去焦点事件
		$("#userId").blur(function() {
	
			$.get("AdminServlet", {
				name : $(this).val()
			}, function(msg) {
				if(msg=="1") {
					$("#s").html("用户名正确").css("color", "green");
				} else {
					$("#s").html("用户名不正确").css("color", "red");
				}

			})
		})
	})

	
<!-- 第二种方法，即Ajax的源码 --!>
	var xhr;
	//1. 创建XMLHttpRequest对象的函数
	function getXMLHttpRequest() {
		if (window.XMLHttpRequest) {
			return new XMLHttpRequest();
		}
	}
	//2. 文本框失去焦点事件
	function userValidate(name) {
		//获取 XMLHttpRequest
		xhr = getXMLHttpRequest();
		var userName = name.value;
		//初始化
		xhr.open("POST", "AccountSer?name=" + userName, true);
		//设置回调函数 
		xhr.onreadystatechange = resultData;
		xhr.send("");
	}

	//3. 回调函数
	function resultData() {
		var span = document.getElementById("s");
		if (xhr.readyState == 4) { //服务返回状态
			if (xhr.status == 200) { //服务端正确返回
				//接收返回的数据
				if (xhr.responseText == "1") {
					span.style.color = "green";
					span.innerHTML = "用户名正确";
				} else {
					span.style.color = "red";
					span.innerHTML = "用户名错误";
				}
			}
		}
	}
	
</script>
</head>

<body>
	<h2>用户登录信息</h2>
	<form>
		<p>
		
			用户名：<input type="text" name="user" id="userId" >
			<span id="s"></span>
		</p>
		<p>
			密   码：<input type="password" name="userPwd">
		</p>
		<p>
			<input type="submit" value="登 录" />
		</p>
	</form>
</body>
</html>