JSON

JavaScript Object Notation

輕量(相較於xml)的資料交換格式
用一對大括號{}包裹，中間以:分隔鍵值對，用,分隔多對
裡面可以放:
- 數字(整數或浮點數，可用e表示指數)，不能是NaN
- 字串(用""包裹)
- 布林值(boolean) (true 或 false)
- 陣列(用[]包裹)
- 物件 (用{ }套娃)
- null

javaScript中

<script type="text/javascript">
    var jsonObj = {
        "key1": 123,
        "key2": "abc",
        "ket3": ["中", "文"]
    };
    alert(jsonObj.ket3)

    var jsonString = JSON.stringify(jsonObj);
    alert(jsonString);
    var jsonObj2 = JSON.parse(jsonString);
</script>

JSON可以是:
- 物件，用於操作
- 字串，用於傳遞
用JSON.stringify()與JSON.parse()方法互相轉換

Java中

要引用第三方包，例如Gson或Jackson
Gson範例:

@Test
public void test1() {
    User user = new User("zhung3", "pass123", "zhung3@goo.com");
    Gson gson = new Gson();

    String userString = gson.toJson(user);
    System.out.println(userString);

    User user2 = gson.fromJson(userString, User.class);
    System.out.println(user2);
}

如果是集合類轉回比較麻煩，要造一個TypeToken<集合裡面的類>，去當class用
- 用匿名類然後.getType()最快，只是會很長

User user4 = new User("U4", "pass123", "zhung3@goo.com");

List<User> userList = new ArrayList<>();
userList.add(user);
userList.add(user4);

// 把list轉成json
String userListString = gson.toJson(userList);
System.out.println(userListString);

// jsonString轉回集合
List<User> fromJson = gson.fromJson(userListString, new TypeToken<List<User>>() {
}.getType());
System.out.println(userList);
System.out.println(fromJson); // 兩者完全一樣

AJAX

Asynchronous Javascript And XML

異步Javascript與XML
通過瀏覽器異步發起請求，局部刷新頁面的技術
- 同步=打電話，異步=寄Email，不用等
- 局部:URL網址不變，不會捨棄原頁面，而是在指定位置變化
應用:即時檢查輸入，比如用戶已存在，或搜尋推薦字

原生用法

基本沒人用，了解一下就好

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript">
        function ajaxRequest() {
            // 1、首先創建XMLHttpRequest
            var xhr = new XMLHttpRequest();
            // 2、調用open方法設置請求參數，第三個true表示異步
            xhr.open("GET", "http://localhost:8080/AjaxServlet", true)
            // 4、在send方法前綁定onreadystatechange事件，處理請求完成后的操作
            // 就是先講好收到回應(資料)要幹嘛
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 4表示伺服器已完成回應
                    // 後端用jsonString傳來一個物件
                    var jsonObj = JSON.parse(xhr.responseText);
                    // 把物件的內容展示出去
                    document.getElementById("div01").innerHTML = "收到的東西:" + jsonObj.name;
                }
            }
            // 3、調用send方法發送請求，一收到回應就會執行剛剛綁定的動作
            xhr.send();
        }
    </script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>

JQuery

正在被Axios庫取代

  $("#getJSONBtn").click(function () {
      $.getJSON("http://localhost:8080/AjaxServlet", "action=jQueryGetJSON", function (data) {
          $("#msg").html(data.id)
      })
  })

