ajax例子

一、Ajax简介

AJAX全称为“Asynchronous JavaScript and XML”(异步javascript和XML)，是指一种创建交互式网页应用的网页开发技术。

传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。


　　与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

二、Ajax使用场景

   AJAX【适合】不用来传递大量数据，而只用来【传递少量数据】，在用户的【体验】上，【更加人性化】

             AJAX是一个和服务器无关的技术，即服务器可使用：JavaEE，.NET，PHP，。。。这些技术都可

             AJAX只管向服务器发送请求，同时只管接收服务器的HTML或XML或JSON载体响应

       服务端不能使用转发或重定向到web页面，因为这样会起浏览器全面刷新

             即只能以流的方式响应给浏览器。

1、数据验证：在文本框等输入表单中给予输入提示，或者自动完成，可以有效的改善用户体验，尤其是那些自动完成的数据可能来自于服务器端的场合，Ajax是很好的选择。

2、按需取数据：
我们以前的对级联菜单的处理多数是这样的：
为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用 JavaScript来控制它的子集项目的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题，但是如果用户不对菜单进行 操作或只对菜单中的一部分进行操作的话，那读取的数据中的一部分就会成为冗余数据而浪费用户的资源，特别是在菜单结构复杂、数据量大的情况下（比如菜单有 很多级、每一级菜又有上百个项目），这种弊端就更为突出。
如果在此案中应用Ajax后，结果就会有所改观：
在初始化页面时我们只读出它的第一级的所有数据并显示，在用户操作一级菜单其中一项时，会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据，如 果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据，以此类推……这样，用什么就取什么、用多少就取 多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了 用户等待时间，也把对资源的浪费降到最低。

三、Ajax编码

3.1 编码步骤

1、创建AJAX异步对象，例如：createAJAX()

 2、准备发送异步请求，例如：ajax.open(method,url)

3、如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader()

    如果是GET请求的话，无需设置设置AJAX请求头

4、真正发送请求体中的数据到服务器，例如：ajax.send()

5、AJAX不断的监听服务端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数        

6、在无名处理函数中，获取AJAX的数据后，按照DOM规则，用JS语言来操作Web页面 

 

3.2 ajax状态码

• 0：ajax异步对象创建好了，但暂时没有准备发送请求
• 1：ajax已经调用了open方法，但暂时没有真正发送请求
• 2：ajax已调用了seng()方法，但暂时没有到达服务器
• 3：请求已经到达服务器，正在处理中，服务器正在将响应返回的过程中
• 4：ajax异步对象已经完全接收到了服务端的响应信息，但这个时候的响应状态码不一定是正确的，可能是404/500或者200等

• 0-4都是ajax的状态码，每个浏览器的0-3这4种状态显示不一样，但是4这个状态码每个浏览器都有，所以只需要知道4就可以了。
• 一定要状态触发之后才可以出发function（）{}函数，如果状态保持4-4-4不变，就不会触发function函数。

1、Ajax应用场景：

Asynchronous JavaScript and XML（异步的 javascript 和 XML）

（1）搜索框

（2）用户注册时校验用户名是否被注册

（3）分页

 

2、Ajax优缺点：

（1）优点：①异步交互，增强用户体验

②服务器部分响应，减轻服务器压力，提高性能

（2）缺点：① 不能应用在全部场景

②增多了对服务器的访问次数，给服务器带来压力

 

3、一次完整的HTTP请求，一般有七个步骤：

①建立TCP连接

②Web浏览器向Web服务器发送请求命令

③Web浏览器发送请求头信息

④Web服务器响应

⑤Web服务器发送响应头信息

⑥Web服务器向浏览器发送数据

⑦Web服务器关闭TCP连接

 

4、什么叫Document对象？

每个载入浏览器的HTML文档都会成为Document对象，Document对象使我们可以从脚本中对HTML页面的所有元素进行访问。

 

5、Ajax发送异步请求步骤：

（1）得到XMLHttpRequest

①大多数浏览器支持：var request = new XMLHttpRequest();

②IE 6.0：var request = new ActiveXObject(“Msxml2.XMLHTTP”);

③IE 5.5以及更早版本：var request = new ActiveXObject(“Microsoft.XMLHTTP”);

（2）打开与服务器的连接

XMLHttpRequest.open(method,url,async)：

三个参数：

①请求方式：GET、POST

②请求URL：指定服务器的资源

③请求是否为异步：true发送异步请求，false发送同步请求

request.open(“GET”, “/Learn201705/Servlet1”, “true”);

（3）发送请求：

XMLHttpRequest.send(string)：

参数：

请求体内容，

①当为GET请求时，其实是没有请求体的，所有参数都拼接在url当中，但必须给出request.send(null)，如果不给null可能会造成火狐浏览器无法发送。

②当为POST请求时，在open和send之间加入以下句子：

request.open(“POST”, “/Learn201705/Servlet1”, “true”);

request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

request.send(“name=remoa&sex=male”);//发送请求时指定请求体

（4）给异步对象的onreadystatechange事件注册监听器：

①XMLHttpRequest对象有一个onreadystatechange事件，它会在XMLHttpRequest对象的状态readyState属性的值发生变化时被调用。其五种状态分别是：

0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法。

1：请求已开始，open()方法已调用，但还没有调用send()方法。

2：请求发送完成状态，send()方法已调用，也就是接收到头信息了。

3：开始读取服务器响应，也就是接收到响应主体了，但不表示响应结束了。

4：读取服务器响应结束，响应完成。

onreadystatechange事件会在readyState属性状态为1、2、3、4时引发。

