<script type="text/javascript">
function checkUsername(username){
//发送ajax 请求 ，验证用户名是否可用
//发送ajax 请求的代码包括4步 这四步骤是固定的
//比传统请求要麻烦一些
//AJAX发送请求全靠浏览器内置的这个对象 XMLHttpRequest对象
// 使用这个XMLHttpRequest对象 可以再浏览器当中单独启动一个新的浏览器线程 ，通过浏览器线程发送该请求
//达到异步效果
//1.创建AJAX核心对象XMLHttpRequest《浏览器内置的，可以直接使用）
var xhr;
if(window.XMLHttpRequest){
xhr= new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.//注册回调函数
//程序执行到这里的时候，后面的回调函数并不会执行，只是将回调函数注册给xhr对象
//等xhr对象的readyState发生改变的时候，后面的回调函数会执行
//0 请求未初始化（在调用 open() 之前）
//1 请求已提出（调用 send() 之前）
//2 请求已发送（这里通常可以从响应得到内容头部）
//3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
//4 请求已完成（可以访问服务器响应并使用它）
xhr.onreadystatechange = function () {
if (xhr.readyState == 4){//服务器响应结束
//可能会遇到404错误 500 需要判断
if (xhr.status == 200){//
//获取到span标签
var nameTipMsg = document.getElementById("nameTipMsg");
//返回文本到span
nameTipMsg.innerText = xhr.responseText;
// var s = xhr.responseText;
}else{
}
}
}
//当按钮对象注册一个鼠标点击事件，当按钮上发生鼠标单击的时候，会执行回调函数
//myBtn.onclick = function(){}
//3.
xhr.open("GET","checkusername.do?username=" + username,true);//只开启通道，不发送请求
//4.发送AJAX请求
xhr.send();
}
</script>
用户名:<input type="text" name="username" onblur="checkUsername(this.value);"/>
<span id="nameTipMsg" style="font-size: 12px;"></span><br>
密码:<input type="password" name="password">
serlvet 3.0
@WebServlet(name = "CheckUsernameAction",urlPatterns = "/checkusername.do")
public class CheckUsernameAction extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.sendRedirect("text/html;charset=UTF-8");
PrintWriter out = resp.getWriter();
//获取用户名
String username = req.getParameter("username");
//连接数据库验证用户名是否存在
if("admin".equals(username)){
//用户名不可用
out.print("<font color='red'>用户名被注册</font>");
}else{
out.print("<font color='green'>用户名可注册</font>");
}
//响应信息给浏览器
}
}
