一、JSON

1.1什么是JSON

JSON(JavaScript Object Notation, JS 物件標記) 是一種輕量級的資料交換格式，它基于 ECMAScript (W3C制定的JS規范)的一個子集，采用完全獨立于編程語言的文本格式來存盤和表示資料，簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言，易于人閱讀和撰寫，同時也易于機器決議和生成，并有效地提升網路傳輸效率，

1.2 JSON語法

[] 表示陣列

{} 表示物件

"" 表示是屬性名或字串型別的值

: 表示屬性和值之間的間隔符

, 表示多個屬性的間隔符或者是多個元素的間隔符

二、JSON決議【`重點`】

要決議的字串：將字串決議為Java物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    var user = {
        id:"12",
        name:"張三",
        age:"21"
    }
    document.writeln("userid:"+user.id);
	document.write("<br>")
    document.writeln("username:"+user.name);
	document.write("<br>")
    document.writeln("userage:"+user.age);
</script>
</html>

?
陣列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		var student = [
			{
				sid:"1",
				sname:"小白",
				ssch:"和平路小學"
			},{
				sid:"2",
				sname:"小黑",
				ssch:"東風路小學"
			},{
				sid:"3",
				sname:"小黃",
				ssch:"朝陽路小學"
			}
		]
		
		document.write(" 編號："+student[0].sid+" 姓名："+student[0].sname+" 學校名稱："+student[0].ssch);
		document.write("<br />");
		document.write(" 編號："+student[1].sid+" 姓名："+student[1].sname+" 學校名稱："+student[1].ssch);
		document.write("<br />");
		document.write(" 編號："+student[2].sid+" 姓名："+student[2].sname+" 學校名稱："+student[2].ssch);
		
	</script>
</html>

?
//嵌套

var data = {
?
    "users":[
        {"id":"1001","username":"張三","age":"23"},
        {"id":"1002","username":"李四","age":"24"},
        {"id":"1003","username":"王五","age":"25"}
    ],
?
    "admins":[
        {"id":"1","username":"jack","password":"123"},
        {"id":"2","username":"tom","password":"456"},
        {"id":"3","username":"rose","password":"789"}
    ]
?
}
?
document.write(data.admins[2].password);
?

2.1 FastJSON決議

Fastjson 是阿里巴巴開發的一個 Java 庫，可以將 Java 物件轉換為 JSON 格式，當然它也可以將 JSON 字串轉換為 Java 物件

匯入jar包

提供了 toJSONString() 和 parseObject() 方法來將 Java 物件與 JSON 相互轉換：

呼叫toJSONString方法即可將物件轉換成 JSON 字串

parseObject 方法則反過來將 JSON 字串轉換成物件，

Json和User物件之間的轉換

首先先創建一個符合JavaBean規范的user物件

package com.javacoffee.entity;

import java.io.Serializable;

public class User implements Serializable {
    private Integer id;
    private String name;
    private String age;

    public User() {
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", age='" + age + '\'' +
                '}';
    }
}

然后導包

創建測驗類Test

package com.javacoffee.test;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.TypeReference;
import com.javacoffee.entity.User;

import java.util.ArrayList;
import java.util.List;

public class Test {
   @org.junit.Test
    public void test1(){
       //首先創建User物件，并且給物件加上屬性
       User user = new User();
       user.setName("張三");
       user.setId(1);
       user.setAge("27");
        //可以列印出來看看
       System.out.println("我是User物件："+user);
       //然后通過JSON的toJSONString方法將物件轉化為JSON字串
       String s = JSON.toJSONString(user);
       System.out.println("我是User物件轉化的JSON字串："+s);
       //還可以將JSON字串轉化為物件
       User user1 = JSON.parseObject(s, User.class);
       System.out.println("我是JSON字串轉化的物件："+user1);
       //如果是集合呢？ 我們可以再new一個物件
       User user2 = new User();
       user2.setId(2);
       user2.setName("李四");
       user2.setAge("78");
       //創建ArrayList集合
       ArrayList<User> users = new ArrayList<>();
       //將兩個物件放到集合當中
       users.add(user);
       users.add(user2);
       System.out.println("我是集合"+users);
       //還是使用toJSONString的方法將集合轉化為JSON字串
       String s1 = JSON.toJSONString(users);
       System.out.println("我是集合轉化的字串"+s1);
       //接著是JSON字串再轉化為集合
       List<User> users1 = JSON.parseObject(s1, new TypeReference<List<User>>() {});
       System.out.println("我是JSON字串轉化的集合"+users1);
   }
}

Json和List集合之間的轉換，注：匯入的類是import com.alibaba.fastjson.TypeReference;

2.2 Jackson決議

Jackson 是一個能夠將Java物件序列化為JSON字串，也能夠將JSON字串反序列化為Java物件的框架；

