今天要给各位朋友分享的是基于Ajax验证用户名或者昵称是否已被注册示例,JavaScript中XMLHttpRequest对象是整个Ajax技术的核心,它提供了异步发送请求的能力 。而用户名或昵称的验证就能够使XMLHttpRequest对象实现。下面是个小例子,有兴趣的朋友赶紧来了解一下吧。
页面:
简单的输入框
1
2
3
4
|
< body > 昵称:< input
type = "text"
name = "username"
>< span
id = "msg" >请输入昵称</ span >< br > 密码:< input
type = "password"
name = "password" > </ body > |
JS代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
window.onload= function () { var
nameElement=document.getElementsByName( "username" )[0]; //为昵称选项注册onblur事件 nameElement.onblur= function () { var
name= this .value; //1.获取XMLHttpRequest对象 var
req=getXMLHttpRequest(); //4.处理响应结果 req.onreadystatechange= function (){ if (req.readyState==4){ //XMLHttpRequest对象读取成功 if (req.status==200){ //服务器相应正常 var
msg=document.getElementById( "msg" ); //根据返回的结果显示不同的信息 if (req.responseText== "true" ){ msg.innerHTML= "<font color='red'>该昵称已注册</font>" ; } else { msg.innerHTML= "<font color='green'>可以使用</font>" ; } } } } //2.建立一个连接 req.open( "get" , "${pageContext.request.contextPath}/servlet/checkUserServlet?name=" +name); //3.发送get请求 req.send( null ); } } |
getElementsByName方法,根据浏览器的不同获得不同的XMLHttpRequest对象(提供异步发送请求的能力):
1
2
3
4
5
6
7
8
9
|
function
getXMLHttpRequest(){ var
xmlhttp; if
(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new
XMLHttpRequest(); } else
{ // code for IE6, IE5 xmlhttp = new
ActiveXObject( "Microsoft.XMLHTTP" ); } return
xmlhttp; } |
servlet:仅仅为了测试,并没有真正从dao层查询
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter pw=response.getWriter(); String name=request.getParameter( "name" ); //判断昵称是否已被使用 if ( "tom" .equals(name)){ pw.print( true ); } else { pw.print( false ); } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } |
测试:
因为在servlet中我们只验证tom是否存在,因此tom显示已经使用。