Ajax实现注册邮箱的可用性验证-js实现

最新推荐文章于 2019-08-11 16:04:16 发布

魂淡疯轻

最新推荐文章于 2019-08-11 16:04:16 发布

阅读量2.5k

点赞数 1

分类专栏： Html Js 文章标签： ajax asynchronous 邮箱验证

本文链接：https://blog.csdn.net/yazongliu/article/details/12843291

版权

Html 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

用原生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" οnsubmit="retrun formSubmit()">
		<s:textfield name="email" id="email" οnblur="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文件。

魂淡疯轻

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Ajax实现注册邮箱的可用性验证-js实现

用原生js的ajax技术实现注册邮箱的可用性验证。AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用
复制链接

扫一扫

专栏目录