jquery ajax例子

（1）取得服务端当前时间
jquery对象.load(url,sendData,function(backData,textStatus,xhr){... ...})
load()：如果无参的话，就以GET方式发送
如果有参的话，就以POST方式发送

（2）检查注册用户名是否存在
$.get(url,sendData,function(backData,textStatus,xhr){... ...})
$.post(url,sendData,function(backData,textStatus,xhr){... ...})

getTime.jsp

 1 <%@ page language="java" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 3 <html>
 4   <head>
 5       <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
 6   </head>
 7   <body>
 8       <input type="button" value="获取时间"/>
 9       <hr/>
10       <div></div>
11       <script type="text/javascript">
12           $(":button").click(function(){
13               /*
14                 url表示异步请求的路径
15                 sendData表示发送的数据，该数据的格式为{"key":value,"key":value}
16                 function(){}表示回调处理函数，由服务端触发，类似于xhr.onreadystatechange
17               */
18               var url = "/jsExamples/TimeServlet?time="+new Date().getTime();
19             var sendData = {"username":"杰克","password":"102030"};
20               //哪个jquery对象调用load()方法，
21               //返回值就设置到这个jquery对象的html()方法中
22               $("div").load(url,sendData,function(backData,textStatus,xhr){
23                   alert(backData+":"+textStatus+":"+xhr.status)
24               });
25           });
26       </script>    
27   </body>
28 </html>

TimeServlet.java

 1 package cn.itcast.web.servlet;
 2 
 3 import java.io.IOException;
 4 import java.text.DateFormat;
 5 import java.util.Date;
 6 import java.util.Locale;
 7 import javax.servlet.ServletException;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 public class TimeServlet extends HttpServlet {
13     public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
14         DateFormat df = DateFormat.getDateTimeInstance(
15                 DateFormat.FULL,
16                 DateFormat.DEFAULT, 
17                 Locale.CHINA);
18         String now = df.format(new Date());
19         response.setContentType("text/html;charset=UTF-8");
20         response.getWriter().write(now);
21     }
22     public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
23         request.setCharacterEncoding("UTF-8");
24         response.setContentType("text/html;charset=UTF-8");
25         String ip = request.getRemoteAddr();
26         if(ip.equals("127.0.0.1")){
27             String username = request.getParameter("username");
28             String password = request.getParameter("password");
29             response.getWriter().write(username+":"+password);
30         }
31     }
32 }

ajax_2.jsp 调用$.get()方法

 1 <%@ page language="java" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 3 <html>
 4   <head>
 5       <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
 6   </head>
 7   <body>
 8     用户名[GET]：<input type="text"/><span></span>
 9     <script type="text/javascript">
10         $(":text").blur(function(){
11             //获取用户在文本框中填入的值
12             var username = $(this).val();
13             //去空格
14             username = $.trim(username);
15             //判断
16             if(username==null || username.length==0){
17                 $("span").html("用户名必填");
18             }else{
19                 /*
20                 回调函数有三个参数：
21                 backData:表示服务端返回的数据
22                 textStatus:表示服务端返回的数据的文本表达，如果成功，返回success
23                 xhr:表示ajax引警对象
24                 */
25                 var url = "/day30/UserServlet?time="+new Date().getTime();
26                 var sendData = {"username":username};
27                 $.get(url,sendData,function(backData,textStatus,xhr){
28                     //定位span标签
29                     var $span = $("span");
30                     //将清span标签中的内容
31                     $span.html("");
32                     //创建img标签
33                     var $img = $("<img src='" + backData + "'/>")
34                     //将img标签设置到span标签内部，形成父子关系
35                     $span.append( $img );
36                 });
37             }
38         });    
39     </script> 
40   </body>
41 </html>

ajax_3.jsp调用 $.post()方法

 1 <%@ page language="java" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 3 <html>
 4   <head>
 5       <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
 6   </head>
 7   <body>
 8     用户名[POST]：<input type="text" name="username"/>
 9     <span></span>
10     <script type="text/javascript">
11         $(":text").blur(function(){
12             //获取用户在文本框中填入的值
13             var username = $(this).val();
14             //去空格
15             username = $.trim(username);
16             //判断
17             if(username==null || username.length==0){
18                 $("span").html("<font color='red'><b>用户名必填</b></font>");
19             }else{
20                 /*
21                 回调函数有三个参数：
22                 backData:表示服务端返回的数据
23                 textStatus:表示服务端返回的数据的文本表达，如果成功，返回success
24                 xhr:表示ajax引警对象
25                 */
26                 var url = "/day30/UserServlet?time="+new Date().getTime();
27                 //var sendData = {"username":username};传统
28                 var sendData = $(":text").serialize();//优化
29                 $.post(url,sendData,function(backData,textStatus,xhr){
30                     //定位span标签
31                     var $span = $("span");
32                     //将清span标签中的内容
33                     $span.html("");
34                     //创建img标签
35                     var $img = $("<img width='30' height='30' src='" + backData + "'/>")
36                     //将img标签设置到span标签内部，形成父子关系
37                     $span.append( $img );
38                 });
39             }
40         });    
41     </script> 
42   </body>
43 </html>

UserServlet.java

 1 package cn.itcast.web.servlet;
 2 
 3 import java.io.IOException;
 4 import javax.servlet.ServletException;
 5 import javax.servlet.http.HttpServlet;
 6 import javax.servlet.http.HttpServletRequest;
 7 import javax.servlet.http.HttpServletResponse;
 8 
 9 public class UserServlet extends HttpServlet {
10     public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
11         String username = request.getParameter("username");
12         byte[] buf = username.getBytes("ISO8859-1");
13         username = new String(buf,"UTF-8");
14         String imagePath = "images/MsgSent.gif";
15         if("哈哈".equals(username)){
16             imagePath = "images/MsgError.gif";
17         }
18         response.setContentType("text/html;charset=UTF-8");
19         response.getWriter().write(imagePath);
20     }
21     public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
22         request.setCharacterEncoding("UTF-8");
23         String username = request.getParameter("username");
24         String imagePath = "images/MsgSent.gif";
25         if("哈哈".equals(username)){
26             imagePath = "images/MsgError.gif";
27         }
28         response.setContentType("text/html;charset=UTF-8");
29         response.getWriter().write(imagePath);
30     }
31 }