②得到XMLHttpRequest对象的状态：

var state = request.readyState;//可能是0、1、2、3、4

我们一般对状态为200且readyState属性值为4时进行处理，即

request.onreadystatechange = function(){

if(request.readyState == 4 && request.status == 200){

request.responseText  //开始做一些事情

}

};

③得到服务器响应的状态码：

var status = request.status;//以数字形式返回HTTP状态码，例如404、500、302

var status = request.statusText;//以文本形式返回HTTP状态码

④得到服务器响应的内容

var content = request.responseText; //获得字符串形式的响应数据

var content = request.responseXML;//获得XML形式的响应数据

⑤getAllResponseHeader()：获取所有的响应报头

⑥getResponseHeader()：查询响应中的某个字段的值

 

6、响应内容为xml数据：

①服务器端：

设置响应内容类型：Content-Type，值为text/xml;charset=utf-8

response.setContentType("text/xml;charset=utf-8");

②客户端：

var doc = request.responseXML;//得到的是document对象

 

7、测试代码：

（1）GET请求与POST请求区别：

①GET请求页面代码：

[html]view plain copy

1. <span style="font-family:Times New Roman;font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8"  
2.     pageEncoding="UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <html>  
5.     <head>  
6.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
7.         <title>Get请求</title>  
8.         <script type="text/javascript">  
9.             //创建异步对象  
10.             function createXMLHttpRequest(){  
11.                 try{  
12.                     return new XMLHttpRequest();  
13.                 }catch(e){  
14.                     try{  
15.                         //IE6.0  
16.                         return new ActiveXObject("Msxml2.XMLHTTP");  
17.                     }catch(e){  
18.                         try{  
19.                             //IE5.5及更早版本  
20.                             return new ActiveObject("Microsoft.XMLHTTP");  
21.                         }catch(e){  
22.                             throw e;  
23.                         }  
24.                     }  
25.                 }  
26.             };  
27.           
28.             //在文档加载完毕后马上执行  
29.             window.onload = function(){  
30.                 //获取按钮  
31.                 var btn = document.getElementById("btn");  
32.                 //给按钮的点击事件注册监听  
33.                 btn.onclick = function(){  
34.                     //使用ajax的四步操作  
35.                     //1、得到异步对象  
36.                     var request = createXMLHttpRequest();   
37.                     //2、打开与服务器的连接  
38.                     request.open("GET", "/Learn201705/LoginServlet", true);  
39.                     //3、发送请求  
40.                     request.send(null);//不给null值FireFox可能无法发送  
41.                     //4、给异步对象的onreadystatechange事件注册监听器  
42.                     request.onreadystatechange = function(){  
43.                         //双重判断，request的状态为4（服务器响应结束）,以及服务器的状态码为200（响应成功）  
44.                         if(request.status = 200 && request.readyState == 4){  
45.                             //获取服务器的响应结果  
46.                             var content = request.responseText;  
47.                             var h1Content = document.getElementById("show");  
48.                             h1Content.innerHTML = content;  
49.                         }  
50.                     };  
51.                 };  
52.             };  
53.         </script>  
54.     </head>  
55.     <body>  
56.         <button id="btn">点击这里</button>  
57.         <h1 id="show"></h1>  
58.     </body>  
59. </html></span>  

②POST请求页面代码：

[html]view plain copy

1. <span style="font-family:Times New Roman;font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8"  
2.     pageEncoding="UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <html>  
5.     <head>  
6.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
7.         <title>Post请求</title>  
8.         <script type="text/javascript">  
9.             //创建异步对象  
10.             function createXMLHttpRequest(){  
11.                 try{  
12.                     return new XMLHttpRequest();  
13.                 }catch(e){  
14.                     try{  
15.                         //IE6.0  
16.                         return new ActiveXObject("Msxml2.XMLHTTP");  
17.                     }catch(e){  
18.                         try{  
19.                             //IE5.5及更早版本  
20.                             return new ActiveObject("Microsoft.XMLHTTP");  
21.                         }catch(e){  
22.                             throw e;  
23.                         }  
24.                     }  
25.                 }  
26.             };  
27.           
28.             //在文档加载完毕后马上执行  
29.             window.onload = function(){  
30.                 //获取按钮  
31.                 var btn = document.getElementById("btn");  
32.                 //给按钮的点击事件注册监听  
33.                 btn.onclick = function(){  
34.                     //使用ajax的四步操作  
35.                     //1、得到异步对象  
36.                     var request = createXMLHttpRequest();   
37.                     //2、打开与服务器的连接  
38.                     request.open("POST", "/Learn201705/LoginServlet", true);  
39.                     request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
40.                     //3、发送请求  
41.                     request.send("account=小邓&password=123456");//不给null值FireFox可能无法发送  
42.                     //4、给异步对象的onreadystatechange事件注册监听器  
43.                     request.onreadystatechange = function(){  
44.                         //双重判断，request的状态为4（服务器响应结束）,以及服务器的状态码为200（响应成功）  
45.                         if(request.status = 200 && request.readyState == 4){  
46.                             //获取服务器的响应结果  
47.                             var content = request.responseText;  
48.                             var h1Content = document.getElementById("show");  
49.                             h1Content.innerHTML = content;  
50.                         }  
51.                     };  
52.                 };  
53.             };  
54.         </script>  
55.     </head>  
56.     <body>  
57.         <button id="btn">点击这里</button>  
58.         <h1 id="show"></h1>  
59.     </body>  
60. </html></span>  

③Servlet代码：

[java]view plain copy

