快捷導(dǎo)航

Java?數(shù)據(jù)交換?Json?和?異步請求?Ajax詳解

更新時間：2023年09月05日 10:14:21 作者：邊境矢夢°

Json（JavaScript Object Notation）是一種輕量級的數(shù)據(jù)交換格式，采用鍵值對的形式來表示數(shù)據(jù)，它廣泛應(yīng)用于Web開發(fā)中，特別適合于前后端數(shù)據(jù)傳輸和存儲，這篇文章主要介紹了Java數(shù)據(jù)交換Json和異步請求Ajax,需要的朋友可以參考下

一. JSON

JSON 具有自我描述性，更易理解 , 一句話，非常的好用

1. JSON介紹

??JSON: JavaScript Object Notation（JavaScript 對象標記法）。

??JSON 是一種存儲和交換數(shù)據(jù)的語法。

??JSON 是通過 JavaScript 對象標記法書寫的文本。

??JSON（JavaScript Object Notation）是一種輕量級的數(shù)據(jù)交換格式 (String)

??JSON易于閱讀和編寫的文本形式表示數(shù)據(jù)

??JSON數(shù)據(jù)使用鍵值對的方式進行組織，并且可以包含數(shù)組、對象和簡單的數(shù)據(jù)類型（例如字符串、數(shù)字、布爾值和null)

JSON的語法規(guī)則相對簡單，它由以下幾個基本結(jié)構(gòu)組成：

對象（Object）：使用花括號{}表示，對象是由鍵值對組成的無序集合，每個鍵值對之間使用逗號分隔。
數(shù)組（Array）：使用方括號[]表示，數(shù)組是由值組成的有序集合，每個值之間使用逗號分隔。
值（Value）：表達數(shù)據(jù)的不同類型，可以是字符串、數(shù)字、布爾值、對象、數(shù)組或null。
鍵值對（Key-Value）：表示對象中的屬性和對應(yīng)的值，鍵和值之間用冒號:分隔。
字符串（String）：由雙引號""或單引號’'括起來的Unicode字符序列。

2. JSON 的定義格式

var 變量名 = {
        "k1" : value, // Number 類型
        "k2" : "value", // 字符串類 型
        "k3" : [],// 數(shù)組類型
        "k4" : {}, // json 對象類型
        "k5" : [{},{}] // json 數(shù)組
};

以下是一個簡單的JSON對象的例子：

{
  "name": "John",
  "age": 30,
  "isStudent": true,
  "hobbies": ["reading", "music", "sports"],
  "address": {
    "street": "123 Main St",
    "city": "New York"
  }
}

3. JSON 規(guī)則

1) 映射(元素/屬性)用冒號 : 表示， " 名稱 ": 值 , 注意名稱是字符串，因此要用雙引號引起來
2) 并列的數(shù)據(jù)之間用逗號 , 分隔。 " 名稱 1": 值 ," 名稱 2": 值
3) 映射的集合(對象)用大括號 {} 表示。 {" 名稱 1": 值 ," 名稱 2": 值 }
4) 并列數(shù)據(jù)的集合（數(shù)組）用方括號 [] 表示。 [{" 名稱 1": 值 ," 名稱 2": 值 }, {" 名稱 1": 值 ," 名稱 2": 值 }]
5) 元素值類型： string, number, object, array, true, false, null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json 快速入門案例</title>
    <script type="text/javascript">
        var myJson = {
            "key1": "快速入門案例", // 字符串
            "key2": 123, // Number
            "key3": [1, "hello", 2.3], // 數(shù)組
            "key4": {"age": 12, "name": "jack"}, //json 對象
            "key5": [ //json 數(shù)組
                {"k1": 10, "k2": "milan"}, {"k3": 30, "k4": "smith"}
            ]
        };
        //訪問 json 的屬性
        console.log("key1= " + myJson.key1);
        // 訪問 json 的數(shù)組屬性
        console.log("key3[1]= " + myJson.key3[1]); // hello
        // 訪問 key4 的 name 屬性
        console.log("name= " + myJson.key4.name); // jack
        // 訪問 key5 json 數(shù)組的第一個元素
        console.log("myJson.key5[0]= " + myJson.key5[0]); //[object, object]
        console.log("myJson.key5[0].k2= " + myJson.key5[0].k2)// milan
    </script>
</head>
<body>
<h1>json 快速入門案例</h1>
</body>
</html>

4. JSON 對象和字符串對象轉(zhuǎn)換(javaScript)

