今日內容

1.AJAX

A.概念

概念 ：ASynchronous JavaScript And XML 異步的JavaScript 和 XML
什麼是異步同步呢？
異步和同步：客戶端和服務器端相互通信的基礎上
* （同步）客戶端必須等待服務器端的響應。在等待的期間客戶端不能做其他操作。
* （異步）客戶端不需要等待服務器端的響應。在服務器處理請求的過程中，客戶端可以進行其他的操作。

Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁。
通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。
這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
~~傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。~~

主要的用途就是：提升用戶的體驗

B.實現方式

1.原生的JS實現方式

最爲基礎的實現方式
步驟：

1. 創建核心對象（查看W3C）

2. 創建了之後就需要`建立起連接`，如何實現呢？

查看了W3C文檔瞭解了有關問題
分爲：向服務器發送請求，接收服務器響應，處理數據

向服務器發送請求
如需將請求發送到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

1.1格式：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

1.2參數解釋：

1.3到底是GET還是POST呢？
與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

兩者的區別：
請求方式：GET、POST

get方式，請求參數在URL後邊拼接。send方法爲空參
post方式，請求參數在send方法中定義

接收服務器響應，處理數據

獲取方式：有兩種方式（這裏只說responseText 屬性）

什麼時候獲取呢？
當服務器響應成功後再獲取

例子

其中的數字代表：

整體的最原始的JS實現

//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.responseText
        //什麼時候獲取？當服務器響應成功後再獲取

        //當xmlhttp對象的就緒狀態改變時，觸發事件onreadystatechange。
        xmlhttp.onreadystatechange=function()
        {
            //判斷readyState就緒狀態是否爲4，判斷status響應狀態碼是否爲200
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
               //獲取服務器的響應結果
                var responseText = xmlhttp.responseText;
                alert(responseText);
            }
        }

2.JQeury實現方式

爲什麼要用JQeury來實現呢？

JS實現太過繁瑣，所以我們可以另求高明。

實現方式

$.ajax()

* 語法：$.ajax({鍵值對});
//使用$.ajax()發送異步請求
          $.ajax({
              url:"ajaxServlet1111" , // 請求路徑
              type:"POST" , //請求方式
              //data: "username=jack&age=23",//請求參數
              data:{"username":"jack","age":23},
              success:function (data) {
                  alert(data);
              },//響應成功後的回調函數
              error:function () {
                  alert("出錯啦...")
              },//表示如果請求響應出現錯誤，會執行的回調函數

              dataType:"text"//設置接受到的響應數據的格式
          });

$.get()：發送get請求

* 語法：$.get(url, [data], [callback], [type])
		* 參數：
			* url：請求路徑
			* data：請求參數
			* callback：回調函數
			* type：響應結果的類型
<--------------------------------------------------------------------->
			<script src="js/jquery-3.3.1.min.js"></script>
			</head>
			<script>
			    function fun() {
			        $.get(
			        	//url：請求路徑
			            url ="/test/jqueryServlet",
			            //data：請求參數
			            {"username":"jack"},
			            //callback：回調函數
			            function (data) {
			                alert(data)
			            },
			            //type：響應結果的類型
			            type="text"
			        )
			    }
			</script>
			<body>
			<input type="button" value="點擊" onclick=fun();>
			<input type="text">
			</body>

$.post()：發送post請求

* 語法：$.post(url, [data], [callback], [type])
					* 參數：
						* url：請求路徑
						* data：請求參數
						* callback：回調函數
						* type：響應結果的類型
    		    <script src="js/jquery-3.3.1.min.js"></script>
				</head>
				<script>
				  function fun() {
				      $.post(
				          url ="/test/jqueryServlet",
				          {"username":"jack"},
				          function (data) {
				              alert(data)
				          },
				          type="text"
				      )
				  }
				</script>
				<body>
				<input type="button" value="點擊" onclick=fun();>
				<input type="text">
				</body>

2.JSON

A.概念

概念： JavaScript Object Notation JavaScript對象表示法
Person p = new Person();
p.setName(“張三”);
p.setAge(23);
p.setGender(“男”);
var p = {“name”:“張三”,“age”:23,“gender”:“男”};

特點：

json現在多用於存儲和交換文本信息的語法
進行數據的傳輸
JSON 比 XML 更小、更快，更易解析。

B.語法

1.基本規則

