Ajax
1. 概念
- ASynchronous JavaScript and xml,異步的 JavaScript 和 xml.
異步和同步:客戶端和服務器端相互通信的基礎上
- Ajax 是一種用于創建快速動態網頁技術.
- Ajax 是一種無需重新加載整個網頁的情況下,能夠更新部分網頁的技術.
通過在后臺與服務器進行少量資料交換,Ajax 可以使網頁實作異步更新.這意味可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新.
傳統網頁(不使用 ajax)如果需要更新內容,必須多載整個網頁頁面. - 作用:提升用戶體驗
2. 實作方式
2.1 原生 js實作方式(了解)
<body>
<input type="button" value="https://www.cnblogs.com/zk2020/archive/2021/09/18/發送異步請求" onclick="fun()">
<input>
<script>
//定義方法
function fun() {
//1. 創建核心物件
var xmlhttp;
if (window.XMLHttpRequest) {
//code for ie7+ firefox,chrome,opera,safari
xmlhttp = new XMLHttpRequest();
} else {
//code for ie6 ie5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 建立攔截
/*
* 引數:
* 1. 請求方式:get,post
* ++>get方式,請求引數在 url后邊拼接.send方法為空參
* ++>post方式,請求引數在 send方法中定義
* 2. 請求的 url:
* 3. 同步或異步請去:true(異步),false(同步)
* */
xmlhttp.open("get", "ajaxServlet?username=tom", true)
//3. 發送請求
xmlhttp.send();
//4. 接收并處理來自服務器的回應結果
//獲取方式
//什么時候獲取?當服務器回應成功的時候獲取
xmlhttp.onreadystatechange = function () {//單 xmlhttp物件的就緒狀態改變時,就觸發事件 onreadystatechange
//判斷 readyState就緒狀態 0,1,2,3,4
// 判斷回應狀態碼是否為200
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var responseText = xmlhttp.responseText;
alert(responseText)
}
}
}
</script>
@WebServlet("/ajaxServlet")
public class AjaxDemo1Servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text:html;charset=utf-8");
//獲取請求引數
String username = request.getParameter("username");
//處理業務邏輯 耗時
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//列印 username
System.out.println("username = " + username);
//回應
response.getWriter().write("htllo " + username);
}
}
2.2 jQuery實作方式
- $.ajax()
- 語法: $.ajax(url,[settings])
<body> <input type="button" value="https://www.cnblogs.com/zk2020/archive/2021/09/18/發送異步請求" onclick="fun()"> <input> <script src="https://www.cnblogs.com/js/jquery-3.6.0.min.js"></script> <script> //定義方法 function fun() { //使用 $.ajax()發送 異步請求 $.ajax({ url: "ajaxServlet", // 請求路徑 type: "pose",//請求方式 //data:"username=jack&age=23", //請求引數 data: {"username": "jack", "age": 23}, //請求引數 json格式 success: function (data) { //回應成功后的回呼函式 alert(data); }, error: function (data) {//請求回應出現錯誤,會執行的回呼函式 alert("出錯了") }, dataType: "test",//設定接收到回應資料格式 }); } </script> </body> - $.get(): 發送 get請求
- 語法: $.get(url, [data], [callback], [type])
- 引數:
url:請求路徑
data:請求引數
callback:回呼函式
type:回應結果型別
<input type="button" value="https://www.cnblogs.com/zk2020/archive/2021/09/18/發送異步請求" onclick="fun()"> <input> <script src="https://www.cnblogs.com/js/jquery-3.6.0.min.js"></script> <script> //定義方法 function fun() { //使用 $.ajax()發送 異步請求 $.get("ajaxServlet", {username: "rose"}, function (data) { alert(data) }), "text"; } </script> - 引數:
- $.post(): 發送 pose請求
- 語法: $.post(url, [data], [callback], [type])
json
1. 概念
- JavaScript object notation,JavaScript物件
Person p = new Person();
p.setName();
p.setAge();
p.setGender();var p {"name":"A","age":"24","gender":"女"}
- json現在多用于存盤和交換文本資訊的語法,型別 xml,json比 xml更小更快更容易決議
2. 語法
- 基本規則
- 資料在名稱/值對中: json資料是由鍵值對構成的
- 鍵用引號(單雙都行)引起來,也可以不適用引號
- 值的取得型別
數字 >正數或浮點數
字串 >在雙引號中
邏輯值 >true false
陣列 >在方括號中 {"persons":[{},{},..]}
物件 >或括號中 {"address":{"province":"北京"...}}
null
- 資料由逗號分隔 :多個鍵值由逗號分隔
- 花括號保存物件 :使用{}定義 json格式
- 方括號保存數組 :[]
- 資料在名稱/值對中: json資料是由鍵值對構成的
<script>
//1. 定義基本格式
var person = {"name": "張三", age: 23, "gender": true};
//alert(person);//[object Object]
//2. 嵌套格式: {} --> []
var persons = {
"persons": [
{"name": "小紅", "age": 23, "gender": true},
{"name": "小麗", "age": 23, "gender": true},
{"name": "小美", "age": 23, "gender": true}
]
}
// alert(persons);
//2. 嵌套格式: [] --> {}
var ps = [
{"name": "小紅", "age": 23, "gender": true},
{"name": "小麗", "age": 23, "gender": true},
{"name": "小美", "age": 23, "gender": true}
];
//alert(ps);
</script>
- 獲取資料
- json 物件.鍵名
var name = person.name;
var age = person["age"];
alert(name);
alert(age); - json 物件["鍵名"]
let name2 = persons.persons[2].name;
alert(name2);//小美 - 陣列物件[索引]
alert(ps[2].name);//小李
- 遍歷
<script src="https://www.cnblogs.com/js/jquery-3.6.0.min.js"></script> <script> //1. 定義基本格式 var person = {"name": "張三", age: 23, "gender": true}; //2. 嵌套格式: {} --> [] var ps = [ {"name": "小紅", "age": 23, "gender": true}, {"name": "小麗", "age": 23, "gender": true}, {"name": "小美", "age": 23, "gender": true} ]; //獲取 person物件中所有的鍵和值 //for in回圈 for (var key in person) { // alert(key+":"+person.key); //這樣的方式獲取不行,因為相當于 person.name alert(key + ":" + person[key]); } //獲取 ps中的值 for (let i = 0; i < ps.length; i++) { let p = ps[i]; for (let key in p) { alert(key+":"+p[key]) } } </script> - json 物件.鍵名
3. json物件和 Java物件的轉換
json決議器
常見的決議器:jsonlib,gson,fastjson,jackson
- json轉為 Java物件
- Java物件轉為 json
- 使用步驟
匯入 jackson的相關 jar包
- 使用步驟
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/301187.html
標籤：其他