1. <span style="font-family:Times New Roman;font-size:14px;">package com.remoa;  
2.   
3. import java.io.IOException;  
4. import javax.servlet.ServletException;  
5. import javax.servlet.annotation.WebServlet;  
6. import javax.servlet.http.HttpServlet;  
7. import javax.servlet.http.HttpServletRequest;  
8. import javax.servlet.http.HttpServletResponse;  
9.   
10. @WebServlet(value="/LoginServlet")  
11. public class LoginServlet extends HttpServlet {  
12.     private static final long serialVersionUID = 1L;  
13.   
14.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
15.         System.out.println("------------doGet------------");  
16.         response.getWriter().print("Hello Remoa");  
17.     }  
18.   
19.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
20.         response.setContentType("text/html;charset=utf-8");//将响应编码设置为utf-8  
21.         request.setCharacterEncoding("utf-8");//将请求编码设置为utf-8  
22.         String account = request.getParameter("account");  
23.         String password = request.getParameter("password");  
24.         System.out.println("login");  
25.         response.getWriter().print("用户" + account + "已登录，密码为" + password);  
26.     }  
27.   
28. }  
29. </span>  

④运行结果：

图7.1 GET请求运行结果

图7.2 POST请求运行结果

（2）注册时判断用户名是否已注册
①注册页面代码：

[html]view plain copy

