使用Ajax判断输入的用户名是否可用

Posted 2020-09-25

javascript代码如下:

<script type="text/javascript">
function oblur(){
//创建XMLHttpRequest对象
if(window.XMLHttpRequest){//返回true时说明是新版本IE浏览器或其他浏览器
xmlHttpRequest=new XMLHttpRequest();
}else{//返回false时说明是老版本IE浏览器
xmlHttpRequest=new XMLHttpRequest("Microsoft.XMLHTTP");
}
//设置回调函数
xmlHttpRequest.onreadystatechange=callBack;
//获取用户名文本框的值
var name=$("#user").val();
//初始化XMLHttpRequest组件
var url="UserServlet?name="+name;//服务器端URL地址，name为用户名文本框的值
xmlHttpRequest.open("GET",url,true);
//发送请求
xmlHttpRequest.send(null);
//回调函数callBack（）中处理服务器响应的关键代码
function callBack(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var date=xmlHttpRequest.responseText;
if(date=="true"){
$("#samp").html("用户名已被使用");//samp为显示消息的samp的id
}else{
$("#samp").html("用户名可以使用");
}
}
}
}
</script>

HTML代码如下:

//form表单

<form action="" method="get" name="myform">
<dl>

//用户名文本框
<dd>用户名：<input id="user" type="text" name="name" onBlur="oblur()" />

//显示是否可用消息的samp标签
<samp id="samp"></samp>
</dd>
</dl>
</form>

Servlet代码如下:

package 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 UserServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name=request.getParameter("name");
boolean used=false;
if("ajax".equals(name)){
used=true;
}else{
used=false;
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
out.print(used);
out.flush();
out.close();
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
super.doPost(request, response);
}

}