Spring MVC+ajax进行信息验证的方法

先说说AJAX这东西到底是个什么原理。简单来说，AJAX不是一门新的编程语言，而是基于现有Web标准的一套实践方法。它的最大优势在于：不需要重新加载整个页面，就能和服务器交换数据，并更新网页的局部内容。对于提升用户体验来说，这几乎是标配了。

要理解AJAX，得先搞清楚它的核心对象——XMLHttpRequest。从基础用法来看，主要涉及两个方法：

var xmlhttp = new XMLHttpRequest();
xmlhttp.open(method, url, async);
xmlhttp.send();

open方法里的三个参数，method代表请求类型（GET/POST），url是请求资源的地址，async表示是否异步——通常都填true，因为异步不会因为服务端响应慢而把整个页面卡住。send方法自然就是发起请求的动作了。

这里有个细节要注意：如果需要像HTML表单那样POST数据，得先用setRequestHeader()添加HTTP头，然后在send()里带上要发送的数据：

xmlhttp.open("POST", "url", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

上面代码第二行指定了发送的数据类型。实际开发中，我们更常用的是"application/json"。为什么？试想一下，如果要发送多个字段，一个一个参数去拼，不仅麻烦，服务端还得挨个从request.parameter里取，效率低不说，代码也容易乱。而用JSON格式，可以先把数据拼成JSON对象，再转成字符串发过去，后端直接解析，自动填充到对应的POJO里，省心多了。

当然，要做到这一点，需要三个配置：

• 设置Content-type为"application/json"，告诉服务端传过来的是JSON。
• 用JSON.stringify把数据转换成JSON字符串再发送。
• 服务端Controller的方法参数前加@RequestBody，这样服务端就会调用相应的解析器来处理请求。

一个完整的请求写完了，接下来看响应。AJAX接收响应的标准写法是这样的：

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var xmlDoc = xmlhttp.responseXML;
  }
}

AJAX收到响应后会自动调用onreadystatechange方法，通过responseXML获取返回值。但问题来了：在Spring MVC中，默认情况下返回值会写到ModelAndView，然后查找视图并渲染数据——这显然不是我们想要的，我们只想返回数据，不指定视图。所以需要@ResponseBody。

声明@ResponseBody后，如果返回值是字符串，直接写到客户端；如果是一个对象，则自动转成JSON字符串再写过去。这里有个坑需要注意：返回对象时默认按UTF-8编码，而返回字符串时默认按ISO8859-1编码，页面可能会乱码。解决办法是在注解里手动指定编码，比如@RequestMapping(value="/cat/query", produces="text/html;charset=utf-8")。客户端拿到JSON字符串后，用JSON.parse()转成对象就能直接用了。

下面是一个完整的实例演示，先看表单部分：

  

    用户名
    
    

  
  

    密码
    
    

  
  

    确认密码
    
    

  
  提交

每个输入框通过onblur（失去焦点）触发check()函数。JS代码如下：

var check = function(info) {
  if (info.name == "username") {
    var username = document.getElementById("exampleInputEmail1").value.trim();
    if (username == "") {
      document.getElementById("usernameInfo").innerHTML = "用户名不能为空";
    } else {
      loadXMLDoc(); // 执行AJAX检查
    }
    ///////分割线/////////////////////////////////////////
  } else if (info.name == "password") {
    var pass = document.getElementById("exampleInputPassword1").value.trim();
    if (pass == "") {
      document.getElementById("passInfo").innerHTML = "密码不能为空";
    } else {
      document.getElementById("passInfo").innerHTML = "";
    }
  } else {
    var value1 = document.getElementById("exampleInputPassword2").value;
    var value2 = document.getElementById("exampleInputPassword1").value;
    if (value1 != value2) {
      document.getElementById("repassInfo").innerHTML = "前后密码不一致";
    } else {
      document.getElementById("repassInfo").innerHTML = "";
    }
  }
}

上面代码的逻辑大同小异，重点看分割线以上的部分：先用本地JS检测用户输入是否为空，如果不为空，则执行AJAX检查账号是否已被占用。AJAX的代码如下：

var loadXMLDoc = function() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var text = xmlhttp.responseText;
      document.getElementById("usernameInfo").innerHTML = text; // 设置反馈信息
    }
  }
  var name = document.getElementById("exampleInputEmail1").value; // 获取用户输入
  xmlhttp.open("GET", "userController/checkInfo.do?username=" + name, true); // 构造请求
  xmlhttp.send(); // 发送
}

最后是Controller的代码：

@RequestMapping(value = "/checkInfo", produces = {"text/html;charset=utf-8;"})
@ResponseBody
public String check(HttpServletRequest requst) {
  String username = requst.getParameter("username");
  System.out.println(username);
  Integer id = userService.check(username);
  if (id != null) {
    return "账号已经存在";
  } else {
    return "";
  }
}

运行效果如下图所示：

利用JS提醒密码不能为空：

利用AJAX检测账号是否重复，以及JS检测前后密码是否一致。

总结

以上完整演示了Spring MVC + AJAX进行信息验证的流程，从AJAX基础概念到具体代码实现，再到服务端配置，覆盖了常见的开发场景。