1. <span style="font-family:Times New Roman;font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8"  
2.     pageEncoding="UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <html>  
5. <head>  
6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
7.     <script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/js/jquery.min.js" ></script>  
8.     <script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/js/bootstrap.min.js" ></script>  
9.     <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/bootstrap/css/bootstrap.min.css" >  
10.     <title>用户注册</title>  
11.     <script type="text/javascript">  
12.         function createXMLHttpRequest(){  
13.             try{  
14.                 return new XMLHttpRequest();  
15.             }catch(e){  
16.                 try{  
17.                     //IE6.0  
18.                     return new ActiveXObject("Msxml2.XMLHTTP");  
19.                 }catch(e){  
20.                     try{  
21.                         //IE5.5及更早版本  
22.                         return new ActiveObject("Microsoft.XMLHTTP");  
23.                     }catch(e){  
24.                         throw e;  
25.                     }  
26.                 }  
27.             }  
28.         };  
29.           
30.         window.onload = function(){  
31.             var account = document.getElementById("account");  
32.             account.onblur = function(){  
33.                 var request = createXMLHttpRequest();  
34.                 request.open("POST", "/Learn201705/ValidateLogin", true);  
35.                 request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
36.                 request.send("account=" + account.value);  
37.                 request.onreadystatechange = function(){  
38.                     if(request.status == 200 && request.readyState == 4){  
39.                         //获取服务器的响应，判断是否为1，如果为1，则表示已注册，添加内容，如果为0，则表示该账户名未注册，什么都不做  
40.                         var text = request.responseText;  
41.                         var spanContent = document.getElementById("accountError");  
42.                         if(text == 1){  
43.                             spanContent.innerHTML = "<img src='img/false.png' class='wrong' />用户名已注册!";  
44.                         }else{  
45.                             if(account.value.length == 0 || account.value.substring(0,account.value.length) == 0){  
46.                                 spanContent.innerHTML = "<img src='img/false.png' class='wrong'/>输入不能为空或纯空格";  
47.                             }else{  
48.                                 spanContent.innerHTML = "<img src='img/true.png' />输入正确";  
49.                             }  
50.                         }  
51.                     }  
52.                 };  
53.             };  
54.         };  
55.       
56.         function CheckStrength(pwd){  
57.             var leftColor, middleColor, rightColor, colorHtml;  
58.             var m = 0;  
59.             var Modes = 0;  
60.             for(i = 0; i < pwd.length; i++){  
61.                 var charType = 0;  
62.                 var t = pwd.charCodeAt(i);  
63.                 //当字符为数字时，  
64.                 if(t >= 48 && t <= 57){  
65.                     charType = 1;  
66.                 }  
67.                 //当字符为小写字母时  
68.                 else if(t >= 97 && t <= 122){  
69.                     charType = 2;  
70.                 }  
71.                 //当字符为大写字母时  
72.                 else if(t >= 65 && t <= 90){  
73.                     charType = 4;  
74.                 }  
75.                 //为其他字符时  
76.                 else{  
77.                     charType = 4;  
78.                 }  
79.                 Modes |= charType;//按位或  
80.             }  
81.             //当密码只由一种元素组成或小于六位，判定为弱  
82.             //当密码由两种元素组成且大于等于六位时，判定为中  
83.             //当密码由三种元素组成且大于等于六位时，判定为强  
84.             //&的用法：两个操作数中的位都为1，结果才为1，否则为0  
85.             for(i = 0; i < 4; i++){  
86.                 if(Modes & 1){  
87.                     m++;//m为0为无密码，m为1为弱密码，m为2为中密码，m为3为强密码  
88.                 }  
89.                 Modes>>>=1;//无符号右移，空位用0补齐  
90.             }   
91.               
92.             //六位以下，都为弱密码  
93.             if(0 < pwd.length && pwd.length < 6){  
94.                 m = 1;  
95.             }  
96.             switch(m){  
97.                 //弱密码  
98.                 case 1:  
99.                     leftColor="pwd pwd_weak";  
100.                     middleColor="pwd";  
101.                     rightColor="pwd";  
102.                     colorHtml="弱";  
103.                     break;  
104.                 //中密码  
105.                 case 2:  
106.                     leftColor="pwd pwd_medium";  
107.                     middleColor="pwd pwd_medium";  
108.                     rightColor="pwd";  
109.                     colorHtml="中";  
110.                     break;  
111.                 //强密码  
112.                 case 3:  
113.                     leftColor="pwd pwd_strong";  
114.                     middleColor="pwd pwd_strong";  
115.                     rightColor="pwd pwd_strong";  
116.                     colorHtml="强";  
117.                     break;  
118.                 default:  
119.                     leftColor="pwd";  
120.                     middleColor="pwd";  
121.                     rightColor="pwd";  
122.                     colorHtml="无";  
123.                     break;  
124.             }  
125.             document.getElementById("pwd_weak").className = leftColor;  
126.             document.getElementById("pwd_medium").className = middleColor;  
127.             document.getElementById("pwd_strong").className = rightColor;  
128.             document.getElementById("pwd_medium").innerHTML = colorHtml;  
129.         };  
130.           
131.         $(document).ready(function(){  
132.             $("#account").focus(function(){  
133.                 $(this).parents(".form-group").find("#accountError").html("请输入用户名");  
134.             });  
135.               
136.             $("#password").focus(function(){  
137.                 $(this).parents(".form-group").find("#passwordError").html("请输入6-16位密码");  
138.             });  
139.               
140.             $("#password").blur(function(){  
141.                 //密码为空或长度小于6  
142.                 if($(this).val().length < 6){  
143.                     if($(this).val() == ""){  
144.                         $(this).parents(".form-group").find("#passwordError").html("<img src='img/false.png' class='wrong' />密码不能为空");  
145.                     }else{  
146.                         $(this).parents(".form-group").find("#passwordError").html("<img src='img/false.png' class='wrong' />密码长度不能少于六位");  
147.                     }  
148.                 }  
149.                 //密码长度大于16  
150.                 else if($(this).val().length > 16){  
151.                     $(this).parents(".form-group").find("#passwordError").html("<img src='img/false.png' class='wrong' />密码长度不能大于16位");  
152.                 }  
153.                 //正确情况  
154.                 else{  
155.                     $(this).parents(".form-group").find("#passwordError").html("<img src='img/true.png' />输入正确");  
156.                 }  
157.             });  
158.               
159.             $("#checkpassword").focus(function(){  
160.                 $(this).parents(".form-group").find("#checkError").html("请再次输入以确认密码");  
161.             });  
162.               
163.             $("#checkpassword").blur(function(){  
164.                 var pwd1 = $("#password").val();  
165.                 var pwd2 = $(this).val();  
166.                 //两次密码输入一致  
167.                 if(pwd1 == pwd2){  
168.                     $(this).parents(".form-group").find("#checkError").html("<img src='img/true.png' />输入正确");  
169.                 }  
170.                 //两次密码输入不一致  
171.                 else{  
172.                     $(this).parents(".form-group").find("#checkError").html("<img src='img/false.png' class='wrong' />两次密码输入不一致");  
173.                 }  
174.             });  
175.               
176.             //检测出错则不能提交  
177.             $("#submitBtn").click(function(){  
178.                 if($(this).parents().find("#account").val()=="" || $(this).parents().find("#password").val()=="" || $(this).parents().find("#checkpassword").val()==""){  
179.                     alert("请正确填写");  
180.                     return false;  
181.                 }  
182.                 else if($(this).parents().find("img").hasClass("wrong")){  
183.                     alert("请正确填写");  
184.                     return false;  
185.                 }else{  
186.                     return true;  
187.                 }  
188.             });  
189.         });  
190.     </script>  
191.     <style>  
192.         .pwd{  
193.             background-color:#F3F3F3;  
194.             border:1px solid #D0D0D0;  
195.         }  
196.         .pwd_font{  
197.             color:#BBBBBB;  
198.         }  
199.         .pwd_weak{  
200.             background-color:red;  
201.             border:1px solid #BB2B2B;  
202.         }  
203.         .pwd_medium{  
204.             background-color:#FFD35E;  
205.             border:1px solid #E9AE10;  
206.         }  
207.         .pwd_strong{  
208.             background-color:#3ABB1C;  
209.             border:1px solid #267A12;  
210.         }  
211.     </style>  
212. </head>  
213. <body>  
214.     <div class="container" style="margin-top:2rem">  
215.         <div class="row">  
216.             <div class="col-md-3"></div>  
217.             <div class="col-md-6">  
218.                 <form class="form-horizontal" method="post" action="RegisterServlet">  
219.                     <div class="form-group">  
220.                         <label for="account" class="control-label col-md-3">  
221.                             账户名：  
222.                         </label>  
223.                         <div class="col-md-5">  
224.                             <input type="text" class="form-control" name="account" id="account" placeholder="请输入账户名"/>  
225.                         </div>  
226.                         <div class="col-md-4">  
227.                             <span id="accountError"></span>  
228.                         </div>  
229.                     </div>  
230.                     <div class="form-group">  
231.                         <label for="password" class="control-label col-md-3">  
232.                             密码：  
233.                         </label>  
234.                         <div class="col-md-5">  
235.                             <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码" onKeyUp="CheckStrength(this.value)"/>  
236.                             <table class="col-md-3 table table-condensed" cellpadding="0" border="0" cellspacing="0" style="margin-bottom:0;margin-top:5px">  
237.                                 <tr align="center">  
238.                                     <td id="pwd_weak" class="pwd"> </td>  
239.                                     <td id="pwd_medium" class="pwd pwd_font">无</td>  
240.                                     <td id="pwd_strong" class="pwd"> </td>  
241.                                 </tr>  
242.                             </table>  
243.                         </div>  
244.                         <div class="col-md-4">  
245.                             <span id="passwordError"></span>  
246.                         </div>  
247.                     </div>  
248.                     <div class="form-group">  
249.                         <label for="checkpassword" class="control-label col-md-3">  
250.                             确认密码：  
251.                         </label>  
252.                         <div class="col-md-5">  
253.                             <input type="password" class="form-control" name="checkpassword" id="checkpassword" placeholder="请再次输入密码" />  
254.                         </div>  
255.                         <div class="col-md-4">  
256.                             <span id="checkError"></span>  
257.                         </div>  
258.                     </div>  
259.                     <input type="submit" id="submitBtn" class="btn btn-primary col-md-offset-3" style="width:10rem" value="注册"/>  
260.                 </form>  
261.             </div>  
262.         </div>  
263.     </div>  
264. </body>  
265. </html></span>  

