您的位置：首页 > 其它

用ajax异步交互进行注册信息的校验

2017-05-03 21:20 375 查看

用原生的ajax进行校验

js代码:

写在一个ajax.js文件里,然后在jsp页面中引入即可.

function getXHR()
{
var xmlHttp;

try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{

// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{

try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX！");
return false;
}
}
}

return xmlHttp;

}

js中的业务:

window.onload = function() {

document.getElementById("id1").onblur = function() {
if (this.value == "") {
alert("限16个字符，支持中英文、数字、减号或下划线");
//          this.focus();// 恢复焦点
return;
}
document.getElementById("id2").onblur = function(){
if (this.value == "") {
alert("限6-20 位/字母/数字/字符");
//          this.focus();// 恢复焦点
return;
}
// 发出异步请求
var xhr = getXHR();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {

document.getElementById("msg").innerHTML = xhr.responseText;
document.getElementById("msg2").innerHTML = xhr.responseText;
document.getElementById("msg3").innerHTML = xhr.responseText;

}
}
}
xhr.open("POST","AjaxServlet",true);
// 设置请求消息头：告知客户端提交的正文的MIME类型(固定的)
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.send("user=" + this.value);
}
}

jsp中的代码

<body>
<form action="" method="">
<table align="center">
<tr><td>用户名：</td><td><input type="text" name="useruser" id="id1"><span id="msg"></td></tr>
<tr><td>真实姓名：</td><td><input type="text" name="realuser" ></td></tr>
<tr><td>密码：</td><td><input type="password" name="pwd" id="id2"><span id="msg2"></td></tr>
<tr><td>确认密码：</td><td><input type="password" name="conf_pwd" id="id3"><span id="msg3"></td></tr>
<tr><td><input type="submit" value="登录"></td><td><input type="reset" value="重置"></td></tr>
</table>
</form>
</body>
</html>

别忘了在头上加上一句:

<script type="text/javascript" src="js/ajax.js"></script>

最后是Servlet代码:

package com.hello.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("utf-8");
//接收发过来的user数据
String name = request.getParameter("user");
//定义用户名的正则表达式,用以验证用户名是否合法
String regStr = "^[\\u4e00-\\u9fa5_a-zA-Z0-9-]{1,16}$";
//判断
if (name.matches(regStr)) {
response.getWriter().write("<font color='green'>合法</font>");
} else {
response.getWriter().write("<font color='red'>限16个字符，支持中英文、数字、减号或下划线</font>");
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}

}

总结:

由于是用的ajax的原生的代码,代码量还是很多的.所以还是用基于jquery的ajax会很简便.原生的东西,还是总结一下吧.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航