數據在名稱/值對中：json數據是由鍵值對構成的
鍵用引號(單雙都行)引起來，也可以不使用引號
值得取值類型：
1. 數字（整數或浮點數）
2. 字符串（在雙引號中）
3. 邏輯值（true 或 false）
4. 數組（在方括號中） {“persons”:[{},{}]}
5. 對象（在花括號中） {“address”:{“province”：“陝西”…}}
數據由逗號分隔：多個鍵值對由逗號分隔
花括號保存對象：使用{}定義json 格式
方括號保存數組：[]
什麼是鍵值：

什麼是數組：
中括號包含大括號——>[ {},{} ]

什麼是對象：
{"對象名",[{},{},{}]}

2.獲取數據

json對象.鍵名
2. json對象[“鍵名”]
3. 數組對象[索引]
4. 遍歷

//1.定義基本格式
       var person = {"name": "張三", age: 23, 'gender': true};
<--------------------------------------------------------------------->
        var ps = [{"name": "張三", "age": 23, "gender": true},
            {"name": "李四", "age": 24, "gender": true},
            {"name": "王五", "age": 25, "gender": false}];
<--------------------------------------------------------------------->
        //獲取person對象中所有的鍵和值
        //for in 循環
        for(var key in person){
            //這樣的方式獲取不行。因爲相當於  person."name"
            //alert(key + ":" + person.key);
            alert(key+":"+person[key]);
        }
<--------------------------------------------------------------------->
       //獲取ps中的所有值
        for (var i = 0; i < ps.length; i++) {
            var p = ps[i];
            for(var key in p){
                alert(key+":"+p[key]);
            }
        }

C.JSON數據和Java對象的相互轉換

JSON解析器：
* 常見的解析器：Jsonlib，Gson，fastjson，jackson

1. JSON轉爲Java對象

導入jackson的相關jar包
創建Jackson核心對象 ObjectMapper

//創建ObjectMapper對象
        ObjectMapper o = new ObjectMapper();
        //自動將雙引號轉義了
        String json = "{\"name\":\"張三\",\"age\":20,\"gander\":\"男\",\"birthday\":\"2020-04-02\"}";

調用ObjectMapper的相關方法進行轉換

//調用readerValue(String,Class<Object> class)進行轉義
Person person = objectMapper.readValue(json, Person.class);
//打印結果,後面沒有輸入所以自動給個日期
        //Person{name='張三', age=20, gander='男', birthday=Thu Apr 02 08:00:00 CST 2020}
        System.out.println(person);

2. Java對象轉換JSON

導入jackson的相關jar包
創建Jackson核心對象 ObjectMapper
調用ObjectMapper的相關方法進行轉換
轉換方法：
* writeValue(參數1，obj):
參數1：
File：將obj對象轉換爲JSON字符串，並保存到指定的文件中
Writer：將obj對象轉換爲JSON字符串，並將json數據填充到字符輸出流中
OutputStream：將obj對象轉換爲JSON字符串，並將json數據填充到字節輸出流中

writeValueAsString(obj):將對象轉爲json字符串

@Test
    public void test2() throws Exception {
        Person p = new Person("張三", 20, "男",new Date());
        ObjectMapper objectMapper = new ObjectMapper();
        String string = objectMapper.writeValueAsString(p);
        System.out.println(string);
    }

註解：
1. @JsonIgnore：排除屬性。
2. @JsonFormat：屬性值得格式化
  @JsonFormat(pattern = “yyyy-MM-dd”)

 	private String name;
    private int age;
    private String gander;
    @JsonFormat(pattern = "yyyy-MM-dd")
    //@JsonIgnore
    private Date birthday;

複雜java對象轉換
1. List：數組

@Test
//java List轉Json
    //list 存儲對象的方式
    public void test3() throws Exception {
        Person p = new Person("張三", 20, "男",new Date());
        Person w = new Person("張三", 20, "男",new Date());
        Person e = new Person("張三", 20, "男",new Date());
        List<Person> list = new ArrayList<Person>();
        list.add(p);
        list.add(w);
        list.add(e);
        //創建jackSon核心對象ObjectMapper
        ObjectMapper objectMapper = new ObjectMapper();
        //將java轉化爲jackSon對象
        String string = objectMapper.writeValueAsString(list);
        /*
        生成的結果：
         [{"name":"張三","age":20,"gander":"男","birthday":"2020-04-02"},
         {"name":"張三","age":20,"gander":"男","birthday":"2020-04-02"},
         {"name":"張三","age":20,"gander":"男","birthday":"2020-04-02"}]
         */
        System.out.println(string);
    }

2. Map：對象格式一致

