Ajax——判断用户名是否已经注册

1.1、Ajax

1.Ajax：异步的JavaScript and XML

2.目的：用来发送异步请求，然后当服务器给我想要的时候进行回调操作

3.好处：提高用户体验；局部刷新；

1.2、判断用户名是否已经注册

1.第一步：客户端发送异步请求；并绑定对结果处理的回调函数

（1）注册页面输入用户名

【regist.html】

<div class="form-item">
    <div>
        <label>用户名称:</label>
        <input id="unameText" type="text" name="uname" placeholder="请输入用户名" onblur="checkUname(this.value)" />
    </div>
    <span id="unameSpan" class="errMess">用户名应为6~16位数字和字母组成</span>
</div>

当失去焦点时，调用register.js中的checkUname方法

（2）定义checkUname方法

• 创建XMLHttpRequest对象
• XMLHttpRequest对象操作步骤
  • open(uri,"GET",true)
  • onreadyStateChange ：绑定状态改变时执行的回调函数
  • send()：发送请求
• 在回调函数中需要判断XMLHttpRequest对象的状态：
  • readyState（0-4）
  • status（200）

【register.js】

//如果响应发送异步请求，我们需要一个关键的对象 XMLHttpRequest
var xmlHttpRequest;

//完成XMLHttpRequest对象的初始化
function createXMLHttpRequest() {
    if (window.XMLHttpRequest) {
        //符合DOM2标准的浏览器  xmlHttpRequest的创建方式
        xmlHttpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject){ //IE浏览器
        try {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            xmlHttpRequest = new ActiveXObject("Masxml2.XMLHTTP");
        }

    }
}

function checkUname(uname) {
    createXMLHttpRequest();
    var uri = "user.do?operation=checkUname&uname=" + uname;
    xmlHttpRequest.open(uri,"GET",true);
    //设置回调函数
    xmlHttpRequest.onreadystatechange = checkUnameCB;
    //发送请求
    xmlHttpRequest.send();

}

function checkUnameCB() {
    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
        alert("hello world");
    }
}

2.第二步：服务器端做校验，然后将检验结果响应给客户端

• 服务器端做校验

  当用户名已经存在时，需要发送一个json:{'uname':'1'}，其中uname为key，1为value，表示用户名存在。

  当用户名不存在时，需要发送一个json:{'uname':'0'}，其中uname为key，0为value，表示当前用户名可以注册。

  【UserController.java】

  public String checkUname(String uname) {
      User user = userService.getUser(uname);
      if (user != null) {
          //用户名已经存在，不可以注册
          return "json:{'uname':'1'}";
          //return "ajax:1";
      } else {
          //用户名可以注册
          return "json:{'uname':'0'}";
          //return "ajax:0";
      }
  }
  

• 将检验结果响应给客户端

  需要修改中央控制器中的视图处理模块，来处理新的返回串。

  【DispatcherServlet.java】

  //3.视图处理
  String methodReturnStr = (String) methodReturnObj;
  if (methodReturnStr.startsWith("redirect:")) {//比如 ：redirect:fruit.do
      String redirectStr = methodReturnStr.substring("redirect:".length());
      response.sendRedirect(redirectStr);
  } else if (methodReturnStr.startsWith("json:")) {
      String jsonStr = methodReturnStr.substring("json:".length());
      PrintWriter out = response.getWriter();
      out.print(jsonStr);
      out.flush();
  }  else {
      super.processTemplate(methodReturnStr,request,response);
  }
  

3.第三步：客户端收到服务端的响应信息，进行回调操作

【register.js】

function checkUnameCB() {
    //4表示响应内容解析完成，可以在客户端调用
    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
        //接受服务端发来的json字符串
        //xmlHttpRequest.responseText 表示服务器端响应给我的文本内容
        //alert(xmlHttpRequest.responseText);
        var responseText = xmlHttpRequest.responseText;
        //{'uname':'1'}
        alert(responseText);
        if (responseText == "{'uname':'1'}") {
            alert("用户名已经存在！");
        } else {
            alert("用户名可以注册！");
        }
    }
}