②Servlet代码：

[java]view plain copy

1. <span style="font-family:Times New Roman;font-size:14px;">package com.remoa;  
2.   
3. import java.io.IOException;  
4. import java.util.ArrayList;  
5. import java.util.Iterator;  
6. import java.util.List;  
7.   
8. import javax.servlet.ServletException;  
9. import javax.servlet.annotation.WebServlet;  
10. import javax.servlet.http.HttpServlet;  
11. import javax.servlet.http.HttpServletRequest;  
12. import javax.servlet.http.HttpServletResponse;  
13.   
14. @WebServlet("/ValidateLogin")  
15. public class ValidateLogin extends HttpServlet {  
16.     private static final long serialVersionUID = 1L;  
17.   
18.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
19.         response.getWriter().append("Served at: ").append(request.getContextPath());  
20.     }  
21.   
22.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
23.         String account = request.getParameter("account");  
24.         List<String> accountList = new ArrayList<String>();  
25.         accountList.add("remoa1");  
26.         accountList.add("remoa2");  
27.         accountList.add("remoa3");  
28.         accountList.add("remoa4");  
29.         for(Iterator<String> iter = accountList.iterator(); iter.hasNext();){  
30.             if(account.equals(iter.next())){  
31.                 response.getWriter().print("1");  
32.                 return;  
33.             }  
34.         }  
35.         response.getWriter().println("0");  
36.     }  
37. }  
38. </span>  

③运行结果：

图7.3 用户名检测运行结果

图7.4 非正确填写点击提交事件响应结果

（3）响应内容为XML数据：

①页面示例代码版本一：

[html]view plain copy

1. <span style="font-family:Times New Roman;font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8"  
2.     pageEncoding="UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <html>  
5.     <head>  
6.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
7.         <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/bootstrap/css/bootstrap.min.css" >  
8.         <title>获取xml数据</title>  
9.         <script type="text/javascript">  
10.             //创建异步对象  
11.             function createXMLHttpRequest(){  
12.                 try{  
13.                     return new XMLHttpRequest();  
14.                 }catch(e){  
15.                     try{  
16.                         //IE6.0  
17.                         return new ActiveXObject("Msxml2.XMLHTTP");  
18.                     }catch(e){  
19.                         try{  
20.                             //IE5.5及更早版本  
21.                             return new ActiveObject("Microsoft.XMLHTTP");  
22.                         }catch(e){  
23.                             throw e;  
24.                         }  
25.                     }  
26.                 }  
27.             };  
28.           
29.             //在文档加载完毕后马上执行  
30.             window.onload = function(){  
31.                 //获取按钮  
32.                 var btn = document.getElementById("btn");  
33.                 //给按钮的点击事件注册监听  
34.                 btn.onclick = function(){  
35.                     //使用ajax的四步操作  
36.                     //1、得到异步对象  
37.                     var request = createXMLHttpRequest();   
38.                     //2、打开与服务器的连接  
39.                     request.open("GET", "/Learn201705/XMLServlet", true);  
40.                     //3、发送请求  
41.                     request.send(null);//不给null值FireFox可能无法发送  
42.                     //4、给异步对象的onreadystatechange事件注册监听器  
43.                     request.onreadystatechange = function(){  
44.                         //双重判断，request的状态为4（服务器响应结束）,以及服务器的状态码为200（响应成功）  
45.                         if(request.status = 200 && request.readyState == 4){  
46.                             //获取服务器的响应结果  
47.                             var doc = request.responseXML.documentElement;  
48.                             var stuArr = doc.getElementsByTagName("student");  
49.                             var number, name, sex, age;  
50.                             var text = "<table class='table table-condensed table-bordered table-striped'><tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th></tr>";  
51.                             for(i = 0; i < stuArr.length; i++){  
52.                                 text = text + "<tr>";  
53.                                 number = stuArr[i].getAttribute("number");  
54.                                 try{  
55.                                     text = text + "<td>" + number + "</td>";  
56.                                 }catch(e){  
57.                                     text = text + "<td>/</td>";  
58.                                 }  
59.                                 name = stuArr[i].getElementsByTagName("name");  
60.                                 try{  
61.                                     text = text + "<td>" + name[0].firstChild.nodeValue + "</td>";  
62.                                 }catch(e){  
63.                                     text = text + "<td>/</td>";  
64.                                 }  
65.                                 sex = stuArr[i].getElementsByTagName("sex");  
66.                                 try{  
67.                                     text = text + "<td>" + sex[0].firstChild.nodeValue  + "</td>";  
68.                                 }catch(e){  
69.                                     text = text + "<td>/</td>";  
70.                                 }  
71.                                 age = stuArr[i].getElementsByTagName("age");  
72.                                 try{  
73.                                     text = text + "<td>" + age[0].firstChild.nodeValue  + "</td>";  
74.                                 }catch(e){  
75.                                     text = text + "<td>/</td>";  
76.                                 }  
77.                                 text = text + "</tr>";  
78.                             }  
79.                             text = text + "</table>";  
80.                             document.getElementById("show").innerHTML = text;  
81.                         }  
82.                     };  
83.                 };  
84.             };  
85.         </script>  
86.     </head>  
87.     <body>  
88.         <div class="container">  
89.             <button id="btn" class="btn btn-primary">点击这里</button>  
90.             <h1 id="show"></h1>  
91.         </div>  
92.     </body>  
93. </html></span>  

