目的：简化客户端与服务端进行局部刷新的异步通讯
（1）取得服务端当前时间
简单形式：jQuery对象.load(url)
返回结果自动添加到jQuery对象代表的标签中间
如果是Servlet的话，采用的是GET方式
复杂形式：jQuery对象.load(url,sendData,function(backData,textStatus,ajax){... ...})
sendData = {"user.name":"jack","user.pass":"123"};
以JSON格式文本方式发送，使用POST方式发送，服务端能收到数据
注意：对于load方法而言，如果请求体无参数发送的话，load方法
采用GET方式提交
注意：对于load方法而言，如果请求体有参数发送的话，load方法
采用POST方式提交
注意：使用load方法时，自动进行编码，无需手工编码
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>取得服务端当前时间</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> </head> <body> 当前时间：<span id="time"></span><br/> <input type="button" value="获取时间"/> <script type="text/javascript"> $(":button").click(function(){ //参数一:发送的路径 var url = "${pageContext.request.contextPath}/servlet/TimeServlet?time="+new Date().getTime(); //参数二:以JSON文本书写的发送的参数 var sendDate = { "name" : "哈哈", "sal" : 6000 }; //参数三:回调函数 $("#time").load(url,sendDate,function(backData,textStatus,xmlHttpRequest){ //回调函数中参数一：backData表示返回的数据，它是js对象 //回调函数中参数二：textStatus表示返回状态的文本描述，例如：success，error， //回调函数中参数三：xmlHttpRequest表示ajax中的核心对象 //alert("backData=" + backData);//它是一个js对象 //alert("textStatus=" + textStatus); //alert("xmlHttpRequest=" + xmlHttpRequest.readyState); //alert("xmlHttpRequest=" + xmlHttpRequest.status); //alert("xmlHttpRequest=" + xmlHttpRequest.responseText);//它是一个字符串 //项目中只需要使用backDate即可 }); //$("#time").load(url,sendDate); //$("#time").load(url); }); </script> </body> </html>
package loaderman.time; import java.io.IOException; import java.io.PrintWriter; import java.text.SimpleDateFormat; import java.util.Date; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * 取得服务端当前时间 * @author AdminTC */ public class TimeServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { System.out.println("GET"); String name = request.getParameter("name"); String sal = request.getParameter("sal"); System.out.println(name+":"+sal); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String str = sdf.format(new Date()); response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(str); pw.flush(); pw.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { System.out.println("POST"); String name = request.getParameter("name"); String sal = request.getParameter("sal"); System.out.println(name+":"+sal); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String str = sdf.format(new Date()); response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(str); pw.flush(); pw.close(); } }
load()方法参数解释：
参数一：url发送到哪里去
参数二： sendData发送请求体中的数据，符合JSON格式，例如：{key:value,key:value}
参数三：function处理函数，类似于传统方式ajax.onreadystatechange = 处理函数
其中参数三为function处理函数最多可以接收三个参数，含义如下
第一个参数：服务端返回的数据，例如：backData
第二个参数：服务端状态码的文本描述，例如：success、error、
第三个参数：ajax异步对象，即XMLHttpRequest对象
以上所有参数的名字可以任意，但必须按顺序书写，尽量做到见名知意
检查注册用户名和密码是否存在
$.get(url,sendData,function(backData,textStatus,ajax){... ...})
$.post(url,sendData,function(backData,textStatus,ajax){... ...})赵君提倡
注意：使用get或post方法时，自动进行编码，无需手工编码
jQuery对象.serialize()
作用：自动生成JSON格式的文本
注意：为每个jQuery对象设置一个name属性，因为name属性会被认为请求参数名
注意：必须用<form>标签元素
适用：如果属性过多，强烈推荐采用这个API
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>检查注册用户名和密码是否存在</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> </head> <body> <!-- 在异步提交的方式下，form标签的action和method属性没有意义 --> <form action="01_time.jsp" method="GET"> <table border="2" align="center"> <tr> <th>用户名</th> <td><input type="text" name="username"/></td> </tr> <tr> <th>密码</th> <td><input type="password" name="password"/></td> </tr> <tr> <td colspan="2" align="center"> <input type="button" value="检查" style="111px"/> </td> </tr> </table> </form> <span></span> <script type="text/javascript"> $(":button").click(function(){ var username = $(":text").val();//哈哈 var password = $(":password").val();//123 var url = "${pageContext.request.contextPath}/servlet/UserServlet?time="+new Date().getTime(); /*手工写JSON文本 var sendData = { "username" : username, "password" : password }; */ var sendData = $("form").serialize(); $.post(url,sendData,function(backDate){ //backDate： //如果服务器返回html，即backDate就是string，不要解析 //如果服务器返回json，即backDate就是object，要解析 //如果服务器返回xml，即backDate就是object，要解析 var $img = $("<img src='"+backDate+"' width='14px' height='14px'>"); $("span").text(""); $("span").append($img); }); }); </script> </body> </html>
package loaderman.user; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * 检查注册用户名和密码是否存在 * @author AdminTC */ public class UserServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String username = request.getParameter("username");//哈哈 String password = request.getParameter("password");//123 String tip = "images/MsgSent.gif"; if("哈哈".equals(username) && "123".equals(password)){ tip = "images/MsgError.gif"; } response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(tip); pw.flush(); pw.close(); } }