??????
Github主頁??https://github.com/A-BigTree
筆記鏈接??https://github.com/A-BigTree/Code_Learning
??????
如果可以，麻煩各位看官順手點(diǎn)個(gè)star~??
如果文章對你有所幫助，可以點(diǎn)贊??收藏?支持一下博主~??
12 Axios Ajax
12.1 Ajax概述
12.1.1 服務(wù)器端渲染
12.1.2 Ajax渲染（局部更新）
12.1.3 前后端分離
徹底舍棄服務(wù)器端渲染，數(shù)據(jù)全部通過Ajax方式以JSON格式來傳遞。
12.1.4 同步與異步
Ajax本身就是Asynchronous JavaScript And XML的縮寫，直譯為：異步的JavaScript和XML。在實(shí)際應(yīng)用中Ajax指的是：不刷新瀏覽器窗口，不做頁面跳轉(zhuǎn)，局部更新頁面內(nèi)容的技術(shù)。
『同步』 和 *『異步』 *是一對相對的概念，那么什么是同步，什么是異步呢？
同步
多個(gè)操作按順序執(zhí)行，前面的操作沒有完成，后面的操作就必須等待。所以同步操作通常是串行的。
異步
多個(gè)操作相繼開始并發(fā)執(zhí)行，即使開始的先后順序不同，但是由于它們各自是在自己獨(dú)立的進(jìn)程或線程中完成，所以互不干擾，誰也不用等誰。
12.1.5 Axios簡介
使用原生的JavaScript程序執(zhí)行Ajax極其繁瑣，所以一定要使用框架來完成。而Axios就是目前最流行的前端Ajax框架。
使用Axios和使用Vue一樣，導(dǎo)入對應(yīng)的*.js文件即可。官方提供的script標(biāo)簽引入方式為：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
我們可以把這個(gè)axios.min.js文件下載下來保存到本地來使用。
12.2 Axios基本用法
12.2.1 測試
前端代碼
<html>
<head>
<title>Axios Test</title>
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<button @click="commonParam">普通請求參數(shù)</button>
</div>
<script>
const { createApp } = Vue
const app = createApp({
data(){},
methods:{
commonParam:function (){
axios({
method:"post",
url:"/pro4_axios/AjaxServlet?method=commonParam",
data: {
userName: "tom",
userPwd: "123456"
}
}).then(function (response){
console.log(response);
}).catch(function (error){
console.log(error);
});
}
}
});
app.mount("#app");
</script>
</body>
</html>
后端代碼
public class AjaxServlet extends ModelBaseServlet {
protected void commonParam(HttpServletRequest request, HttpServletResponse response) throws IOException {
String userName = request.getParameter("userName");
String userPwd = request.getParameter("userPwd");
System.out.println("userName = " + userName);
System.out.println("userPwd = " + userPwd);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("服務(wù)器返回普通文本字符串");
}
}
axios程序接收到的響應(yīng)對象結(jié)構(gòu)
| 屬性名 | 作用 |
|---|---|
| config | 調(diào)用axios(config對象)方法時(shí)傳入的JSON對象 |
| data | 服務(wù)器端返回的響應(yīng)體數(shù)據(jù) |
| headers | 響應(yīng)消息頭 |
| request | 原生JavaScript執(zhí)行Ajax操作時(shí)使用的XMLHttpRequest |
| status | 響應(yīng)狀態(tài)碼 |
| statusText | 響應(yīng)狀態(tài)碼的說明文本 |
服務(wù)器端處理請求失敗后
catch(function (error) { // catch()服務(wù)器端處理請求出錯(cuò)后，會調(diào)用
console.log(error); // error就是出錯(cuò)時(shí)服務(wù)器端返回的響應(yīng)數(shù)據(jù)
console.log(error.response); // 在服務(wù)器端處理請求失敗后，獲取axios封裝的JSON格式的響應(yīng)數(shù)據(jù)對象
console.log(error.response.status); // 在服務(wù)器端處理請求失敗后，獲取響應(yīng)狀態(tài)碼
console.log(error.response.statusText); // 在服務(wù)器端處理請求失敗后，獲取響應(yīng)狀態(tài)說明文本
console.log(error.response.data); // 在服務(wù)器端處理請求失敗后，獲取響應(yīng)體數(shù)據(jù)
});
response對象的結(jié)構(gòu)還是和then()函數(shù)傳入的回調(diào)函數(shù)中的response是一樣的：
回調(diào)函數(shù)：開發(fā)人員聲明，但是調(diào)用時(shí)交給系統(tǒng)來調(diào)用。像單擊響應(yīng)函數(shù)、then()、catch()里面?zhèn)魅氲亩际腔卣{(diào)函數(shù)?；卣{(diào)函數(shù)是相對于普通函數(shù)來說的，普通函數(shù)就是開發(fā)人員自己聲明，自己調(diào)用。文章來源：http://www.zghlxwxcb.cn/news/detail-409939.html
12.2.2 發(fā)送請求體JSON
后端代碼
Gson是Google研發(fā)的一款非常優(yōu)秀的JSON數(shù)據(jù)解析和生成工具，它可以幫助我們將數(shù)據(jù)在JSON字符串和Java對象之間互相轉(zhuǎn)換。文章來源地址http://www.zghlxwxcb.cn/news/detail-409939.html
protected void requestBodyJSON(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1.由于請求體數(shù)據(jù)有可能很大，所以Servlet標(biāo)準(zhǔn)在設(shè)計(jì)API的時(shí)候要求我們通過輸入流來讀取
BufferedReader reader = request.getReader();
// 2.創(chuàng)建StringBuilder對象來累加存儲從請求體中讀取到的每一行
StringBuilder builder = new StringBuilder();
// 3.聲明臨時(shí)變量
String bufferStr = null;
// 4.循環(huán)讀取
while((bufferStr = reader.readLine()) != null) {
builder.append(bufferStr);
}
// 5.關(guān)閉流
reader.close();
// 6.累加的結(jié)果就是整個(gè)請求體
String requestBody = builder.toString();
// 7.創(chuàng)建Gson對象用于解析JSON字符串
Gson gson = new Gson();
// 8.將JSON字符串還原為Java對象
Student student = gson.fromJson(requestBody, Student.class);
System.out.println("student = " + student);
System.out.println("requestBody = " + requestBody);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("服務(wù)器端返回普通文本字符串作為響應(yīng)");
}
12.2.3 服務(wù)器端返回JSON數(shù)據(jù)
protected void responseBodyJSON(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1.準(zhǔn)備數(shù)據(jù)對象
Student student = new Student();
student.setStuId(10);
student.setStuName("tom");
student.setSchool(new School(11,"atguigu"));
student.setSubjectList(Arrays.asList(new Subject("java", 95.5), new Subject("php", 93.3)));
Map<String, Teacher> teacherMap = new HashMap<>();
teacherMap.put("t1", new Teacher("lili", 25));
teacherMap.put("t2", new Teacher("mary", 26));
teacherMap.put("t3", new Teacher("katty", 27));
student.setTeacherMap(teacherMap);
// 2.創(chuàng)建Gson對象
Gson gson = new Gson();
// 3.將Java對象轉(zhuǎn)換為JSON對象
String json = gson.toJson(student);
// 4.設(shè)置響應(yīng)體的內(nèi)容類型
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(json);
}
到了這里，關(guān)于【JavaWeb】11—Axios Ajax的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