页面示例代码版本二：

[html]view plain copy

1. <span style="font-family:Times New Roman;font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8"  
2.     pageEncoding="UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <html>  
5.     <head>  
6.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
7.         <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/bootstrap/css/bootstrap.min.css" >    
8.         <title>获取xml数据</title>  
9.         <script type="text/javascript">  
10.             //创建异步对象  
11.             function createXMLHttpRequest(){  
12.                 try{  
13.                     return new XMLHttpRequest();  
14.                 }catch(e){  
15.                     try{  
16.                         //IE6.0  
17.                         return new ActiveXObject("Msxml2.XMLHTTP");  
18.                     }catch(e){  
19.                         try{  
20.                             //IE5.5及更早版本  
21.                             return new ActiveObject("Microsoft.XMLHTTP");  
22.                         }catch(e){  
23.                             throw e;  
24.                         }  
25.                     }  
26.                 }  
27.             };  
28.           
29.             //在文档加载完毕后马上执行  
30.             window.onload = function(){  
31.                 //获取按钮  
32.                 var btn = document.getElementById("btn");  
33.                 //给按钮的点击事件注册监听  
34.                 btn.onclick = function(){  
35.                     //使用ajax的四步操作  
36.                     //1、得到异步对象  
37.                     var request = createXMLHttpRequest();   
38.                     //2、打开与服务器的连接  
39.                     request.open("GET", "/Learn201705/XMLServlet", true);  
40.                     //3、发送请求  
41.                     request.send(null);//不给null值FireFox可能无法发送  
42.                     //4、给异步对象的onreadystatechange事件注册监听器  
43.                     request.onreadystatechange = function(){  
44.                         //双重判断，request的状态为4（服务器响应结束）,以及服务器的状态码为200（响应成功）  
45.                         if(request.status = 200 && request.readyState == 4){  
46.                             //获取服务器的响应结果  
47.                             var doc = request.responseXML.documentElement;  
48.                             var stuArr = doc.getElementsByTagName("student");  
49.                             var text = "<table class='table table-condensed table-bordered table-striped'><tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th></tr>";  
50.                             var name, sex, number, age;  
51.                             for(i = 0; i < stuArr.length; i++){  
52.                                 text = text + "<tr>";  
53.                                 var arr = stuArr[i];  
54.                                 number = arr.getAttribute("number");  
55.                                 if(number == null){  
56.                                     number = "/";  
57.                                 }  
58.                                 try{  
59.                                     name = arr.getElementsByTagName("name")[0].textContent;   
60.                                 }catch(e){  
61.                                     name = "/";  
62.                                 }  
63.                                 try{  
64.                                     sex = arr.getElementsByTagName("sex")[0].textContent;  
65.                                 }catch(e){  
66.                                     name = "/";  
67.                                 }  
68.                                 try{  
69.                                     age = arr.getElementsByTagName("age")[0].textContent;  
70.                                 }catch(e){  
71.                                     age = "/";  
72.                                 }  
73.                                 text = text + "<td>" + number + "</td><td>" + name + "</td><td>" + sex + "</td><td>" + age + "</td></tr>";  
74.                             }  
75.                             text = text + "</table>";  
76.                             document.getElementById("show").innerHTML = text;  
77.                         }  
78.                     };  
79.                 };  
80.             };  
81.         </script>  
82.     </head>  
83.     <body>  
84.         <div class="container">    
85.             <button id="btn" class="btn btn-primary">点击这里</button>    
86.             <h1 id="show"></h1>    
87.         </div>    
88.     </body>  
89. </html></span>  

②Servlet代码：

[java]view plain copy

1. <span style="font-family:Times New Roman;font-size:14px;">package com.remoa;  
2.   
3. import java.io.IOException;  
4. import javax.servlet.ServletException;  
5. import javax.servlet.annotation.WebServlet;  
6. import javax.servlet.http.HttpServlet;  
7. import javax.servlet.http.HttpServletRequest;  
8. import javax.servlet.http.HttpServletResponse;  
9.   
10. @WebServlet("/XMLServlet")  
11. public class XMLServlet extends HttpServlet {  
12.     private static final long serialVersionUID = 1L;  
13.   
14.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
15.         System.out.println("进来------------XMLServlet");  
16.         String xml = "<students>"  
17.                         + "<student number='3114005847'>"  
18.                             + "<name>张三</name>"  
19.                             + "<sex>male</sex>"  
20.                             + "<age>18</age>"  
21.                         + "</student>"  
22.                         + "<student number='3114005848'>"  
23.                             + "<name>李四</name>"  
24.                             + "<sex>male</sex>"  
25.                         + "</student>"  
26.                         + "<student number='3114005849'>"  
27.                             + "<name>王五</name>"  
28.                             + "<age>18</age>"  
29.                             + "<tel>13334445556</tel>"  
30.                     + "</student>"  
31.                     + "</students>";  
32.         response.setContentType("text/xml;charset=utf-8");  
33.         response.getWriter().print(xml);  
34.     }  
35.   
36.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
37.         doGet(request, response);  
38.     }  
39.   
40. }</span>  

