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

AJAX:Asynchronous JavaScript And XML

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

效果:


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代码的经历:繁杂而又易出错的语言。类似的,它也被认为将应用逻辑任意地散布在服务端和客户端中,这使得问题很难被发现而且代码很难重用。在AJAX中JavaScript主要被用来传递用户界面上的数据到服务端并返回结果。XMLHttpRequest对象用来响应通过HTTP传递的数据,一旦数据返回到客户端就可以立刻使用DOM将数据放到网面上.


onreadystatechange:


readyState:


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



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值