13、Ajax的使用

一、AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

　　a）、AJAX = 异步 JavaScript 和 XML。

　　b）、AJAX 是一种用于创建快速动态网页的技术。

　　通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。例如我们在用户注册的时候需要验证该注册名是否已经存在，这时候就可以使用Ajax实现与服务器的的通信来验证。

二、AJAX的使用：

　　1、创建 XMLHttpRequest 对象：所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象（详见W3School）

　　2、向服务器发送请求：与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用

　　3、处理返回数据

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%
 String path = request.getContextPath();
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
   <head>
       <script type="text/javascript">
         function ajax(){
           var url = "<%=request.getContextPath() %>/servlet/AjaxTest";
           var value = document.getElementById("userName").value;
             var xmlHttp = new XMLHttpRequest();
             xmlHttp.onreadystatechange = function(){
             if(xmlHttp.readyState == 4){
                 if("unsucceed"== xmlHttp.responseText){
                    document.getElementById("userName").value=null;
                    document.getElementById("userName").placeholder="该用户已被占用，请重新输入";
                  }
             }
         };
             xmlHttp.open("POST", url, true);// true:异步调用    false:同步调用
         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// 设置请求头信息
         xmlHttp.send("userName="+value);
         }
         function submit_user(){
         if(document.getElementById("userName").value.length>1){
             if(document.getElementById("passWord").value.length > 5)
               document.getElementById("user").submit();
           else{
               document.getElementById("passWord").value=null;
               document.getElementById("passWord").placeholder="请重新输入密码";
               alert("请输入6位数以上密码");
           }
         }else
         alert("请先输入用户名");
         }
       </script>
   </head>
   <body>
     <form id="user" method="get" action="<%=request.getContextPath()%>/servlet/LoginTest">
         <table>
       <tr>
           <td>姓名<td/>
           <td><input type="text" id="userName" name="userName" onblur="ajax()" placeholder="请输入姓名"><td/>
       <tr/>
       <tr>
           <td>密码<td/>
           <td><input type="password" id="passWord" name="passWord"  placeholder="请输入密码"><td/>
       <tr/>
       <tr>
           <td><td/>
           <td><input type="button"  onClick="submit_user()" value="注册"/><td/>
       <tr/>
       </table>
     </form>
   </body>
 </html>