Ajax部分代码,没有使用Ajax框架处理。
<script type="text/javascript">
var xmlHttp;
function createXmlHttpRequest(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
//用户输入完用户名,将光标移动到密码框输入密码时,验证用户名是否被占用
function checkUser(){
createXmlHttpRequest();
var userName = document.getElementById("userName").value;
/*
如何此处为get提交方式,应该写成:
xmlHttp.open("get","checkU?userName" + userName,true);
去除 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
把 xmlHttp.send("userName=" + userName); 修改成 xmlHttp.send(null);
已URL行驶传递过去。
*/
xmlHttp.open("post","checkU",true);//Ajax核心方法之1:指定发送方式,指定发送路径
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//定义一个函数接收返回数据
xmlHttp.onreadystatechange = function(){
//注意状态值,需要为4的时候才能可以满足条件
if(xmlHttp.readyState == 4){
document.getElementById("checkResult").innerHTML = xmlHttp.responseText;//接收返回结果
}
}
xmlHttp.send("userName=" + userName);//发送值
/*
发送值在方法onreadystatechange后,必须这么去写,请注意
*/
}
</script>
-----------------------------------------------------------------------------------
HTML部分代码
<!-- 用一个span标签来处理加载内容 -->
<input type="text" name="userName" id="userName" onblur="checkUser();"/><span id="checkResult"></span><br/>
-------------------------------------------------------------------------------------
Servlet代码
response.setCharacterEncoding("utf-8");
//取的传入的请求参数
String userName = request.getParameter("userName");
//判断是否为abc,然后响应输出信息到界面
if(!userName.equals("abc")){
response.getWriter().print("恭喜您,用户名可以使用!");
}else{
response.getWriter().print("对不起,用户名已被占用!");
}