JavaWeb22.1【Ajax&Json：Ajax的JS實現和JQ實現】
阿新 • • 發佈：2021-07-08
1 package com.haifei.web.servlet; 2 3 import javax.servlet.ServletException; 4 import javax.servlet.annotation.WebServlet; 5 import javax.servlet.http.HttpServlet; 6 import javax.servlet.http.HttpServletRequest; 7 import javax.servlet.http.HttpServletResponse; 8 import java.io.IOException;9 10 @WebServlet("/ajaxServlet") 11 public class AjaxServlet extends HttpServlet { 12 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 13 //1 獲取請求引數 14 String username = request.getParameter("username"); 15 //2 處理業務-耗時 16 /*try { 17 Thread.sleep(5000); 18 } catch (InterruptedException e) { 19 e.printStackTrace(); 20 }*/ 21 System.out.println(username); 22 //3 響應 23 response.getWriter().write("hello," + username); 24 } 25 26 protectedvoid doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 27 this.doPost(request, response); 28 } 29 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>1-原生js實現ajax</title> 6 <script> 7 function fun() { 8 //1 建立核心物件 9 var xmlhttp; 10 if (window.XMLHttpRequest) 11 { 12 xmlhttp=new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari 13 } 14 else 15 { 16 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5 17 } 18 19 //2 建立連線 20 /* 21 引數： 22 1. 請求方式：GET、POST 23 * get方式，請求引數在URL後邊拼接，send方法為空參 24 * post方式，請求引數在send方法中定義 25 2. 請求的URL： 26 3. 同步或非同步請求：true（非同步）或 false（同步） 27 */ 28 xmlhttp.open("GET","ajaxServlet?username=tom",true); //非同步 29 // xmlhttp.open("GET","ajaxServlet?username=tom",false); //同步 30 31 //3 傳送請求 32 xmlhttp.send(); //post方式的請求引數"username=tom" 33 34 //4 接受並處理來自伺服器的響應結果 35 /*獲取方式 ：xmlhttp.responseText 36 什麼時候獲取？當伺服器響應成功後再獲取 37 當xmlhttp物件的就緒狀態改變時，觸發事件onreadystatechange*/ 38 xmlhttp.onreadystatechange=function() 39 { 40 //判斷readyState就緒狀態是否為4，判斷status響應狀態碼是否為200 41 if (xmlhttp.readyState==4 && xmlhttp.status==200) //4&200-->響應已就緒 42 { 43 var responseText = xmlhttp.responseText; //獲取伺服器的響應結果 44 alert(responseText); //hello,tom 45 } 46 } 47 48 } 49 </script> 50 </head> 51 <body> 52 <input type="button" value="傳送非同步請求" onclick="fun()"> 53 <input> <!--啥屬性也不設定時預設為一個文字輸入框--> 54 55 <!--/* 56 訪問http://localhost:8080/day22/1-原生js實現ajax.html 57 點選“傳送非同步請求”按鈕，在伺服器處理業務的這5秒中，頁面文字輸入框不受影響，可以正常輸入內容 58 控制檯輸出：tom 59 頁面彈出：hello,tom 60 */--> 61 </body> 62 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2-jq實現ajax方式1-ajax</title> 6 <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> 7 <script> 8 //使用$.ajax()傳送非同步請求 9 10 function fun() { 11 $.ajax({ 12 url:"ajaxServlet" , // 請求路徑 13 // url:"ajaxServlet122" , // 響應失敗 14 type:"POST" , //請求方式 15 //data: "username=jack&age=23", //請求引數 16 data:{"username":"jack","age":23}, //推薦使用json格式的請求引數 17 18 success:function (data) { //響應成功後的回撥函式 19 alert(data); 20 }, 21 error:function () { //響應失敗後的回撥函式 22 alert("出錯啦...") 23 }, 24 dataType:"text" //設定接受到的響應資料的格式；之後會指定為json 25 }); 26 } 27 28 </script> 29 </head> 30 <body> 31 <input type="button" value="傳送非同步請求" onclick="fun()"> 32 <input> 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3-jq實現ajax方式2-get</title> 6 <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> 7 <script> 8 //使用$.get()傳送非同步請求 9 10 function fun() { 11 $.get( 12 //請求路徑 13 "ajaxServlet", 14 15 //請求引數 16 { 17 username: "rose", 18 age: 12 19 }, 20 21 //回撥函式 22 function (data) { 23 alert(data) 24 }, 25 26 //響應結果的型別 27 "text" 28 ); 29 } 30 31 </script> 32 </head> 33 <body> 34 <input type="button" value="傳送非同步請求" onclick="fun()"> 35 <input> 36 </body> 37 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>4-jq實現ajax方式3-post</title> 6 <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> 7 <script> 8 //使用$.post()傳送非同步請求 9 10 function fun() { 11 $.post( 12 //請求路徑 13 "ajaxServlet", 14 15 //請求引數 16 { 17 username: "sam", 18 age: 33 19 }, 20 21 //回撥函式 22 function (data) { 23 alert(data) 24 }, 25 26 //響應結果的型別 27 "text" 28 ); 29 } 30 31 </script> 32 </head> 33 <body> 34 <input type="button" value="傳送非同步請求" onclick="fun()"> 35 <input> 36 </body> 37 </html>