用Ajax实现用户名的检测

来源：互联网发布：ubuntu设置dhcp 编辑：程序博客网时间：2024/06/11 02:31

这次我们做一个检测用户名是否被注册的案例，通过这个案例来进一步学习Ajax！

简单的思路：这次通过Ajax的doget方法来将网页上的信息带到servlet服务器上去，然后通过全局变量req把服务器上的信息传给show函数，最后通过info打印出信息来！

下面给出具体的代码：

jsp页面上的代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
<script type="text/javascript">
var req;
function checkit()
{ //chekcit()函数的作用把用户名传到浏览器上，看看是否被注册了
//判断浏览器的类型
if(window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if(window.ActiveXobject)

{
req = new ActiveXobject("Microsoft.XMLHTTP");
}
//通过Ajax从后台取回数据来
//判断浏览器的类型，生成一个req对象，用它和服务器进行联系
var url = "CheckUser?a=" + document.getElementById("uname").value;//访问服务器的地址后面的doucment信息是网页上的信息，通过doget的方法带到服务器那边去
req.open("GET",url,true);//用doget方法来调用
req.onreadystatechange = show;//访问结束，得到的数据交给show函数来处理，这个比较特别，是我们常见的回调函数
req.send(null);//启动上面的线程，也就是执行命令，访问url，拿回结果

}
function show()
{ //状态的判断
if(req.readyState == 4)//表示通过doget的方法是否访问到了服务器
{
if(req.status == 200)//访问到服务器后有没有结果
{
document.getElementById("info").innerHTML = req.responseText;//把服务器上得到的信息给info,让其显示出来！
}
}

}
</script>
</head>
<body>
<table>
<tr><td>用户名</td><td><input type="text" id="uname"></td></tr>
<tr><td><input type="button" value = "检测用户" onClick="checkit()"></td><td><div id="info"></div></td></tr>
</table>
</body>
</html>

下面给出服务器servlet上的代码：

package javastudy;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet implementation class CheckUser
*/
@WebServlet("/CheckUser")//这里的CheckUser要对应于url里面的CheckUser
public class CheckUser extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
* @see HttpServlet#HttpServlet()
*/
public CheckUser() {
super();
// TODO Auto-generated constructor stub
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String uname = request.getParameter("a");
//在真正的工作中，不是一个简单的数组来存放数据（这里只是从简），一般工作中都是数据库来存放大量的数据
String [] names = {"zhang","wang","zhou"};
boolean flag = false;
response.setCharacterEncoding("UTF-8");
for(int i=0;i<names.length;i++)
{
if(names[i].equals(uname))
{
flag = true;
break;
}
}
if(flag)
{
response.getWriter().println("该用户名已经被注册了！");
}
else
{
response.getWriter().println("恭喜,该用户名没有被注册！");
}
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//doGet(request, response);
}

}

小提示：这里做页面的时候都是用javascript写的！

0 0