用原生js的ajax技术实现注册邮箱的可用性验证。
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
主要用到XMLHttpRequest对象以及该对象的open()、setRequestHeader()、 send()三个方法和onreadystatechange、readyState、status三个属性。
为了方便,这里将js代码与jsp代码放在同一个文件(index.jsp)中,代码如下:
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ 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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<base href="<%=basePath%>">
<script type="text/javascript">
var flag = false;
function checkEmail() {
var xhr;
if (window.XMLHttpRequest) {// code for IE7+,Firefox,Chrome,Opera,Safari
xhr = new XMLHttpRequest();
} else {// code for IE6,IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
//AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
xhr.open("post","user/checkEmail?time=" + new Date().getTime(),true);
//如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("email=" + document.getElementById("email").value);
//当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数.
//在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
xhr.onreadystatechange = function() {
//当请求被发送到服务器时,我们需要执行一些基于响应的任务。
//每当 readyState 改变时,就会触发 onreadystatechange 事件。
//readyState 属性存有 XMLHttpRequest 的状态信息。
//当 readyState 等于 4 且状态为 200 时,表示响应已就绪
if (xhr.readyState == 4 && xhr.status == 200) {
//如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。如果来自服务器的响应并非 XML,请使用 responseText 属性。
var result = xhr.responseText;
if (result == "1") {
document.getElementById("canUse").innerHTML = "邮箱可用";
flag = true;
} else
document.getElementById("canUse").innerHTML = "邮箱不可用";
}
};
}
function formSubmit() {
checkEmail();
return falg;
}
</script>
</head>
<body>
<s:form method="post" action="/user/userReg" theme="xhtml" onsubmit="retrun formSubmit()">
<s:textfield name="email" id="email" onblur="checkEmail()" label="email"></s:textfield>
<s:label id="canUse"></s:label>
<br>
<s:textfield name="pwd" label="pwd"></s:textfield>
<br>
<s:submit value="提交"></s:submit>
</s:form>
</body>
</html>
接下来是UserAction 的代码:
package zong;
import java.io.IOException;
import java.io.Writer;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.interceptor.ServletResponseAware;
public class UserAction implements ServletResponseAware{
public String checkEmail() {
try {
Writer out = response.getWriter();
//a@b.c应该是数据库中已经存在的某个用户的email
if (email.equals("a@b.c"))
out.write("0");
else {
out.write("1");
}
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
public String userReg() {
return "";
}
public String userLogin() {
return "";
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
@Override
public void setServletResponse(HttpServletResponse response) {
this.response = response;
}
private String email;
private String pwd;
private HttpServletResponse response;
}
以及相关配置文件:
struts.xml文件:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<package name="user" namespace="/user" extends="struts-default">
<action name="*" class="zong.UserAction" method="{1}">
</action>
</package>
</struts>
web.xml文件:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<display-name>Archetype Created Web Application</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
最后,别忘了struts2相关的jar文件。
原文链接:https://www.f2er.com/ajax/165713.html