Struts2 Ajax校验
Ajax(Asynchronous javascript and xml)：异步刷新技术
技术组成：
CSS + xml +JavaScript +DOM
Ajax核心对象： XMLHttpRequest
应用场景：实现页面的局部刷新
Ajax:异步刷新技术
XMLHttpRequest的常用方法
XMLHttpRequest的常用属性：
readystate：XMLHttpRequest的状态信息
onreadystatechange：设置回调函数
status：返回当前请求的Http状态码
responseText：以文本形式获取相应之
responseXML:以XML形式获取响应值，并且解析成DOM对象返回
statusText:返回当前请求的响应行状态
使用Ajax发送GET请求及处理响应
在index.jsp 验证用户是否存在
步骤：
1.创建XMLHttpRequest对象
2.设置回调函数
3.初始化XMLHttpRequest对象
4.发送请求
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
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"> //给文本框注册一个失去焦点事件
window.onload=function(){
var dom=document.getElementById("txtName");
dom.onblur=function(){
myajax();
}; }; function myajax(){ //01.定制出 xhr对象
var xhr;
//02.能力检测
if(window.XMLHttpRequest){
//非IE浏览器
xhr=new XMLHttpRequest();
}else{
//IE内核
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
var dom=document.getElementById("txtName");
var myspan=document.getElementById("msg");
var myval=dom.value;
//03.构建请求地址
//xhr.open("请求类型","请求地址","是否异步");
xhr.open("get","<%=path%>/servlet/CheckUserServlet?uname="+myval,true); //04.设置回调函数 响应回来的数据
xhr.onreadystatechange=function(){
//什么
if(xhr.readyState==4&&xhr.status==200){
//获取响应数据
var data=xhr.responseText;
if(data=='OK'){ myspan.innerText="用户名已经被注册";
}else{ myspan.innerText="用户名可以注册";
}
}
}; //05.用send真正的发送请求
xhr.send(null); } </script>
</head> <body>
<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>
<input type="password" name="txtPwd"/>
</body>
</html>
通过XMLHttpRequest的返回值判断当前浏览器创建XMLHttpRequest对象的方式。如果为true，说明是其他浏览器；如果为false，说明是ie浏览器，需使用new ActiveXObject("Microsoft.XMLHttp")对象
通过XMLHttpRequest对象的onreadystatechange属性设置回调函数，用于当请求成功后接收服务器端返回的数据
通过XMLHttpRequest对象的open()方法，传入参数完成初始化XMLHttpRequest对象的工作。第一个参数为Http请求方式，选择发送Httpget 请求，因此参数为get。第二个参数为要发送的url请求路径，将要发送的数据附加到url路径后面
调用XMLHttpRequest对象的send()方法，参数为要发送到服务器端的数据，因为采用"get"方式请求时，参数已经附加到url路径后，所以直接设置为null。如果send()方法不设值，在不同的浏览器下可能存在不兼容问题。
servlet
package cn.servlet; import java.io.IOException; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class CheckUserServlet extends HttpServlet { /**
* hh
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { doPost(request, response);
} /**
*hh
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { String uname=request.getParameter("uname");
if(uname.equals("admin")){
response.getWriter().write("OK");
}else{
response.getWriter().write("NO");
}
} }
效果：
如果用户名不等于admin，显示用户可以注册；等于admin，显示用户已经被注册
使用Ajax发送post请求及处理响应
| 发送方式 | 步骤三：初始化XMLHttpRequest对象 | 步骤四：发送请求 |
| get | 指定XMLHttpRequest对象的open()方法中method参数为“get” | 指定XMLHttpRequest对象的send()的data参数为“null” |
| post |
1.指定XMLHttpRequest对象的open()方法中method参数为“post” 2.指定XMLHttpRequest对象要请求的Http头信息，该Http请求头信息为固定写法 |
指定XMLHttpRequest对象的send()的data参数的值，即该请求需要携带的具体数据 |
需注意采用get方式发送请求时，XMLHttpRequest.send()方法不需要传递参数，设为null即可；采用post方式发送请求时，XMLHttpRequest.send()方法中指定传递的参数
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
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>Ajax验证用户名是否存在 post发生请求</title>
<script type="text/javascript"> //给文本框注册一个失去焦点事件
window.onload=function(){
var dom=document.getElementById("txtName");
dom.onblur=function(){
myajax();
}; }; function myajax(){ //01.定制出 xhr对象
var xhr;
//02.能力检测
if(window.XMLHttpRequest){
//非IE浏览器
xhr=new XMLHttpRequest();
}else{
//IE内核
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
var dom=document.getElementById("txtName");
var myspan=document.getElementById("msg");
var myval=dom.value;
//03.构建请求地址
//xhr.open("请求类型","请求地址","是否异步");
xhr.open("post","<%=path%>/servlet/CheckUserServlet?uname="+myval,true); //04.设置回调函数 响应回来的数据
xhr.onreadystatechange=function(){
//什么
if(xhr.readyState==4&&xhr.status==200){
//获取响应数据
var data=xhr.responseText;
if(data=='OK'){ myspan.innerText="用户名已经被注册";
}else{ myspan.innerText="用户名可以注册";
}
}
}; //05.用send真正的发送post请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("uname"+myval); } </script>
</head> <body>
<h1>Ajax验证用户名是否存在 post发生请求</h1>
用户名：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>
密码：<input type="password" name="txtPwd"/>
</body>
</html>
效果：
Struts2 Ajax校验的更多相关文章
- Struts2数据校验
Struts2数据校验 1.常见数据校验方法 表单数据的校验方式: 表单中的数据必须被效验以后才能够被使用,常用的效验方式分为两种: 前台校验:也称之为客户端效验,主要是通过JS编程的方式进行表单数据 ...
- Struts2 更改校验配置文件位置
@(Java)[Struts|Interceptor] Struts2 更改校验配置文件位置 在Struts2中提供的拦截器校验ValidationInterceptor,该校验器中默认的配置文件位于 ...
- ssh整合问题总结--使用struts2+Ajax+jquery验证用户名是否已被注册
在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax时候,通常我们会返回json类型的数据,但是像上面 ...
- struts2 自定义校验规则
自定义校验规则:(了解) 在Struts2自定义校验规则: 1.实现一个Validator 接口. 2.一般开发中继承ValidatorSupport 或者 FieldValidatorSupport ...
- struts2 + ajax + json的结合使用，实例讲解
struts2用response怎么将json值返回到页面javascript解析,这里介绍一个struts2与json整合后包的用法. 1.准备工作 ①ajax使用Jquery:jquery-1.4 ...
- Struts2输入校验
1.编写校验规则文件 (<ActionName>-validation.xml),文件放在Action类文件相同的路径下校验失败返回input的result. <vali ...
- struts2+ajax实现异步验证实现
由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示.我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在 ...
- struts2+ajax实现异步验证
由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示.我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在 ...
- struts2 之 struts2数据校验
1. 数据校验一般分为2类:前端的校验(js校验),后端的校验(java代码):实际开发中大部分情况下都是采用js校验.在对数据安全要求较高的情况下可能会采用后端验证. 2. Struts2提供了后 ...
随机推荐
- 用Fiddler做为手机的上网代理
1. 首先需要知道你电脑的ip地址,这个略. 2. 打开手机,wifi那里,选择你的路由器,编辑或者设置,每个手机叫法不一样,点进去 到了里面,每个手机不一样,但是大致上,有一个[使用代理]的这么一个 ...
- PHP函数之自定义函数
像数学中的函数一样,y=f(x)是函数基本的表达形式,x可看做是参数,y可看做是返回值,即函数定义就是一个被命名的.独立的代码段,它执行特定的任务,并可能给调用它的程序返回一个值. 自定义函数 函数的 ...
- 从零开始学 Java - 搭建 Spring MVC 框架
没有什么比一个时代的没落更令人伤感的了 整个社会和人都在追求创新.进步.成长,没有人愿意停步不前,一个个老事物慢慢从我们生活中消失掉真的令人那么伤感么?或者说被取代?我想有些是的,但有些东西其实并不是 ...
- Xdebug文档（七） 远程调试
Xdebug提示调试客户端接口与PHP运行相联系.该章节解释如何设置PHP与xdebug,并推荐一些客户端. 介绍 Xdebug的远程调试器允许你检查数据结构,交互式地穿过和调试你的代码.该协议已经开 ...
- 《IBM BPM实战指南》读书笔记
理论 BPM不是一个IT术语,更不是因技术的发展而起源的,相反,BPM自始至终都是管理学的术语和概念.它关注的一直都是效率.成本.利润.质量等核心问题.BPM是一门学科和一种方法论,只是现代的企业管理 ...
- CSS3 float深入理解浮动资料整理
CSS浮动(float,clear)通俗讲解 CSS 浮动 CSS float浮动的深入研究.详解及拓展(一) CSS float浮动的深入研究.详解及拓展(二) 1.浮动实现图文环绕(理解难点) 浮 ...
- 《C#微信开发系列（1）-启用开发者模式》
1.0启用开发者模式 ①填写服务器配置 启用开发模式需要先成为开发者,而且编辑模式和开发模式只能选择一个(进入微信公众平台=>开发=>基本配置)就可以看到以下的界面: 点击修改配置,会出现 ...
- HotApp小程序统计之如何接入
1.统计接入留存说明 更详细的说明,可以查看官网的文档 https://weixin.hotapp.cn/document 统计接入流程只需要4步 (1)注册账号 打开http://weixin.h ...
- git rebase与 git合并（error: failed to push some refs to）解决方法
1.遇到的问题 本地有一个git仓库,在github上新建了一个空的仓库,但是更新了REWADME.md的信息,即在github上多了一个提交. 关联远程仓库,操作顺序如下: git remote a ...
- 【转】Hadoop命令大全
Hadoop命令大全 本节比较全面的向大家介绍一下Hadoop命令,欢迎大家一起来学习,希望通过本节的介绍大家能够掌握一些常见Hadoop命令的使用方法.下面是Hadoop命令的详细介绍. 1.列出所 ...