您的位置：首页 > 编程语言 > Java开发

Java 关于Ajax的实例--验证用户名（四）

2016-12-16 00:00 483 查看

今天做了一个简单Ajax验证用户名的实例
实例说明：实现网页输入栏中验证用户名是否已存在的异步刷新功能。
先建servlet包，功能由该HttpServlet实现，new–class–“CheckUser.java”

public class CheckUser extends HttpServlet{
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException{
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//这里是把值定死的，实际上我们会从数据库取数据
String[] xhs = {"08110","08111","08112","08113"};
//取得用户填写的学号
String xh = request.getParameter("xh");//获取http提交过来的数据
//设置相应内容
String responseContexter = "true";
for(int i=0;i<xhs.length;i++){
//如果有学号，修改响应内容
if(xh.equals(xhs[i])){
responseContexter = "false";
}
}
out.print(responseContexter);
out.flush();
out.close();
}
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException{
doGet(request,response);
}
}

然后来配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>CheckUser</servlet-name>
<servlet-class>servlet.CheckUser</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckUser</servlet-name>
<!-- 这个地方url-pattern任意命名是为了明显区别CheckUser调用的URL到底从何而来 -->
<url-pattern>/dizhi</url-pattern>
</servlet-mapping>

</web-app>

菜鸟教程温馨提示：web.xml 声明后面就是< web-app>固定头文件，< servlet>与< / servlet>之间的配置的是< servlet-name>< /servlet-name>是自定义的一个名字，符合java命名规则就成，随便起。< servlet-class>< /servlet-class>是写的servlet类的类名，这个必须配置正确，有包的话还要在前面加上包名。但是不带.java.class后缀。< servlet-mapping>< /servlet-mapping>之间配置的是< servlet-name>< /servlet-name>这个和上面那个name一样就成。< url-pattern>< /url-pattern>的值也可以随便起名字，但是必须要加“/”。form的action里填写的就是这个值（有些地方要考虑路径），ajax跳转用的也是这个地方的值

下面继续写index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<title>Ajax应用</title>
</head>

<body>
<form action="">

<!-- 当输入框改变时 执行beginCheck()函数 -->
学号：<input type="text" id="xh" onchange="beginCheck()"/><span id="hint"></span>
<br><br>
密码：<input type="password" name="kl" />
<input type="submit" value="注册" />
</form>
<!--script放尾部，页面元素先呈现，增强用户体验-->
<script type="text/javascript"> var xmlHttp; var hint = document.getElementById("hint"); var username = document.getElementById("xh"); username.addEventListener("focus",function(){ hint.innerText = ""; },false); function createHttpRequest () { // 创建XMLHttpRequest对象，做兼容处理 if (window.ActiveXObject) { //IE5,6 ps:IE7及以上兼容了window.XMLHttpRequest xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); console.log("IE5,6"); }else if(window.XMLHttpRequest){ //IE7,firebox,chrome,safari,opear xmlHttp = new XMLHttpRequest(); console.log("XMLHttpRequest"); } } function beginCheck () { var xh = document.getElementById("xh").value; //判断有无输入字符，最好能把该判断放在其他事件上，因为onchange不能全部涵盖用户不输入用户名的行为，exchange是指输入域的内容发生改变的情况。 if(!xh){ alert("sorry,请输入注册学号"); return; } //创建好http请求 createHttpRequest(); //将状态触发器绑定到一个函数上,4(5)个readyState状态变化一次就执行一次processor(),每当 readyState 改变时，就会触发 onreadystatechange 事件。 xmlHttp.onreadystatechange = processor; //通过get方法向指向的URL即Servlet对应的URL建立服务器的调用 xmlHttp.open("get","dizhi?xh="+xh,"ture");//这里URL地址是web.xml中的<url-pattern> xmlHttp.send(null); } function processor () { console.log("触发"+xmlHttp.readyState); var responseContext; if(xmlHttp.readyState == 4&&xmlHttp.status == 200){ //获取服务器发回来的响应 responseContext = xmlHttp.responseText; //搜索响应字符串里有没有ture //console.log(responseContext); if(responseContext.indexOf("true") != -1){ hint.innerText = "用户名有效";//更改span标签的内容 console.log("congratulation,该学号有效"); }else{ hint.innerText = "用户名已存在"; console.log("sorry,the account already exists"); } } } </script>
</body>
</html>

未按待续，如有意见，欢迎留言

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

标签： Java EE

相关文章推荐

新的分享

章节导航