（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 }