Java EE中Ajax技术实例

最新推荐文章于 2021-03-19 09:39:32 发布

suwu150

最新推荐文章于 2021-03-19 09:39:32 发布

阅读量2.2k

点赞数 3

本文链接：https://blog.csdn.net/suwu150/article/details/51735768

版权

JavaScript 同时被 3 个专栏收录

56 篇文章 4 订阅

订阅专栏

Java EE企业应用开发

41 篇文章 16 订阅

订阅专栏

Java Web

21 篇文章 1 订阅

订阅专栏

下面，我们使用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();
			//准备请求，这就是要请求的页面，这就是要提交的地址，也就是一个servlet
			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>
</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
     */
    @Override
    protected 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
     */
    @Override
    protected 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
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>
}

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

1、登录界面