AJAX
- Asynchronous JavaScript and XML
- 異步的JavaScript與XML，不是一門新技術，只是一個新的術語。（老技術新玩法）
- 使用AJAX，網頁能夠將增量更新呈現在頁面上，而不需要刷新整個頁面。
- 雖然X代表XML，但目前JSON的使用比XML更加普遍。（任何語言都可解析json字符串）
- 官網：https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX
? 示例
- 使用jQuery（js框架，比用原生js發ajax請求更方便）發送AJAX請求。
? 實踐
- 采用AJAX請求，實現發布帖子的功能
AJAX實例
ajax請求
// 通常是異步提交，故用POST @RequestMapping(path = "/ajax", method = RequestMethod.POST)@ResponseBodypublic String testAjax(String name, int age) {System.out.println(name);System.out.println(age);return CommunityUtil.getJSONString(0, "操作成功!");}
public class CommunityUtil {// 引入fastjason包// 將指定信息轉成jason字符串public static String getJSONString(int code, String msg, Map<String, Object> map) {JSONObject json = new JSONObject();json.put("code", code);json.put("msg", msg);if (map != null) {for (String key : map.keySet()) {json.put(key, map.get(key));}}return json.toJSONString();}public static String getJSONString(int code, String msg) {return getJSONString(code, msg, null);}public static String getJSONString(int code) {return getJSONString(code, null, null);}}
html頁面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>AJAX</title>
</head>
<body><p><input type="button" value="發送" onclick="send();"></p>
<!-- 引用jquery--><script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script><script>
<!-- jquery發送請求 $.get()發送get請求 $.post()發送post請求 $.ajax()發送任意類型請求 -->
<!-- post(訪問路徑, 向服務器提交的數據(js對象形式), 回調函數（匿名）) -->
<!-- 回調函數的形參data：為服務器返回給瀏覽器的數據，數據形式為json字符串，需轉化成js對象使用 -->function send(){$.post("/springdemo1/ajax",{"name":"lay", "age":31},function(data){console.log(typeof(data));console.log(data);<!-- $.parseJSON(data)：將data（json字符串，即String類型）轉為js對象（Object類型），通過屬性來獲取value-->data = $.parseJSON(data);console.log(typeof(data));console.log(data);console.log(data.code);console.log(data.msg);});}</script></body>
</html>
一些選擇題
B
A
錯誤：B 正確：D
095)]
B
[外鏈圖片轉存中…(img-0XmoHwg0-1709223340096)]
A
[外鏈圖片轉存中…(img-wIWFuloC-1709223340096)]
錯誤：B 正確：D
----＞E. Turtle vs. Rabbit Race: Optimal Trainings)
)