1. JSON.stringify(json) 功能 : 將一個 json 對象轉(zhuǎn)換成為 json 字符串 [ 簡單說名字來源 .] Serialize
2. JSON.parse( jsonString ) 功能 : 將一個 json 字符串轉(zhuǎn)換成為 json 對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON 對象和字符串對象轉(zhuǎn)換</title>
    <script type="text/javascript">
        // 一個 json 對象
        var jsonObj = {"name": "對象和字符串對象轉(zhuǎn)換", age: 10};
        //JSON 是一個 build-in 對象,內(nèi)建對象,有方法可以使用
        console.log(JSON)
        // 把 json 對象轉(zhuǎn)換成為字符串對象
        var jsonStr = JSON.stringify(jsonObj);
        console.log(jsonStr);
        // 把 json 對象的字符串，轉(zhuǎn)換成為 json 對象
        var jsonObj2 = JSON.parse(jsonStr);
        console.log(jsonObj2);
    </script>
</head>
<body>
<h1>JSON 對象和字符串對象轉(zhuǎn)換</h1>
</body>
</html>

注意事項和細節(jié)

1 、 JSON.springify(json 對象 ) 會返回對應(yīng) string, 并不會影響原來 json 對象 ,
2 、 JSON.parse(string) 函數(shù)會返回對應(yīng)的 json 對象 , 并不會影響原來 string
3 、在定義 Json 對象時 , 可以使用 ' ' 表示字符串 , 比如 var json_person = { "name" : "jack" , "age" : 100 }; 也可以寫成 var json_person = { 'name' : 'jack' , 'age' : 100 };
4 、但是在把原生字符串轉(zhuǎn)成 json 對象時 , 必須使用 "", 否則會報錯比如： var str_dog = "{'name':' 小黃狗 ', 'age': 4}" ; 轉(zhuǎn) json 就會報錯
5 、 JSON.springify(json 對象 ) 返回的字符串 , 都是 "" 表示的字符串 , 所以在語法格式正確的情況下 , 是可以重新轉(zhuǎn)成 json 對象的 .

5. JSON 在 java 中使用

說明
1. java 中使用 json ，需要引入到第 3 方的包 gson.jar
2. Gson 是 Google 提供的用來在 Java 對象和 JSON 數(shù)據(jù) 之間進行映射的 Java 類庫。
3. 可以對 JSON 字符串和 Java 對象相互轉(zhuǎn)換
JSON 在 Java 中應(yīng)用場景
1. Javabean 對象和 json 字符串的轉(zhuǎn)換
2. List 對象和 json 字符串的轉(zhuǎn)換
3. map 對象和 json 字符串的轉(zhuǎn)換

應(yīng)用場景示意圖

    public static void main(String[] args) {
        // new 一個 gson 對象。引入 gson 包
        Gson gson = new Gson();
        //1. java 對象和 json 的轉(zhuǎn)換
        System.out.println("\n=== 1. java 對象和 json 的轉(zhuǎn)換 ====");
        Book book = new Book(100, "韓順平零基礎(chǔ)學(xué) Java");
        // 把對象轉(zhuǎn)成為 json 字符串
        String bookStr = gson.toJson(book);
        System.out.println(bookStr);
        // 把 json 字符串轉(zhuǎn)換成為 java 對象
        Book book2 = gson.fromJson(bookStr, Book.class);
        System.out.println(book2);
        //2 List 集合和 json 的轉(zhuǎn)換
        System.out.println("\n======2 List 集合和 json 的轉(zhuǎn)換======");
        ArrayList<Book> bookList = new ArrayList<>();
        bookList.add(new Book(200, "天龍八部"));
        bookList.add(new Book(300, "神雕俠侶"));
        //將 list 轉(zhuǎn)成 json 字符串
        String bookListStr = gson.toJson(bookList);
        System.out.println("bookListStr=" + bookListStr);
        //將 json 字符串轉(zhuǎn)成 List 集合方式 1
        List<Book> bookList2 = gson.fromJson(bookListStr, 
                new BookType().getType());
        System.out.println("bookList2=" + bookList2);
        //將 json 字符串轉(zhuǎn)成 List 集合方式 2- 使用 匿名內(nèi)部類
        List<Book> bookList3 = gson.fromJson(bookListStr, 
                new TypeToken<List<Book>>() {}.getType());
        System.out.println("bookList3=" + bookList3);
        //3. map 集合和 json 的轉(zhuǎn)換
        System.out.println("\n====3. map 集合和 json 的轉(zhuǎn)換=====");
        Map<String, Book> bookMap = new HashMap<>();
        bookMap.put("sn1", new Book(10, "射雕英雄傳"));
        bookMap.put("sn2", new Book(20, "碧血劍"));
        // 把 map 轉(zhuǎn)換成為 json
        String bookMapStr = gson.toJson(bookMap);
        System.out.println("bookMapStr=" + bookMapStr + " 類 型 =" +
                bookMapStr.getClass());
        // 把 json 轉(zhuǎn)成 map
        Map<String, Book> bookMap2 = gson.fromJson(bookMapStr, 
                new TypeToken<HashMap<String, Book>>() {}.getType());
        System.out.println("bookMap2=" + bookMap2 + " 類型=" + bookMap2.getClass());
    }

