Java EE中Ajax技术实例

下面，我们使用Ajax技术实现登录验证问题：

在这里，我通过两个例子进行实验说明，在开始之前，我们需要知道ajax的一些基本知识：

如下面代码：

<script type="text/javascript">function ajax(){//获取监听时间的对象var username=document.getElementById("username").value;console.log(username);//创建XMLHttpRequest对象var ajax=new XMLHttpRequest();//准备请求，这就是要请求的页面，注意这里，这里有两种传值方式，也就是常见的post和get方式，在这个例子里，我们使用post方式传值var url="Ajax_msg";ajax.open("post",url, true); //准备响应，设置文件格式ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");ajax.onreadystatechange=function(){console.log(ajax.readyState);if(ajax.readyState==4 && ajax.status==200){//数据过来，这里是接受到的数据var data=ajax.responseText;//获取要将数据放在哪个位置var spanText=document.getElementById("usernameresult");spanText.innerHTML=data;}}  ajax.send("username="+username);}
</script>

我们首先创建一个方法，当我们的鼠标发生响应时间的时候，我们就能够进行响应，实现动作，如代码注释所示，我们能够清楚的理解各个步骤能够起什么作用

下面我们就将这段js代码嵌入到页面中，如下面页面所示：

<!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>Ajax_msg.html</title>
<script type="text/javascript">function ajax(){//获取监听时间的对象var username=document.getElementById("username").value;console.log(username);//创建XMLHttpRequest对象var ajax=new XMLHttpRequest();//准备请求，这就是要请求的页面，这就是要提交的地址，也就是一个servletvar url="Ajax_msg";ajax.open("post",url, true); //准备响应，设置文件格式ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");ajax.onreadystatechange=function(){console.log(ajax.readyState);if(ajax.readyState==4 && ajax.status==200){//数据过来，这里是接受到的数据var data=ajax.responseText;//获取要将数据放在哪个位置var spanText=document.getElementById("usernameresult");spanText.innerHTML=data;}}  ajax.send("username="+username);}
</script>
</head>
<body >
<div align="center"><h3>Ajax_msg测试----post</h3><hr>用户名：<input type="text" id="username" name="username" οnblur="ajax();"/><span id="usernameresult"></span>
</div>
</body>
</html>

其显示效果如下所示：

然后我们实现类servlet------Ajax_msg.java,用于接收ajax提交的数据,如下面所示：

package com.briup.ajax_msg;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;/*** Servlet implementation class Ajax_msg*/
@WebServlet("/Ajax_msg")
public class Ajax_msg extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//对获取的数据进行编码格式的处理request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");//获取提交的数据，这个数据是ajax.send("username="+username);提交过来的String username=request.getParameter("username");PrintWriter out=response.getWriter();//进行设置判断，然后进行数据的处理，将数据写回到ajax,再通过Ajax进行将数据显示到页面上if("张三".equals(username)){System.out.println("用户名已存在");out.println("<font color=red>用户名已存在</font>");}else{out.println("用户名可用");System.out.println("<font color=blue>用户名可用</font>");}}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}

最后我们能够实现局部刷新，当我们输入姓名时，能够对数进行判断，显示效果如下所示：

用户名已存在时的效果

用户名不存在时的效果

下面，我们在实现一个验证登录的效果：

首先，我们需要知道，基本的页面是：首页面（Login.jsp）、登陆成功页面（LoginSuccess.jsp）、登录失败页面(LoginFail.jsp)、Servlet判断代码(LoginServlet.java)

其中，Login.jsp页面代码如下所示：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><body><SCRIPT LANGUAGE="JavaScript">function login() {var user = document.loginForm.user.value;//获取表单中的值var pass = document.loginForm.pass.value;var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//初始化IE浏览器，即步骤一var url = "./LoginServlet?user=" + user + "&pass=" + pass;//这里通过get方式提交，与上面的提交方式 不同xmlHttp.open("get", url, true);xmlHttp.onreadystatechange = function(){if (xmlHttp.readyState === 4){resultDiv.innerHTML = xmlHttp.responseText;}else{resultDiv.innerHTML += "正在登录，请稍候……";}};xmlHttp.send();}</SCRIPT><marquee>欢迎登录资料管理系统</marquee><hr><div id="resultDiv" style="text-align:center"><form name="loginForm">请您输入账号：<input type="text" name="user"><BR>请您输入密码：<input type="password" name="pass"><BR><input type="button" value="登录" οnclick="login()"></form></div></body></html>

LoginSuccess.jsp页面代码如下所示：

<%@ page language="java" contentType="text/html; charset=utf-8"%><html><body><div font="楷体">欢迎${user}登录成功！</div><BR><hr>您可以选择以下功能：<BR><a href="#">查询资料</a><BR><a href="#">修改资料</a><BR><a href="#">删除资料</a><BR><a href="#">退出</a><BR></body></html>

LoginFail.jsp页面代码如下所示：

<%@ page language="java" contentType="text/html; charset=utf-8"%><html><body>对不起，${user}登录失败！<BR>请您检查是否：账号名或密码写错</body></html>

Servlet验证代码LoginSuccess.java，在该Servlet中，进行了数据验证，如果登录成功，跳转到LoginSuccess.jsp,登录失败，跳转到LoginFail.jsp代码如下所示：

package servlets;//包名称
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class LoginServlet extends HttpServlet {protected void processRequest(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=UTF-8"); //设置编码为UTF-8      String user=request.getParameter("user");//在控制台打印用户名和密码String pass=request.getParameter("pass");System.out.println("user:"+user);System.out.println("pass:"+pass);HttpSession session=request.getSession();//使用Session保存用户名，用于登录成功之后显示用户名session.setAttribute("user",user);        if(user.equals(pass))//进行简单的验证{response.sendRedirect("LoginSuccess.jsp");           }else{response.sendRedirect("LoginFail.jsp");}               }// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">/*** Handles the HTTP <code>GET</code> method.** @param request servlet request* @param response servlet response* @throws ServletException if a servlet-specific error occurs* @throws IOException if an I/O error occurs*/@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {processRequest(request, response);}/*** Handles the HTTP <code>POST</code> method.** @param request servlet request* @param response servlet response* @throws ServletException if a servlet-specific error occurs* @throws IOException if an I/O error occurs*/@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {      processRequest(request, response);}/*** Returns a short description of the servlet.** @return a String containing servlet description*/@Overridepublic String getServletInfo() {return "Short description";}// </editor-fold>
}

以上就是各部分代码，其实现效果如下面所示：

1、登录界面

2、登录成功界面

3、登录失败界面

　从以上阐述可以看出，Ajax具有如下优点：

　　1.减轻服务器负担，避免整个浏览器窗口刷新时造成的重复请求。

　　2.带来更好的用户体验。

　　3.进一步促进页面呈现和数据本身的分离等。

　　但是，Ajax也有相应的缺点，主要体现在以下方面：

　　1.对浏览器具有一定的限制，对于不兼容的浏览器，可能无法使用。

　　2.Ajax没有刷新页面，浏览器上的"后退"按钮是失效的，因此，客户经常无法回退到以前的操作等。

以上就是jsp中使用Ajax实现登录验证的实现方法

Java EE中Ajax技术实例相关推荐

Java EE中Ajax技术简单实现
一.Ajax技术介绍 Ajax实际上并不是新技术,而是几个老技术的融合. Ajax包含以下五个部分: 1.异步数据获取技术,使用XMLHttpRequest. 2.基于标准的表示技术,使用XHTML与 ...
java面试技术问题_11个JAVA面试中常见技术问题
原标题:11个JAVA面试中常见技术问题大家在平常面试java的过程中都会遇到哪些难题呢?还有一些即将去面试java的童鞋们,你们想知道技术面试中会涉及到哪些点吗?达妹为你整理Java面试中会被问到 ...
java 控制jsp_JSP学习之Java Web中的安全控制实例详解
普通用户界面修改登录的Servlet,修改后的代码如下: LoginProcess.java代码: package servlet; import javabean.User; import jav ...
Quartz-2.2.1 任务调度框架在Java项目中的使用实例
< Quartz-2.2.1 任务调度框架在Java项目中的使用实例 > 本实例是基于Quartz 2.2.1 版本为中心,也是目前最新的Quartz任务调度框架. 目前在 J2EE 项目 ...
openshift_OpenShift上的Java EE工作流（技术提示＃64）
openshift 该网络研讨会展示了如何使用WildFly , JBoss Tools , Forge , Arquillian和OpenShift在OpenShift上创建Java EE工作流. ...
OpenShift上的Java EE工作流（技术提示＃64）
该网络研讨会展示了如何使用WildFly , JBoss Tools , Forge , Arquillian和OpenShift在OpenShift上创建Java EE工作流. 具体来说,它谈论: ...
Web 2.0中AJAX技术应用详解[转]
今年互联网上比较火热的话题当然是关于WEB2.0的应用,其中AJAX又是WEB2.0的核心之一.AJAX是Asynchronous JavaScript and XML 的缩写.它并不是一门新的语言或 ...
java ee包含哪些技术_JavaEE基本了解
标签: 1. 为什么需要JavaEE 我们编写的JSP代码中,由于大量的显示代码和业务逻辑混淆在一起,彼此嵌套,不利于程序的维护和扩展.当业务需求发生变化的时候,对于程序员和美工都是一个很重的负担. ...
Java代码中常见技术债务处理之Exception
写在前面异常处理是代码中常见的处理,本文根据SonarQube在异常方面的规则和常见检查结果,选取说明了常见异常处理中的技术债务,提倡技术债务最少的编码方式. Exception handlers ...

Java EE中Ajax技术实例

Java EE中Ajax技术实例相关推荐

最新文章

热门文章