AJAX在JSP中的应用

最新推荐文章于 2024-09-06 12:37:27 发布

领域：神

最新推荐文章于 2024-09-06 12:37:27 发布

阅读量1.5k

点赞数

文章标签： java

本文链接：https://blog.csdn.net/suzhuhua/article/details/124414183

版权

本文详细介绍了如何使用Ajax实现实时用户登录，通过前端表单提交用户名和密码，不刷新页面直接与LoginServlet交互验证，提升用户体验。涉及XMLHttpRequest对象的使用、POST请求及服务器端Java Servlet的响应处理。

摘要由CSDN通过智能技术生成

ajax的应用性很广泛，它可以不刷新页面，给用户一个良好的体验。

这里我们实现一个小小的用户登录方法（代码如下）

首先先创建一个简单的登录页面，并有以下属性。

<body>
	<form action="">
		用户名：<input type="text" id="uname"><br>
		密码：<input type="password" id="upwd" onblur="login()"><br>
		<span id="sp"></span>
		<input  type="submit" value="登录">
		<input  type="reset" value="重置">
		
	</form>
</body>

在建立一个login方法（代码如下）

function  login() {
		//接收用户名
		var uname = document.getElementById("uname").value;
		var upwd = document.getElementById("upwd").value;
		//声明一个xmlhttpRequest对象
		var xmlhttp;
		try{
			xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
		}
		catch(e){
			xmlhttp=new XMLHttpRequest();
		}
		//连接服务器
		xmlhttp.open("post","LoginServlet?uname="+uname+"&upwd="+upwd,true);
		//设置请求头信息
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//设置回调函数
		xmlhttp.onreadystatechange=function(){
			//判断请求响应结束
			if(xmlhttp.readyState==4){
				//服务器正常
				if(xmlhttp.status==200){
					//接收响应的数据
					var str = xmlhttp.responseText;
					if(str=="ok"){
						document.getElementById("sp").innerHTML="✔";
					}else{
						document.getElementById("sp").innerHTML="×";
					}
				}
			}
		}
		//发送
		xmlhttp.send(null);
	}

通过连接服务器进行传值，传到LoginServlet页面传过去了uname,upwd(也就是用户名和密码)，在

LoginServlet页面进行接收传值。

以下是LoginServlet页面代码。

//接收数据
		String uname = req.getParameter("uname");
		String upwd = req.getParameter("upwd");
		resp.setCharacterEncoding("utf-8");
		//获取响应的 输出流
		UserDao ud=new UserDao();
		User u=ud.login(uname, upwd);
		PrintWriter out = resp.getWriter();
		if(u==null) {
			out.print("ok");
			System.out.print("ok");
		}else {
			out.print("no");
			System.out.print("no");
		}
		out.close();
	}

接收到值后并判断用户是否已经存在，若存在则输出no，若不存在则输出ok,在传回login页面。

最后login页面会根据传回的值进行下一步判断。