jQuery常用AJAX-API
目的：簡化客戶端與服務端進行區域性重新整理的非同步通訊
（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="width: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(); } }