Ajax+js 和 Ajax+Jquery实现异步校验

web.html<script type="text/javascript" src="${ pageContext.request.contextPath }/03_ajax_regist/regist.js"></script>
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username" onblur="checkUsername()"><span id="s1"></span></td>
</tr>
<tr>
<td colspan="2"><input id="regBut" type="submit" value="注册"></td>
</tr>Servlet.java try{
// 接收参数:
String username = request.getParameter("username");
// 调用业务层:
UserService userService = new UserService();
User user = userService.findByUsername(username);
// 判断:
response.setContentType("text/html;charset=UTF-8");
if(user == null){
// 用户名可以使用.
response.getWriter().println(1);
//response.getWriter().println("<font color='green'>用户名可以使用</font>");
}else{
// 用户名已经被占用
response.getWriter().println(2);
//response.getWriter().println("<font color='red'>用户名已经被占用</font>");
}
}catch(Exception e){
e.printStackTrace();
throw new RuntimeException();
}Ajax+js实现异步校验(了解)
    * regist.js
function checkUsername() {
// 获得文本框的值:
var username = document.getElementById("username").value;
// 创建异步对象:
var xhr = createXMLHttp();
// 设置监听:
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
//
if (data == 1) {
document.getElementById("s1").innerHTML = "<font color='green'>用户名可以使用</font>";
document.getElementById("regBut").disabled = false;
} else if (data == 2) {
document.getElementById("s1").innerHTML = "<font color='red'>用户名已经被占用</font>";
document.getElementById("regBut").disabled = true;
}
}
}
}
// 打开连接:
xhr.open("GET", "/day15/ServletDemo2?username=" + username, true);
// 发送请求:
xhr.send(null);
}

function createXMLHttp() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}

return xmlHttp;
} Ajax+Jquery实现异步校验(必须会)
    * regist.js$(function(){
$("#username").blur(function(){
// 获得文本框的值:
var username = $(this).val();
// 演示load方法:
// $("#s1").load("/day15/ServletDemo3",{"username":username});
// 演示get/post方法:
$.get("/day15/ServletDemo3",{"username":username},func
4000
tion(data){
if(data == 1){
$("#s1").html("<font color='green'>用户名可以使用</font>");
$("#regBut").attr("disabled",false);
}else if(data == 2){
$("#s1").html("<font color='red'>用户名已经存在</font>");
$("#regBut").attr("disabled",true);
}
});
});
});

使用load方式,在Servelt中可以直接返回输出的值.

// $("#s1").load("/day15/ServletDemo3",{"username":username});

//response.getWriter().println("<font color='green'>用户名可以使用</font>");