匯入jar包

通過方法readValue和writeValue實作；

Json和List集合之間的轉換，注：匯入的類是import com.fasterxml.jackson.core.type.TypeReference;

package com.javacoffee.test;


import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.javacoffee.entity.User;
import org.junit.Test;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class Test2 {
    @Test
    public void Test2() throws IOException {
        //創建User類并給他添上一些屬性
        User user = new User();
        user.setName("張三");
        user.setId(1);
        user.setAge("27");
        //可以列印出來看看
        System.out.println("我是User物件："+user);
        //獲取ObjectMapper物件
        ObjectMapper objectMapper = new ObjectMapper();
        //通過objectMapper的writeValueAsString方法獲取JSON字串
        String s = objectMapper.writeValueAsString(user);
        System.out.println("我是JSON:"+s);
        //通過objectMapper的readValue方法將獲取JSON字串轉為物件
        User user1 = objectMapper.readValue(s, User.class);

        System.out.println("我是JSON字串轉化的物件："+user1);
        User user2 = new User();
        user2.setId(2);
        user2.setName("李四");
        user2.setAge("78");
        //創建ArrayList集合
        ArrayList<User> users = new ArrayList<>();
        //將兩個物件放到集合當中
        users.add(user);
        users.add(user2);
        System.out.println("我是集合"+users);
        //將集合轉為JSON資料
        String s1 = objectMapper.writeValueAsString(users);
        System.out.println("我是集合轉為JSON："+s1);
        //接著是JSON字串再轉化為集合
        List<User> userList = objectMapper.readValue(s1, new TypeReference<List<User>>() {
        });
        System.out.println("我是JSON字串轉化的集合"+userList);
    }
}

三、Ajax使用【`重點`】

3.1 什么是AJAX?

同步和異步是建立在客戶端和服務器端相互通信的基礎上，

同步：客戶端必須等待服務器端的回應，在等待的期間客戶端不能做其他操作，異步：客戶端不需要等待服務器端的回應，在服務器處理請求的程序中，客戶端可以進行其他的操作，

AJAX = ASynchronous JavaScript And XML 異步的JavaScript 和 XML，

AJAX 是一種用于創建快速動態網頁的技術，

Ajax是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術，提升用戶的體驗，通過在后臺與服務器進行少量資料交換，Ajax 可以使網頁實作異步更新，這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新

傳統的網頁（不使用 Ajax）如果需要更新內容，必須多載整個網頁頁面，

3.2 AJAX作業原理

AJAX作業原理

AJAX是基于現有的Internet標準，并且聯合使用它們：

XMLHttpRequest 物件 (異步的與服務器交換資料)

JavaScript/DOM (資訊顯示/互動)

CSS (給資料定義樣式)

XML (作為轉換資料的格式)

3.3 原生AJAX

原生js實作： ? 1.創建XMLHttpRequest物件 ? 2.將狀態觸發器系結到一個函式 ? 3.使用open方法建立與服務器的連接 ? 4.向服務器端發送資料 ? 5.在回呼函式中對回傳資料進行處理 ?

方法： open()，send()

屬性： onreadystatechange：狀態回呼函式 responseText/responseXML：服務器的回應字串 status：服務器回傳的HTTP狀態碼 statusText：服務器回傳的HTTP狀態資訊 readyState：物件狀態

客戶端向服務器提交資料

案例：

html頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        //定義方法
        function ajax() {

            //發送異步請求
            //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=jack", true);
            // xmlhttp.open("POST", "ajaxServlet", true);

            //3.發送請求
            xmlhttp.send(null);
            // xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // xmlhttp.send("username=tom");

            //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);
                }
            }

        }

    </script>
</head>
<body>

<input type="button" value="發送異步請求" onclick="ajax()">

請輸入：<input type="text">

</body>
</html>

Servlet代碼

package com.javacoffee.controller;

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;

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      //設定字符集
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        //獲取username對應的值
        String username = request.getParameter("username");
        //休眠5秒 更好的看出同步與異步的區別
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //控制臺輸出
        System.out.println(username);
        //回應輸出
        response.getWriter().write(username);
    }
}

方法	描述
open(method,url,async)	規定請求的型別、URL 以及是否異步處理請求，method：請求的型別；GET 或 POST；url：檔案在服務器上的位置；async：true（異步）或 false（同步），并且XMLHttpRequest 物件如果要用于 AJAX 的話，其 open() 方法的 async 引數必須設定為 true；
send(string)	將請求發送到服務器，string：僅用于 POST 請求

GET 還是 POST？

與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用，

然而，在以下情況中，請使用 POST 請求：

無法使用快取檔案（更新服務器上的檔案或資料庫）