$.getJSON(“第一個參數是請求網址”,“第二參數”,callback)
第二參數data容易跟後面搞混，這邊指的是請求的data，是以name=value&name=valueJSON格式發給伺服器，可能是參數讓伺服器知道前端想做的action，也可以是一整段資料
- 加上$("#form01").serialize()把整個表單的資料都送到後端，讓後端執行檢查
callback是成功獲取響應後要做的事，就是function (data)，因為接收的格式還是JSON，這個data指的是收到的JSON格式包裝的(比如可能是一個序列化後的javabean)回應
- 這個data可以直接看做一個後端的pojo物件調用它的屬性，例如data.price
function 後面的{就可以決定要如何展示資料
JQuery其實就是把很多繁瑣的細節、JSONstring與Obj間的轉換都封裝起來了

應用到書城項目

註冊驗證

註冊時驗證用戶名稱是否可用

前端

// 綁定用戶名失去焦點事件
$("#username").blur(function () {
    // 取得輸入的用戶名
    var username = this.value;
    $.getJSON("${pageScope.basePath}UserServlet", "action=existsUsername&username=" + username, function
        (data) {
        if (data.existsUsername) {
            $("span.errorMsg").text(data.msg)
        } else {
            $("span.errorMsg").text("用戶名可用!")
        }
    })
})

後端

protected void existsUsername(HttpServletRequest request, HttpServletResponse response) throws ServletException,
        IOException {
    // 接收參數
    String username = request.getParameter("username");
    // 跟資料庫驗證
    boolean existsUsername = userService.existsUsername(username);
    // 封裝結果
    Map<String, Object> resultMap = new HashMap<>();
    resultMap.put("existsUsername", existsUsername);
    resultMap.put("msg", "用戶名已存在!");
    Gson gson = new Gson();
    String resultString = gson.toJson(resultMap);
    // 丟回給前端
    response.getWriter().write(resultString);
}

購物車

操作都一樣，由於會破壞本來的察看購物車功能所以就還原了
注意在全局過濾器把編碼都換成UTF-8

request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");

i18n

internationalization，國際化

// 從請求頭獲取區域訊息
Locale locale = request.getLocale();
/* 根據語言讀取語言包，放在resources資料夾下
i18n_en_US.properties
i18n_zh_TW.properties
裡面存的就是一行行鍵值對，比如username=用戶名稱
*/
ResourceBundle i18n = ResourceBundle.getBundle("i18n", locale);
// 取出對應顯示
i18n.getString("username");

如果在前端就用js的<%i18n.getString("username")%>包起來
注意properties檔案預設不會是UTF-8編碼，需要進IDEA設定，搜encoding
Editor > File Encodings > 下面default properties encoding 通通改成UTF-8

用JSTL的fmt標籤

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--1 使用標籤設置 Locale 信息--%>
<fmt:setLocale value="${param.locale}"/>
<%--2 使用標籤設置 baseName--%>
<fmt:setBundle basename="i18n"/>
<%--3 設置切換語言的開關--%>
<a href="?locale=zh_TW">中文</a>
<a href="?locale=en_US">english</a>
<%--4 根據key顯示對應值--%>
<h1><fmt:message key="username"/></h1>
</body>
</html>

課程小結

也不知道老師那啥輸入法，總是出現~~空罐少女、寒冰衛士胸甲~~，真的有夠搶戲XD

Html

<div>一行
<span>資料多長就多長
<p>段落、空一行
<br>換行
&nbsp;空格
<a href="超連結">
<input type="輸入框類型" value="預設值" placeholder="佔位的點一下消失">
表單<form action="url" method="post">
<input type="submit" value="按鈕名" id="sub_btn"/>

JQuery

三種綁定

$("#id")
$("標籤名")
$(".class")

EL表達式

${key1}
會自動從request域、session、applicaion域、Context從小往上找

判斷是否有值
<c:if test="${empty sessionScope.key2}">
</c:if>

綁定點擊事件
$("#sub_btn").click(function () {

學習技術

前端

html、css、javascript
- 基本標籤<a href>、<input type>、<form>
jsp、jQuery、JSTL標籤庫、EL運算式
- <c:if test="">、${key1}、綁定點擊事件
Ajax
- $.getJSON()輸出響應

後端

不依賴框架完成http請求與響應的操作模型

JDBC、連線池、MySQL事務
Servlet、Filter、Listener、Cookie、Session、JSON
web容器的運作與部屬
MVC與三層架構搭建javaweb專案

上次修改於 2022-01-11