③运行结果：

图7.5 响应结果

四、Ajax案例一：用户名自动检测

这里主要是一个输入框，从里面输入内容的时候移开鼠标跳到下一个输入框的时候，右边会自动检测内容。这里以注册时的用户名检测为例，这里暂时把内容固定写入了这个sevlet文件，你可以选择使用jdbc到数据库中查询该用户是否存在，这里为了更方便的演示ajax的作用，遂没有用数据库了。自动检测可以使用get方法和post方法。这里都会进行讲解。

4.1 GET方式

这里的自动提示是以文字提示为例：

我们可以在myeclipse中新建一个web工程，然后写一个注册的jsp文件,这里命名为register.jsp。

在这个jsp中的html中的body下把这个表单先写好，并给其id，这里的作用主要是为了给后面的内容通过getElementById进行元素查找。

[html] view plain copy print?

1. <form >  
2.     用户名:<input id="usernameID" type="text"  name="username"  maxlength="10" /> <span   id="resID"></span>  
3.   </form>  

因为有的浏览器可能会不支持ajax，所以我们需要来判断一个浏览器是否兼容。这里也就是先创建一个ajax对象。

[javascript] view plain copy print?

1. function createAJAX(){  
2.         var ajax=null;  
3.         try{  
4.             ajax=new ActiveXObject("microsoft.xmlhttp");  
5.           
6.         }catch(e1){  
7.             try{  
8.                 ajax=new XMLHttpRequest();  
9.             }catch(e2){  
10.                 alert("您的浏览器不支持ajax，请更换浏览器试试！");  
11.             }  
12.         }  
13.         return ajax;  
14.     }  

然后就是按照前面分享的编码步骤进行：

[javascript] view plain copy print?

1. //定位文本框，同时提供焦点事件  
2.    document.getElementById("usernameID").οnblur=function(){  
3.         //获取文本框中输入的值  
4.         var username=this.value.trim();  
5.           
6.         //如果内容为空  
7.         if(username.length==0){  
8.             document.getElementById("resID").innerHTML="用户名不能为空";  
9.         }else{  
10.             //对网址中的汉字进行utf-8编码  
11.             username=encodeURI(username);  
12.             var ajax=createAJAX();  
13.               
14.             var method="GET";  
15.             var url="${pageContext.request.contextPath}/servlet/UserServlet?time="+new Date().getTime()+"&username="+username;  
16.             ajax.open(method,url);  
17.               
18.             ajax.send(null);  
19.               
20.             ajax.onreadystatechange=function(){  
21.                 if(ajax.readyState==4){  
22.                     if(ajax.status==200){  
23.                         var tip=ajax.responseText;  
24.                           
25.                         document.getElementById("resID").innerHTML=tip;  
26.                       
27.                     }  
28.                 }  
29.   
30.             }  
31.               
32.         }     
33.    }  

这里我们需要用到servlet来做服务器的接收和验证操作。这里是通过get方法来实现的。

[java] view plain copy print?

1. public void doGet(HttpServletRequest request, HttpServletResponse response)  
2.             throws ServletException, IOException {  
3.         String username=request.getParameter("username");  
4.         byte[] buf = username.getBytes("ISO-8859-1");  
5.         username = new String(buf,"UTF-8");  
6.         //System.out.println(username);  
7.         String tip="<font color='green'>可注册</font>";  
8.         if("朱培".equals(username)){  
9.             tip="<font color='red'>该用户已存在</font>";    
10.         }  
11.         response.setContentType("text/html;charset=UTF-8");  
12.         PrintWriter pw=response.getWriter();  
13.         pw.write(tip);  
14.         pw.flush();  
15.         pw.close();  
16.           
17.     }  

运行Tomcat服务器。通过地址进行访问。

效果如下：当鼠标移开的时候，如果库中有则会提示用户已存在。

若用户不存在，则可以进行注册。

4.2 POST方式

post方式很多都与get方法类似，但是还是有区别的，例如post方法需要设置ajax请求头为post，它会将请求的汉字自动进行utf-8的编码。这里用图片提示为例：

[javascript] view plain copy print?

1. //定位文本框，同时提供焦点事件  
2.    document.getElementById("usernameID").οnblur=function(){  
3.         //获取文本框中输入的值  
4.         var username=this.value.trim();  
5.           
6.         //如果内容为空  
7.         if(username.length==0){  
8.             document.getElementById("resID").innerHTML="用户名不能为空";  
9.         }else{  
10.       
11.             var ajax=createAJAX();  
12.               
13.             var method="POST";  
14.             var url="${pageContext.request.contextPath}/servlet/UserServlet?time="+new Date().getTime();  
15.             ajax.open(method,url);  
16.               
17.             //设置ajax请求头为post，它会将请求的汉字自动进行utf-8的编码  
18.             ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");  
19.           
20.               
21.             var content="username="+username;  
22.             ajax.send(content);  
23.               
24.             ajax.onreadystatechange=function(){  
25.                 if(ajax.readyState==4){  
26.                     if(ajax.status==200){  
27.                         var tip=ajax.responseText;  
28.                           
29.                         var imgElement = document.createElement("img");  
30.                         //设置img标签的src/width/height的属性值  
31.                         imgElement.src = tip;  
32.                         imgElement.style.width = "15px";  
33.                         imgElement.style.height = "15px";  
34.                         //定位span标签  
35.                         var spanElement = document.getElementById("resID");  
36.                         //清空span标签中的内容  
37.                         spanElement.innerHTML = "";  
38.                         //将img标签加入到span标签中  
39.                         spanElement.appendChild(imgElement);  
40.                           
41.                     }  
42.                 }  
43.               
44.             }  
45.               
46.         }else{  var spanElement = document.getElementById("resID");  
47.             spanElement.innerHTML = "";  
48. }     
49. }  