JSON具有良好的可讀性和可擴展性，廣泛應(yīng)用于Web應(yīng)用程序間的數(shù)據(jù)交換、配置文件的存儲和API的傳輸。在許多編程語言中，都提供了JSON的解析和生成庫，以方便對JSON數(shù)據(jù)進行操作和處理。

二. ajax

1. Ajax基本介紹

1. AJAX 即"Asynchronous Javascript And XML"(異步 JavaScript 和 XML)
2. Ajax 是一種瀏覽器異步發(fā)起請求 ( 指定發(fā)哪些數(shù)據(jù) ) ，局部更新頁面的技術(shù)

3. 傳統(tǒng)的方式只能刷新整個頁面

AJAX 是開發(fā)者的夢想，因為您能夠：

不刷新頁面更新網(wǎng)頁
在頁面加載后從服務(wù)器請求數(shù)據(jù)
在頁面加載后從服務(wù)器接收數(shù)據(jù)
在后臺向服務(wù)器發(fā)送數(shù)據(jù)

Ajax（Asynchronous JavaScript and XML）是一種用于創(chuàng)建快速、動態(tài)網(wǎng)頁的技術(shù)。它通過在后臺與服務(wù)器進行數(shù)據(jù)交換，使網(wǎng)頁能夠在無需重新加載整個頁面的情況下更新部分內(nèi)容。

??傳統(tǒng)的網(wǎng)頁交互方式是用戶與服務(wù)器進行完整的頁面請求和響應(yīng)，即用戶執(zhí)行某個操作，服務(wù)器接收請求并返回完整的新頁面。這種方式存在效率低下和用戶體驗差的問題。

??而Ajax通過在后臺使用JavaScript和XML或其他數(shù)據(jù)格式, 使網(wǎng)頁能夠

??在不刷新整個頁面的情況下與服務(wù)器進行數(shù)據(jù)交互和部分內(nèi)容更新??。

通過異步通信，Ajax 可以在用戶完成某個操作之后，將用戶請求發(fā)送到服務(wù)器，并在接收到服務(wù)器的響應(yīng)后，動態(tài)地更新頁面的相應(yīng)部分，而不需要重新加載整個頁面。

2. Ajax特點

Ajax技術(shù)的特點包括：

異步通信：通過使用異步通信，用戶可以繼續(xù)與頁面交互，而無需等待服務(wù)器響應(yīng)。
數(shù)據(jù)交換：Ajax可以與服務(wù)器進行數(shù)據(jù)交換，可以在不刷新整個頁面的情況下更新頁面的局部內(nèi)容。
DOM操作：Ajax可以使用JavaScript操作DOM，實現(xiàn)動態(tài)頁面的創(chuàng)建和更新。
增強用戶體驗：由于Ajax可以快速地更新頁面的一部分，因此可以提供更快速、更流暢的用戶體驗。

盡管Ajax中的“X”代表XML，但實際上，現(xiàn)代的Ajax應(yīng)用程序通常使用JSON、HTML或純文本格式來傳輸數(shù)據(jù)，而不是XML。

Ajax已經(jīng)成為現(xiàn)代Web應(yīng)用程序開發(fā)的重要技術(shù)之一，被廣泛應(yīng)用于各種Web應(yīng)用，包括社交媒體、在線購物以及各種在線工具和應(yīng)用程序。

3. Ajax 經(jīng)典應(yīng)用場景

1. 搜索引擎根據(jù)用戶輸入關(guān)鍵字，自動提示檢索關(guān)鍵字
2. 動態(tài)加載數(shù)據(jù)，按需取得數(shù)據(jù)【樹形菜單、聯(lián)動菜單 ... 】
3. 改善用戶體驗。【輸入內(nèi)容前提示、帶進度條文件上傳 ... 】
4. 電子商務(wù)應(yīng)用。【購物車、郵件訂閱 ... 】
5. 訪問第三方服務(wù)?！驹L問搜索服務(wù)、 rss 閱讀器】
6. 頁面局部刷新 , https://piaofang.maoyan.com/dashboard

