ajax例子

谁践踏了优雅 2022-06-10 07:53 177阅读 0赞

# 一、Ajax简介 #

AJAX全称为“Asynchronous [JavaScript][] and XML”(异步[javascript][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][JavaScript] and XML（异步的 [ javascript][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][view plain]

②POST请求页面代码：

**\[html\]**[view plain][] [ copy][view plain]

③Servlet代码：

**\[java\]**[view plain][] [ copy][view plain]

④运行结果：

![Center][]

图7.1 GET请求运行结果

![Center 1][]

图7.2 POST请求运行结果

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

**\[html\]**[view plain][] [ copy][view plain]

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][view plain]

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>

③运行结果：

![Center 2][]

图7.3 用户名检测运行结果

![Center 3][]

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

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

①页面示例代码版本一：

**\[html\]**[view plain][] [ copy][view plain]

页面示例代码版本二：

**\[html\]**[view plain][] [ copy][view plain]

②Servlet代码：

**\[java\]**[view plain][] [ copy][view plain]

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>

③运行结果：

![Center 4][]

图7.5 响应结果

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

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

## 4.1 GET方式 ##

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

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

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

**\[html\]** [ view plain][view plain 1] [ copy][view plain 1] [ print][view plain 1][?][view plain 1]

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

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

**\[javascript\]** [ view plain][view plain 1] [ copy][view plain 1] [ print][view plain 1][?][view plain 1]

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][view plain 1] [ copy][view plain 1] [ print][view plain 1][?][view plain 1]

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

**\[java\]** [ view plain][view plain 1] [ copy][view plain 1] [ print][view plain 1][?][view plain 1]

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服务器。通过地址进行访问。

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

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

![Center 5][]

## 4.2 POST方式 ##

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

**\[javascript\]** [ view plain][view plain 1] [ copy][view plain 1] [ print][view plain 1][?][view plain 1]

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][view plain 1] [ copy][view plain 1] [ print][view plain 1][?][view plain 1]

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.     \}

效果如下：

![Center 6][]

# 五、Ajax案例二：省市级联 #

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

首先要把html文件写好，

**\[html\]** [ view plain][view plain 1] [ copy][view plain 1] [ print][view plain 1][?][view plain 1]

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][view plain 1] [ copy][view plain 1] [ print][view plain 1][?][view plain 1]

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

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

**\[javascript\]** [ view plain][view plain 1] [ copy][view plain 1] [ print][view plain 1][?][view plain 1]

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][view plain 1] [ copy][view plain 1] [ print][view plain 1][?][view plain 1]

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.     \}

效果如下：

![Center 7][]

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

# 五、总结 #

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

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

![Center 8][]

[JavaScript]: http://lib.csdn.net/base/javascript
[PHP]: http://lib.csdn.net/base/php
[view plain]: http://blog.csdn.net/Remoa_Dengqinyi/article/details/72480399?ABstrategy=codes_snippets_optimize_v4#
[Center]: /images/20220610/37b20e7e898f40bea2cc00fc27f175c6.png
[Center 1]: /images/20220610/aae42e5485f74fe0ac1d66b3226a4312.png
[Center 2]: /images/20220610/4281c625ad1f4db4b79ff4e407c34089.png
[Center 3]: /images/20220610/7124bee451d04ad9a457d6b0edce172c.png
[Center 4]: /images/20220610/a820f965be464abfbc3aab3323bffb62.png
[view plain 1]: http://blog.csdn.net/sdksdk0/article/details/51727377?locationNum=7&fps=1#
[Center 5]: /images/20220610/da44d1e16f734c25b22774c7c3980073.png
[Center 6]: /images/20220610/dbaa8e1247174476914b02daaf90bfab.png
[Center 7]: /images/20220610/bd24706183a948bc8b9bd3f1d94ee5ae.png
[Center 8]: /images/20220610/2b146f4d0e9d46a9b83ec83733253a21.png