Java-Ajax的初步学习

1 <div id="theName">
2     <span>用户名: </span>
3     <input type="text" id="username" name="username" value="用户名" onblur="checkUserName(this.value)"/>
4      <span id="username_msg"></span>
5 </div>

 1 <%-- 这里是具体的ajax实时校验的响应代码 --%>
 2     <script type="text/javascript">
 3         // 校对用户名
 4         function checkUserName(username) {
 5             // 获得xhr对象
 6             var xhr = getXMLHttpRequest();
 7             // 监听并对应处理
 8             xhr.onreadystatechange = function () {
 9                 if(xhr.readyState == 4 && xhr.status == 200){
10                     var result = xhr.responseText;
11                     document.getElementById("username_msg").innerText = result;
12                 }
13             };
14             // 打开连接
15             xhr.open("GET", "${pageContext.request.contextPath}/checkUserName?username="+username, true);
16             // 发送请求
17             xhr.send(null);
18         }
19     </script>

 1 @WebServlet("/checkUserName")
 2 public class CheckUserNameServlet extends HttpServlet {
 3     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 4         doGet(request, response);
 5     }
 6 
 7     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 8         // 获得表单值 GET方式传值中文乱码
 9         String username = new String(request.getParameter("username").getBytes("ISO-8859-1"),"UTF-8");
10         // 分发转向
11         // 设置响应编码
12         response.setContentType("text/html;charset=UTF-8");
13         // 得到输出流
14         PrintWriter out = response.getWriter();
15         // 模拟数据库查询到username不能为admin
16         if(username == null){
17             out.print("该处不能为空，请输入");
18         }else if(username.equals("admin")){
19             out.print("该用户名已存在");
20         }else {
21             out.print("该用户名可使用");
22         }
23     }
24 }