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

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

2016-03-22 18:09 441 查看

今天做了一个简单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");

4000
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 ajax

相关文章推荐

新的分享

章节导航