【JavaWeb】AJAX 請求
阿新 • • 發佈：2020-12-14
AJAX 請求
什麼是 AJAX
AJAX（Asynchronous JavaScript And XMl），即非同步 JS 和 XML。是指一種建立互動式網頁應用的網頁開發技術。
AJAX 是一種瀏覽器通過 JS 非同步發起請求，區域性更新頁面的技術。它請求的區域性更新，瀏覽器地址不會發生變化，且區域性更新不會捨棄原來的頁面。
原生 AJAX 示例
package cn.parzulpan.web; import cn.parzulpan.bean.User; import com.google.gson.Gson; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * @Author : parzulpan * @Time : 2020-12-14 * @Desc : */ @WebServlet(name = "AjaxServlet", urlPatterns = ("/ajaxServlet")) public class AjaxServlet extends BaseServlet { protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("Ajax 請求發過來了"); // 將資料返回給客戶端 User user = new User(1, "潘K", "123456", "[email protected]"); Gson gson = new Gson(); String userJsonString = gson.toJson(user); response.getWriter().write(userJsonString); } }
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>原生 AJAX 請求的示例</title> <script type="text/javascript"> // 在這裡使用 javaScript 語言發起 Ajax 請求，訪問伺服器 AjaxServlet 中 javaScriptAjax function ajaxRequest() { //1、首先要建立 XMLHttpRequest let xmlHttpRequest = new XMLHttpRequest(); //2、呼叫 open 方法設定請求引數 xmlHttpRequest.open("GET", "ajaxServlet?action=javaScriptAjax", true); //4、在 send 方法前繫結 onreadystatechange 事件，處理請求完成後的操作 xmlHttpRequest.onreadystatechange = function () { if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200) { let jsonObj = JSON.parse(xmlHttpRequest.responseText); // 把響應的資料顯示在頁面上 document.getElementById("div01").innerHTML = " id: " + jsonObj.id + " username: " + jsonObj.username + " password: " + jsonObj.password + " email: " + jsonObj.email } }; //3、呼叫 send 方法傳送請求 xmlHttpRequest.send(); } </script> </head> <body> <button onclick="ajaxRequest()">ajax request</button> <div id="div01"> </div> </body> </html>
jQuery 中的 AJAX 請求
常用方法：
$.ajax()url表示請求的地址type表示請求的型別（GET、POST）data表示傳送給伺服器的資料，有兩種格式：name=value&name2=value2{key: value}
success請求成功，響應的回撥函式dataType響應的資料型別，常用的有：text純文字xmlxml 資料jsonjson 物件
$.get()和$.post()url請求的 url 地址data傳送的資料callback成功的回撥函式type返回的資料型別
$.getJSON()url請求的 url 地址data傳送給伺服器的資料callback成功的回撥函式
serialize()可以把表單中所有表單項的內容都獲取到，並以name=value&name=value的形式進行拼接
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery 中的 AJAX 請求</title>
<script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// ajax請求
$("#ajaxBtn").click(function(){
$.ajax({
url: "ajaxServlet",
data: {action: "jQueryAjax"},
success: function (data) {
// 把響應的資料顯示在頁面上
$("#msg").html(" id: " + data.id +
" username: " + data.username +
" password: " + data.password +
" email: " + data.email);
},
dataType: "json"
});
});
// ajax--get請求
$("#getBtn").click(function(){
$.get("ajaxServlet", "action=jQueryAjax", function (data) {
// 把響應的資料顯示在頁面上
$("#msg").html(" id: " + data.id +
" username: " + data.username +
" password: " + data.password +
" email: " + data.email);
}, "json")
});
// ajax--post請求
$("#postBtn").click(function(){
$.post("ajaxServlet", "action=jQueryAjax", function (data) {
// 把響應的資料顯示在頁面上
$("#msg").html(" id: " + data.id +
" username: " + data.username +
" password: " + data.password +
" email: " + data.email);
}, "json")
});
// ajax--getJson請求
$("#getJSONBtn").click(function(){
$.getJSON("ajaxServlet", "action=jQueryAjax", function (data) {
// 把響應的資料顯示在頁面上
$("#msg").html(" id: " + data.id +
" username: " + data.username +
" password: " + data.password +
" email: " + data.email);
})
});
// ajax請求
$("#submit").click(function(){
// 把引數序列化
$.getJSON("ajaxServlet", "action=jQueryAjaxSerialize&" + $("#form01").serialize(), function (data) {
// 把響應的資料顯示在頁面上
$("#msg").html(" id: " + data.id +
" username: " + data.username +
" password: " + data.password +
" email: " + data.email);
})
});
});
</script>
</head>
<body>
<div>
<button id="ajaxBtn">$.ajax請求</button>
<button id="getBtn">$.get請求</button>
<button id="postBtn">$.post請求</button>
<button id="getJSONBtn">$.getJSON請求</button>
</div>
<div id="msg">
</div>
<br/><br/>
<form id="form01" >
使用者名稱：<input name="username" type="text" /><br/>
密碼：<input name="password" type="password" /><br/>
下拉單選：<select name="single">
<option value="Single">Single</option>
<option value="Single2">Single2</option>
</select><br/>
下拉多選：
<select name="multiple" multiple="multiple">
<option selected="selected" value="Multiple">Multiple</option>
<option value="Multiple2">Multiple2</option>
<option selected="selected" value="Multiple3">Multiple3</option>
</select><br/>
複選：
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
單選：
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
</body>
</html>
package cn.parzulpan.web;
import cn.parzulpan.bean.User;
import com.google.gson.Gson;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @Author : parzulpan
* @Time : 2020-12-14
* @Desc :
*/
@WebServlet(name = "AjaxServlet", urlPatterns = ("/ajaxServlet"))
public class AjaxServlet extends BaseServlet {
protected void jQueryAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("jQueryAjax 請求發過來了");
// 將資料返回給客戶端
User user = new User(1, "潘K", "123456", "[email protected]");
Gson gson = new Gson();
String userJsonString = gson.toJson(user);
response.getWriter().write(userJsonString);
}
protected void jQueryAjaxSerialize(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("jQueryAjaxSerialize 請求發過來了");
// 獲取客戶端的請求
String username = request.getParameter("username");
System.out.println(username);
String password = request.getParameter("password");
System.out.println(password);
// 將資料返回給客戶端
User user = new User(1, "潘K", "123456", "[email protected]");
Gson gson = new Gson();
String userJsonString = gson.toJson(user);
response.getWriter().write(userJsonString);
}
}