向服務器發送大量資料（POST 沒有資料量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

3.4 相關屬性

每當 readyState 改變時，就會觸發 onreadystatechange 事件，

在 onreadystatechange 事件中，我們規定當服務器回應已做好被處理的準備時所執行的任務，

readyState 屬性存有 XMLHttpRequest 的狀態資訊，

當 readyState 等于 4 且狀態為 200 時，表示回應已就緒：

下面是 XMLHttpRequest 物件的三個重要的屬性：

屬性	描述
onreadystatechange	存盤函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式，
readyState	存有 XMLHttpRequest 的狀態，從 0 到 4 發生變化，0: 請求未初始化1: 服務器連接已建立2: 請求已接收3: 請求處理中4: 請求已完成，且回應已就緒
status	例：200: "OK" ；404: 未找到頁面

回應碼	描述
100	客戶必須繼續發出請求
101	客戶要求服務器根據請求轉換HTTP協議版本
200	交易成功
201	提示知道新檔案的URL
202	接受和處理、但處理未完成
203	回傳資訊不確定或不完整
204	請求收到，但回傳資訊為空
205	服務器完成了請求，用戶代理必須復位當前已經瀏覽過的檔案
206	服務器已經完成了部分用戶的GET請求
300	請求的資源可在多處得到
301	洗掉請求資料
302	在其他地址發現了請求資料
303	建議客戶訪問其他URL或訪問方式
304	客戶端已經執行了GET，但檔案未變化
305	請求的資源必須從服務器指定的地址得到
306	前一版本HTTP中使用的代碼，現行版本中不再使用
307	申明請求的資源臨時性洗掉
400	錯誤請求，如語法錯誤
401	請求授權失敗
402	保留有效ChargeTo頭回應
403	請求不允許
404	沒有發現檔案、查詢或URl
405	用戶在Request-Line欄位定義的方法不允許
406	根據用戶發送的Accept拖，請求資源不可訪問
407	類似401，用戶必須首先在代理服務器上得到授權
408	客戶端沒有在用戶指定的餓時間內完成請求
409	對當前資源狀態，請求不能完成
410	服務器上不再有此資源且無進一步的參考地址
411	服務器拒絕用戶定義的Content-Length屬性請求
412	一個或多個請求頭欄位在當前請求中錯誤
413	請求的資源大于服務器允許的大小
414	請求的資源URL長于服務器允許的長度
415	請求資源不支持請求專案格式
416	請求中包含Range請求頭欄位，在當前請求資源范圍內沒有range指示值，請求也不包含If-Range請求頭欄位
417	服務器不滿足請求Expect頭欄位指定的期望值，如果是代理服務器，可能是下一級服務器不能滿足請求
500	服務器產生內部錯誤
501	服務器不支持請求的函式
502	服務器暫時不可用，有時是為了防止發生系統過載
503	服務器過載或暫停維修
504	關口過載，服務器使用另一個關口或服務來回應用戶，等待時間設定值較長
505	服務器不支持或拒絕支請求頭中指定的HTTP版本

四、JQuery方式實作

4.1 三種方式實作，匯入jquery.js檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //匯入外部jquery
   <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js">

   </script>
</head>
<script>

    $.ajax({
        type: "POST",
        url: "AjaxServlet",
        data: "username=張三",
        async:true,
        success: function(msg,status,xmlHttpRequest){
            // alert( "Data Saved: " + msg );
            // alert("服務器回應狀態:"+status);
            // alert("readyState:"+xmlHttpRequest.readyState);
            // alert("status:"+xmlHttpRequest.status);
            alert("responseText"+xmlHttpRequest.responseText);
        }
    });

    // function ajax() {
    //     //jquery的GET方式發送請求
    //     $.get("ajaxServlet", { username: "John" },
    //         function(data){
    //             alert("服務器回傳的資料: " + data);
    //         },"text");
    // }

    // function ajax() {
    //     //jquery的POST方式發送請求
    //     $.post("ajaxServlet", { username: "John" },
    //         function(data){
    //             alert("服務器回傳的資料: " + data);
    //         },"text");
    // }
</script>
<body>
<input type="button" onclick="ajax()" value="發送異步請求">
<input type="text">
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/302810.html

標籤：其他

上一篇：給大家總結了一些關于面向物件，閉包函式，原型鏈的題，話不多說，直接上干貨！！！

下一篇：ES6---（1）新增語法及擴展方法

JSON與AJAX初識

一、JSON

1.1什么是JSON

1.2 JSON語法

二、JSON決議【重點】

2.1 FastJSON決議

然后導包

2.2 Jackson決議

三、Ajax使用【重點】

3.4 相關屬性

四、JQuery方式實作

二、JSON決議【`重點`】

三、Ajax使用【`重點`】