struts2+AJAX实现无刷新进行验证

蔚落 2022-06-15 11:12 166阅读 0赞

AJAX:Asynchronous JavaScript And XML

首先来实现struts2+ajax对数据的不提交验证，后面对知识点进行回顾：

效果：

![Center][]![Center 1][]

jsp页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ taglib uri="/struts-tags" prefix="s"%>
    <%
    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>My JSP 'index.jsp' starting page</title>
     <script type="text/javascript">
     
      var xmlHttp;
      var result = false;
      function checkuser(){//s:textFiled失焦的函数
      var uname = document.all.name.value; // name的值
      if(uname.length<1){//判断用户名的长度是否为空
      document.getElementById("unameMsg")
      .innerHTML="<font color='red'>用户名不能为空！</font>";
      return false;
      }else{
      document.all.unameMsg.innerHTML=
      "<font color='red'>用户名检测中...</font>";
      //创建XMLHttpRequest对象：
      if(window.ActiveXObject){
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE实例
      
      }else if(window.XMLHttpRequest){
       
      xmlHttp = new XMLHttpRequest();//其他浏览器实例
       
      }
      var uri = "login_execute?user="+uname;//将name传到action中user中。
      uri = encodeURI(uri);
      uri = encodeURI(uri);
      xmlHttp.open("post",uri,true);//打开服务器连接
      xmlHttp.onreadystatechange = function(){//回调函数判断当前状态是否是响应状态
      if(xmlHttp.readyState==4){//数据接收完毕
      if(xmlHttp.status==200){//200：服务器成功返回了页面
      alert(xmlHttp.responseText)
      if(xmlHttp.responseText=="true"){//接收out.print的值
      document.all.unameMsg.innerHTML="<font color='red'>该用户名已被使用，请您重新选择用户名！</font>";
      result = false;
      
      }else{
      document.all.unameMsg.innerHTML="<font color='red'>恭喜您，该用户名可用!</font>";
      result = true ;
      }
      }
      }
      
      }
      xmlHttp.send(null);//发送请求
      }
      }
     </script>
      </head>
      <body>
         <s:form name="form1" action="login">
         <s:textfield name="name" label="name" οnblur="checkuser()"></s:textfield>
         <s:div id="unameMsg"></s:div>
         <s:password name="loginpass" label="pwd"></s:password>
         <s:submit value="登陆"></s:submit>
        </s:form>
      </body>
    </html>

action：

package action;
    
    import java.io.PrintWriter;
    
    import javax.servlet.http.*;
    
    import org.apache.struts2.ServletActionContext;
    
    import com.opensymphony.xwork2.*;
    
    public class Login extends SuperAction{
    	private String user;
    	
    	public String getUser() {
    		return user;
    	}
    
    	public void setUser(String user) {
    		this.user = user;
    	}
    	public String execute()throws Exception{
    	HttpServletRequest request = 
    			(HttpServletRequest) ActionContext.getContext()
    			.get(ServletActionContext.HTTP_REQUEST);//获取request
    	HttpServletResponse response = 
    			(HttpServletResponse) ActionContext.getContext()
    			.get(ServletActionContext.HTTP_RESPONSE);
    	PrintWriter out = response.getWriter();
    	if(user=="123"||"123".equals(user)){
    	out.print("true");
    	}
    	else{
    		out.print("false");
    	}
    	out.flush();
    	out.close();
    	//String password = "666";
    	System.out.println("============================="+user);
    	
    	return null;
    	}
    
    }

基本介绍:

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

Ajax对服务器没什么要求，可以为Java EE应用程序，.NET应用程序和其他类型的应用程序服务。可以通过Ajax，可以编写javascript代码来改进HTML，创建出丰富的交互性用户体验

AJAX的概念中最重要而最易被忽视的是它也是一种JavaScript编程语言。JavaScript是一种粘合剂使AJAX应用的各部分集成在一起。在大部分时间，JavaScript通常被服务端开发人员认为是一种企业级应用不需要使用的东西应该尽力避免。这种观点来自以前编写JavaScript[代码][Link 1]的经历：繁杂而又易出错的语言。类似的，它也被认为将应用逻辑任意地散布在服务端和客户端中，这使得问题很难被发现而且代码很难重用。在AJAX中JavaScript主要被用来传递用户界面上的数据到服务端并返回结果。XMLHttpRequest对象用来响应通过HTTP传递的数据，一旦数据返回到客户端就可以立刻使用DOM将数据放到网面上.

![Center 2][]

onreadystatechange:

![Center 3][]

readyState:

![Center 4][]

status:状态码[ajax的状态码含义][ajax]

![nk14b1vb44J45yRcm51j11.jpg][]

[Center]: https://img-blog.csdn.net/20170601145031341?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXE0NDIyNzA2MzY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220615/40e7008c1afd4deea0e263e47530b9e1.png
[Link 1]: https://baike.so.com/doc/4469555-4678399.html
[Center 2]: /images/20220615/7d3489d94dcc4a87b227431925319cd9.png
[Center 3]: /images/20220615/b16c0c13f2bc42b9b6ffc0df0c77d0fa.png
[Center 4]: /images/20220615/d68c6752919a4f80ac718a7c37bf65bd.png
[ajax]: http://www.itxueyuan.org/view/6454.html
[nk14b1vb44J45yRcm51j11.jpg]: http://www.hackbase.com/data/attachment/portal/201704/06/nk14b1vb44J45yRcm51j11.jpg