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、处理返回数据

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9   <head>
10       <script type="text/javascript">
11         function ajax(){
12           var url = "<%=request.getContextPath() %>/servlet/AjaxTest";
13           var value = document.getElementById("userName").value;
14             var xmlHttp = new XMLHttpRequest();
15             xmlHttp.onreadystatechange = function(){
16             if(xmlHttp.readyState == 4){
17                 if("unsucceed"== xmlHttp.responseText){
18                    document.getElementById("userName").value=null;
19                    document.getElementById("userName").placeholder="该用户已被占用，请重新输入";  
20                  }
21             }
22         };
23             xmlHttp.open("POST", url, true);// true:异步调用    false:同步调用
24         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// 设置请求头信息
25         xmlHttp.send("userName="+value);
26         }
27         function submit_user(){
28         if(document.getElementById("userName").value.length>1){
29             if(document.getElementById("passWord").value.length > 5)
30               document.getElementById("user").submit();
31           else{
32               document.getElementById("passWord").value=null;
33               document.getElementById("passWord").placeholder="请重新输入密码";
34               alert("请输入6位数以上密码");
35           } 
36         }else
37         alert("请先输入用户名");
38         }
39       </script>
40   </head>
41   <body>
42     <form id="user" method="get" action="<%=request.getContextPath()%>/servlet/LoginTest">
43         <table>
44       <tr>
45           <td>姓名<td/>
46           <td><input type="text" id="userName" name="userName" onblur="ajax()" placeholder="请输入姓名"><td/>
47       <tr/>
48       <tr>
49           <td>密码<td/>
50           <td><input type="password" id="passWord" name="passWord"  placeholder="请输入密码"><td/>
51       <tr/>
52       <tr>
53           <td><td/>
54           <td><input type="button"  onClick="submit_user()" value="注册"/><td/>
55       <tr/>
56       </table>
57     </form>
58   </body>
59 </html>

View Code