这段代码的第6布就是将从服务器中读取到的图片进行解析并且显示到span中，也就是我们前面设置的那个html页面。

对于selvet，使用post方法：

[java] view plain copy print?

1. public void doPost(HttpServletRequest request, HttpServletResponse response)  
2.             throws ServletException, IOException {  
3.   
4.         request.setCharacterEncoding("UTF-8");  
5.         String username=request.getParameter("username");  
6.           
7.         String tip="images/b.jpg";  
8.         if("朱培".equals(username)){  
9.             tip="images/a.jpg";   
10.         }  
11.         response.setContentType("text/html;charset=UTF-8");  
12.         PrintWriter pw=response.getWriter();  
13.         pw.write(tip);  
14.         pw.flush();  
15.         pw.close();  
16.     }  

效果如下：

五、Ajax案例二：省市级联

关于省市级联的案例非常非常多，这里主要是通过客户端使用ajax进行无刷新拿到服务器中的数据。

首先要把html文件写好，

[html] view plain copy print?

1. <select id="provinceID"  style="width:120px">  
2.         <option>选择省份</option>  
3.         <option>湖南省</option>  
4.         <option>广东省</option>  
5.     </select>  
6.       
7.     <select  id="cityID">  
8.         <option>选择城市</option>  
9.    
10.     </select>  

还需要我们把之前写的那个createAJAX()引入进来。

[javascript] view plain copy print?

1. <script  type="text/javascript"  src="js/ajax.js"></script>  

然后就继续在这个script脚本中进行编写了。

[javascript] view plain copy print?

1. //定位省份下拉框，同时添加内容改变事件  
2.         document.getElementById("provinceID").οnchange=function(){  
3.             //清空  
4.             var cityElement=document.getElementById("cityID");  
5.             cityElement.options.length=1; //只保留第一个                    
6.               
7.             //获取选中省份的名字  
8.             var index=this.selectedIndex;  
9.             var optionElement=this[index];  
10.             //获取选中的option标签中的内容  
11.             var province=optionElement.innerHTML;  
12.               
13.             if("选择省份"!=province){  
14.               
15.               
16.                 var ajax=createAJAX();  
17.                   
18.                 var method="POST";  
19.                 var url="${pageContext.request.contextPath}/servlet/Province?time="+new Date().getTime();  
20.                 ajax.open(method,url);  
21.                   
22.                     //设置ajax请求头为post，它会将请求体重的汉子自动进行utf-8的编码  
23.                 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");  
24.                   
25.                 var content="province="+province;  
26.                 ajax.send(content);  
27.                   
28.                 ajax.onreadystatechange=function(){  
29.                 <span style="white-space:pre">      </span>  
30.                     if(ajax.readyState==4){  
31.                         if(ajax.status==200){  
32.                             var xmlDocument=ajax.responseXML;  
33.                               
34.                               
35.                             //按照dom去解析xml文档  
36.                             var cityElementArray=xmlDocument.getElementsByTagName("city");  
37.                             var size=cityElementArray.length;  
38.                             for(var i=0;i<size;i++){  
39.                             //innerHTML只能在html/jsp中使用，不能再xml中使用  
40.                                 var city=cityElementArray[i].firstChild.nodeValue;  
41.                                 var optionElement=document.createElement("option");  
42.                                   
43.                                 optionElement.innerHTML=city;  
44.                                   
45.                                 cityElement.appendChild(optionElement);  
46.                               
47.                             }  
48.                               
49.                         }  
50.                     }  
51.                   
52.                 }  
53.               
54.             }  
55.           
56.         }  

对于服务端，采用的是post方法：

[java] view plain copy print?

1. public void doPost(HttpServletRequest request, HttpServletResponse response)  
2.             throws ServletException, IOException {  
3.   
4.         request.setCharacterEncoding("UTF-8");  
5.         String province=request.getParameter("province");  
6.         //xml格式的数据  
7.         response.setContentType("text/xml;charset=UTF-8");  
8.         PrintWriter pw = response.getWriter();  
9.           
10.         pw.write("<?xml version='1.0'  encoding='UTF-8' ?>");  
11.         pw.write("<root>");  
12.           
13.         if("广东省".equals(province)){  
14.             pw.write("<city>广州</city>");  
15.             pw.write("<city>深圳</city>");  
16.             pw.write("<city>佛山</city>");  
17.         }else if("湖南省".equals(province)){  
18.             pw.write("<city>长沙</city>");  
19.             pw.write("<city>衡阳</city>");  
20.             pw.write("<city>永州</city>");  
21.             pw.write("<city>株洲</city>");  
22.         }  
23.         pw.write("</root>");  
24.         pw.flush();  
25.         pw.close();  
26.           
27.           
28.           
29.     }  

效果如下：

这里是会无刷新操作，可以给用户发出好的交互体验。

五、总结

Ajax是一种异步刷新的方式，AJAX是一个【局部刷新】的【异步】通讯技术。 AJAX不是全新的语言，是2005年Google公司推出的一种全新【编程模式】，不是新的编程语言。

我们需要熟练掌握xmlhttpRequest 的使用。熟练使用ajax进行编程。