@Test
    //java List轉Json
    //map的鍵值對方式
    public void test4() throws Exception {
        Map<String,Object> map = new LinkedHashMap<>();
        map.put("name","張三");
        map.put("age",20);
        map.put("address","仙桃");
        ObjectMapper objectMapper = new ObjectMapper();
        String string = objectMapper.writeValueAsString(map);
        //{"name":"張三","age":20,"address":"仙桃"}
        System.out.println(string);
    }

案例

校驗用戶名是否存在
服務器響應的數據，在客戶端使用時，要想當做json數據格式使用。有兩種解決方案：
1. $.get(type):將最後一個參數type指定爲"json"
然後在服務器端，寫上response.setContentType("text/html;charset=utf-8");
2. 在服務器端設置MIME類型（）
response.setContentType("application/json;charset=utf-8");

代碼案例

package com.xiaoge.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

/**
 * Created by Administrator on 2020/4/4 11:10
 * @author Administrator
 */
@WebServlet("/findUsernameServlet")
public class FindUsernameServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
<---------------------------------------------------------------------->
        //1.獲取用戶名
        String username = request.getParameter("username");
<---------------------------------------------------------------------->
        //2.調用service層判斷用戶名是否存在

        //期望服務器響應回的數據格式：{"userExsit":true,"msg":"此用戶名太受歡迎,請更換一個"}
        //                          {"userExsit":false,"msg":"用戶名可用"}
        //
        //response.setContentType("text/html;charset=utf-8");
        response.setContentType("application/json;charset=utf-8");
        Map<String,Object> map = new HashMap<>();
<----------------------------------------------------------------------> 
        //2.調用service層判斷用戶是否存在
        if ("tom".equals(username)){
            //存在
            map.put("userExsit",true);
            map.put("msg","此用戶太受歡迎，請換一個");
        }else {
            //不存在
            map.put("userExsit",false);
            map.put("msg","此用戶可以使用");
        }
        //將map轉化爲json,並傳遞給客戶端
        //將map轉化爲json
<---------------------------------------------------------------------->
        ObjectMapper mapper = new ObjectMapper();
        //mapper.writeValue(response.getWriter(),map);
        String string = mapper.writeValueAsString(map);
        System.out.println(string);
        response.getWriter().write(string);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

html代碼塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊頁面</title>
    <script src="js/jquery-3.3.1.min.js"></script>
<---------------------------------------------------------------------->
    <script>
        //在頁面加載完成後
        $(function () {
            //給username綁定blur事件
            $("#username").blur(function () {
                //獲取username文本輸入框的值
                var username = $(this).val();
                //發送ajax請求
                //期望服務器響應回的數據格式：{"userExsit":true,"msg":"此用戶名太受歡迎,請更換一個"}
                //                         {"userExsit":false,"msg":"用戶名可用"}
                $.get("/test/findUsernameServlet",{username:username},function (data) {
                    //判斷userExsit鍵的值是否是true

                    // alert(data);
                    var span = $("#s_username");
                    if(data.userExsit){
                        //用戶名存在
                        span.css("color","red");
                        span.html(data.msg);
                    }else{
                        //用戶名不存在
                        span.css("color","green");
                        span.html(data.msg);
                    }
                });
            });
        });

    </script>
</head>
<body>
<---------------------------------------------------------------------->
<form>
    <input type="text" id="username" name="username" placeholder="請輸入用戶名">
    <span id="s_username"></span>
    <br>
    <input type="password" name="password" placeholder="請輸入密碼"><br>
    <input type="submit" value="註冊"><br>
</form>

</body>
</html>

AJAX&JSON超級最詳細講解

今日內容

1.AJAX

A.概念

B.實現方式

1.原生的JS實現方式

1. 創建核心對象（查看W3C）

2. 創建了之後就需要`建立起連接`，如何實現呢？

2.JQeury實現方式

2.JSON

A.概念

B.語法

1.基本規則

2.獲取數據

C.JSON數據和Java對象的相互轉換

1. JSON轉爲Java對象

2. Java對象轉換JSON

案例

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

mysql id從1開始自增解決id不連續的問題

HTML接收不到JSON信息的問題

今天完成一個web前端的項目

JAVAweb怎麼寫分頁查詢

AJAX&JSON超級最詳細講解

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

AJAX&JSON超級最詳細講解

今日內容

1.AJAX

A.概念

B.實現方式

1.原生的JS實現方式

1. 創建核心對象（查看W3C）

2. 創建了之後就需要建立起連接，如何實現呢？

2.JQeury實現方式

2.JSON

A.概念

B.語法

1.基本規則

2.獲取數據

C.JSON數據和Java對象的相互轉換

1. JSON轉爲Java對象

2. Java對象轉換JSON

案例

2. 創建了之後就需要`建立起連接`，如何實現呢？