基于JSP+SERVLET的新闻发布系统（二）
接下来讲解的是通过AJAX验证用户名是否已经添加
用户名： <input type="text" name="userName" id="userName" onblur="validateName()" />
当输入完信息，移开光标时，则会调用validateName（）这个JS函数。
该函数如下：
<script type="text/javascript">
var request = false;
function validateName(){
var userName=document.getElementById("userName").value;
var serverPath = document.getElementById("path").value;
var url = serverPath+"/user";//服务器地址
//请求参数
var parameter = "method=queryUser&userName="+userName;
request = httpRequest("post",url,true,callbackFunc,parameter);
}
function callbackFunc() {
if (request.readyState == 4) {
if (request.status == 200) {
document.getElementById("spanUser").innerHTML = "<font color='red'>" + request.responseText + "</font>";
}
}
}
</script>
中间使用的是两个工具类，如下所示
/**
* 构建XMLHttpRequest对象并请求服务器
* @param reqType：请求类型（GET或POST）
* @param url：服务器地址
* @param async：是否异步请求
* @param resFun：响应的回调函数
* @param parameter :请求参数
* @return
*/
function httpRequest(reqType,url,async,resFun,parameter){
var request = null;
if(window.XMLHttpRequest){ //非IE浏览器
request = new XMLHttpRequest();
}else if(window.ActiveXObject){ //IE浏览器
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open(reqType, url, true); //打开服务器连接
//设置请求头
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.onreadystatechange = resFun;//设置处理响应的回调函数
parameter = encodeURI(parameter); //将参数字符串进行编码
request.send(parameter); //发送请求
return request;
}
假如验证失败，则会把失败信息写在改属性下面：
document.getElementById("spanUser").innerHTML = "<font color='red'>" + request.responseText + "</font>"
同时需注意的是，在后台接受验证参数时，SERVLET需响应
response.setContentType( "text/xml;charset=UTF-8" );//设置响应格式 //设置响应头信息 response.addHeader( "Cache-Control", "no-store,no-cache,must-revalidate" ); response.addHeader( "Cache-Control", "post-check=0,pre-check=0" ); response.addHeader( "Expires", "0" ); response.addHeader( "Pragma", "no-cache" );
同时验证代码如下：
//验证用户名是否存在
if("queryUser".equals(method)){
String userName = request.getParameter("userName");
user.setUserName(userName);
user = userService.checkUser(user);
if(user.getUserName()!=null){
out.println("用户名已经存在");
}else{
out.println("该用户名可以使用");
}
}
效果如上所示;