使用Ajax进行用户名动态校验，局部属性页面

1.在HTML页面中使用js脚本将请求数据发送给后台servlet

• 由按钮触发校验事件
  <input type="text" name="check" onblur="checkUsername(this.value)">
• 相应的处理脚本

var req = new XMLHttpRequest();
    function checkUsername(name){
        req.open("POST","/javaweb/servlet/CheckNameServlet",true);
        //如果请求类型是post，则必须设置以下属性
        req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //设置回调函数
        req.onreadystatechange=callback;
        //发送Ajax请求,数据发送方式和表单get方式相同
        req.send("username="+name);
    }

2.后台将获取的数据进行校验，将结果返回给前台

• 后台校验

public void doPost(HttpServletRequest request,HttpServletResponse response) throws Exception {

        //从请求中获取需要校验的用户名
        String username = request.getParameter("username");

        //调用相应的方法进行校验
        MyService service = new MyService();
        boolean result = service.checkName(username);

        //根据校验结果将文本信息发送给客户端
        response.setContentType("text/plain");
        response.setHeader("Cache-control","no-cache");

        PrintWriter out = response.getWriter();
        if(rseult){
            out.write("用户名可以使用");
        }
        else{
            out.write("用户名已被占用");
        }

        out.flush();
        out.close();
    }

3.刷新局部页面

• 回调函数(展示处理结果)

function callback(){
        if(req.readyState==4&&req.status==200){ alert(req.responseText); }
    }