4. Ajax基本原理

5. 原生Ajax

function checkUser() {
            var xhr = new XMLHttpRequest();
            var uname = document.getElementById("uname").value;
            xhr.open("GET", "/ajaxStu/check?username=" + uname, true);
            xhr.onreadystatechange = function () {
                // console.log("xhr = ",  xhr);
                if (xhr.readyState === 4 && xhr.status === 200) {
                    if(xhr.responseText.trim() === "") {
                        document.getElementById("myres").value = "用戶名可用";
                    } else {
                        document.getElementById("myres").value = "用戶名不可用";
                    }
                }
                document.getElementById("div1").innerText = xhr.responseText;
            }
            xhr.send();
        }

6. JQuery 的 Ajax 請求

jQuery(function () {
            $("#check").click(function () {
                window.alert("hello")
                $.ajax({
                    url:"/ajaxStu/check2",
                    type:"POST",
                    data:{
                        username:$("#uname").val(),
                        date:new Date()
                    },
                    success:function (date, status, xhr) {
                        console.log("成功~");
                        console.log(date);
                        console.log(status);
                        console.log(xhr);
                        if("king" === date.username) {
                            $("#myres").val("用戶不可用");
                        } else {
                            $("#myres").val("用戶可用");
                        }
                        $("#div1").html(JSON.stringify(date));
                    },
                    error:function () {
                        console.log("失敗~")
                    },
                    dataType:"json"
                })
                $.get(
                    "/ajaxStu/check2",
                    {
                        username:$("#uname").val(),
                        date:new Date()
                    },
                    function (date, status, xhr) {
                        console.log("get()成功~");
                        console.log(date);
                        console.log(status);
                        console.log(xhr);
                        if("king" === date.username) {
                            $("#myres").val("用戶不可用");
                        } else {
                            $("#myres").val("用戶可用");
                        }
                        $("#div1").html(JSON.stringify(date));
                    },
                    "json"
                )
                $.post(
                    "/ajaxStu/check2",
                    {
                        username:$("#uname").val(),
                        date:new Date()
                    },
                    function (date, status, xhr) {
                        console.log("post()成功~");
                        console.log(date);
                        console.log(status);
                        console.log(xhr);
                        if("king" === date.username) {
                            $("#myres").val("用戶不可用");
                        } else {
                            $("#myres").val("用戶可用");
                        }
                        $("#div1").html(JSON.stringify(date));
                    },
                    "json"
                )
                $.getJSON(
                    "/ajaxStu/check2",
                    {
                        username:$("#uname").val(),
                        date:new Date()
                    },
                    function (date, status, xhr) {
                        console.log("getJSON()成功~");
                        console.log(date);
                        console.log(status);
                        console.log(xhr);
                        if("king" === date.username) {
                            $("#myres").val("用戶不可用");
                        } else {
                            $("#myres").val("用戶可用");
                        }
                        $("#div1").html(JSON.stringify(date));
                    }
                )
            })
        })

總結(jié)

Json（JavaScript Object Notation）是一種輕量級的數(shù)據(jù)交換格式，采用鍵值對的形式來表示數(shù)據(jù)。它廣泛應(yīng)用于Web開發(fā)中，特別適合于前后端數(shù)據(jù)傳輸和存儲。

Ajax（Asynchronous JavaScript and XML）是一種在Web應(yīng)用中實現(xiàn)異步通信的技術(shù)。通過Ajax，前端可以發(fā)送異步請求到服務(wù)器，獲取數(shù)據(jù)并進行頁面更新，而無需刷新整個頁面。這項技術(shù)使得用戶體驗更加流暢，同時減輕了服務(wù)器的負擔。

Json和Ajax經(jīng)常配合使用。通過Ajax發(fā)送請求，服務(wù)器可以將數(shù)據(jù)以Json格式返回給前端，前端再解析Json數(shù)據(jù)進行頁面渲染或其他操作。Json的簡潔性和易讀性使得數(shù)據(jù)傳輸更加高效，而Ajax的異步通信則能提升用戶交互體驗。

總的來說，Json是一種數(shù)據(jù)格式，用于表示數(shù)據(jù)，而Ajax是一種實現(xiàn)異步通信的技術(shù)。它們的結(jié)合可以幫助開發(fā)人員構(gòu)建高效、流暢的Web應(yīng)用。

到此這篇關(guān)于Java 數(shù)據(jù)交換 Json 和異步請求 Ajax的文章就介紹到這了,更多相關(guān)Java 數(shù)據(jù)交換和異步請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: