一. 使用JQuery的$.get()方法實現異步請求
1. 編寫JSP
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 7 <script type="text/javascript" src="js/verify_jquery_get.js"></script> 8 </head> 9 <body> 10 <input type="text" id="inputVal"/><br/> 11 <input type="button" value="獲取xml數據" onclick="verifyJqueryGet()"/> 12 <div id="result"></div> 13 </body> 14 </html>
2. 編寫verify_jquery_get.js
1 function verifyJqueryGet() { 2 $.get("AjaxServer?value="+$('#inputVal').val(), 3 null, 4 function (data) { 5 $('#result').html("<p>"+data+"</p>"); 6 }); 7 }
$.get()方法參數說明:
$.get(url, param, callback(data));
url 請求資源的路徑
param 請求參數, 注意將請求參數寫在url后, 這里填null
callback(data) 回調函數, 服務器響應數據后, Ajax引擎(xhr)會自動調用該回調函數,數據還沒回來時, 頁面不會等待, 而是繼續執行, 中斷...
3. 編寫Servlet
1 /** 2 * Created by IntelliJ IDEA. 3 * 4 * @Auther: ShaoHsiung 5 * @Date: 2018/8/20 15:12 6 * @Title: Ajax后台程序 7 * @Description: 獲取異步請求參數, 若參數滿足條件, 則使用輸出對象向瀏覽器輸出數據 8 */ 9 public class AjaxServer extends HttpServlet { 10 @Override 11 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 12 // 設置響應內容類型 13 resp.setContentType("text/html;charset=utf-8"); 14 // 獲取輸出對象 15 PrintWriter out = resp.getWriter(); 16 // 獲取異步請求參數 17 String value = req.getParameter("value"); 18 // 設置參數編碼為UTF-8 19 String valueUtf8 = URLDecoder.decode(value, "UTF-8"); 20 // 檢驗參數 21 if (valueUtf8==null || valueUtf8.equals("")) { 22 out.println("用戶名不能為空!"); 23 } else { 24 // 判斷參數是否滿足條件 25 if(valueUtf8.equals("young")) { 26 out.println("用戶名可以使用!"); 27 } else { 28 out.println("用戶名無法使用!"); 29 } 30 } 31 } 32 33 @Override 34 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 35 doGet(req, resp); 36 } 37 }
4. 程序演示
二. 使用JQuery的$.ajax()方法實現異步請求
1. 編寫JSP
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 7 <script type="text/javascript" src="js/verify_jquery_ajax.js"></script> 8 </head> 9 <body> 10 <input type="text" id="inputVal"/><br/> 11 <input type="button" value="獲取xml數據" onclick="verifyJqueryAjax()"/> 12 <div id="result"></div> 13 </body> 14 </html>
2. 編寫verify_jquery_ajax.js
1 function verifyJqueryAjax() { 2 $.ajax({ 3 type: "get", // 請求方式 4 url: "AjaxXmlServer", // 目標資源 5 data: "value="+$('#inputVal').val(), // 請求參數 6 dataType: "xml", // 服務器響應的數據類型 7 success : function (data) { // readystate == 4 && status == 200 8 $('#result').html("<p>"+$(data).children().text()+"</p>"); // data是一個dom對象, 先將其轉化為jquery對象 9 } 10 }); 11 }
小結:
1) js中定義一個對象方式:
var obj1 = {};
var obj2 = {name: "zhang", age: 18};
2) dom->jquery
var $data = $(data)
3) 需要注意jquery對象的children方法的使用
$.ajax()方法參數說明:
type 請求方式 get/post
url 請求資源路徑
data 請求參數, 注意格式
dataType 服務器響應的數據類型
success(data) 回調函數, data是一個dom對象
3. 編寫Servlet
1 /** 2 * Created by IntelliJ IDEA. 3 * 4 * @Auther: ShaoHsiung 5 * @Date: 2018-8-21 12:41:06 6 * @Title: Ajax后台程序, 返回xml數據 7 * @Description: 獲取異步請求參數, 若參數滿足條件, 則使用輸出對象向瀏覽器輸出xml數據 8 */ 9 public class AjaxXmlServer extends HttpServlet { 10 @Override 11 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 12 13 // 設置響應內容類型為xml 14 resp.setContentType("text/xml;charset=utf-8"); 15 // 獲取輸出對象 16 PrintWriter out = resp.getWriter(); 17 // 獲取異步請求參數 18 String value = req.getParameter("value"); 19 //System.out.println("1" + value); 20 //System.out.println("2" + new String(value.getBytes("ISO8859-1"), "UTF-8")); 21 // 設置參數編碼為UTF-8 22 String valueUtf8 = URLDecoder.decode(value, "UTF-8"); 23 // 准備響應的數據 24 StringBuffer buffer = new StringBuffer(); 25 buffer.append("<message>"); 26 // 檢驗參數 27 if (valueUtf8==null || valueUtf8.equals("")) { 28 buffer.append("用戶名不能為空!").append("</message>"); 29 } else { 30 // 判斷參數是否滿足條件 31 if(valueUtf8.equals("young")) { 32 buffer.append("用戶名可以使用!").append("</message>"); 33 } else { 34 buffer.append("用戶名無法使用!").append("</message>"); 35 } 36 } 37 // 響應數據 38 out.print(buffer.toString()); 39 } 40 41 @Override 42 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 43 doGet(req, resp); 44 } 45 }
備注:
1) 務必設置設置響應內容類型為xml, 否則js代碼無法處理響應的數據
4. 程序演示
