（14）JSON 、AJAX 和i18n的使用

JSON

JSON (JavaScript Object Notation) 是一種輕量級的數據交換格式。易於人閱讀和編寫。同時也易於機器解析和生成。JSON採用完全獨立於語言的文本格式，而且很多語言都提供了對 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python等）。這樣就使得 JSON 成爲理想的數據交換格式。
json 是一種輕量級的數據交換格式，輕量級指的是跟 xml 做比較。
數據交換指的是客戶端和服務器之間業務數據的傳遞格式。

1，JSON 在 JavaScript 中的使用

①，json 的定義

json 是由鍵值對組成，並且由花括號（大括號）包圍。每個鍵由引號引起來，鍵和值之間使用冒號進行分隔，
多組鍵值對之間進行逗號進行分隔。
json 定義示例：

var jsonObj = {
	"key1": 12,
	"key2": "abc",
	"key3": true,
	"key4": [11, "arr", false],
	"key5": {
		"key5_1": 551,
		"key5_2": "key5_2_value"
	},
	"key6": [{
		"key6_1_1": 6611,
		"key6_1_2": "key6_1_2_value"
	},{
		"key6_2_1": 6621,
		"key6_2_2": "key6_2_2_value"
	}]
};

②，json 的訪問

json 本身是一個對象。
json 中的 key 我們可以理解爲是對象中的一個屬性，json 中的 key 訪問就跟訪問對象的屬性一樣： json 對象.key
json 訪問示例：

alert(typeof(jsonObj));// object json 就是一個對象

alert(jsonObj.key1); //12

alert(jsonObj.key2); // abc

alert(jsonObj.key3); // true

alert(jsonObj.key4);// 得到數組 [11,"arr",false]
// json 中 數組值的遍歷
for(var i = 0; i < jsonObj.key4.length; i++) {
	alert(jsonObj.key4[i]);
}

alert(jsonObj.key5.key5_1);//551
alert(jsonObj.key5.key5_2);//key5_2_value

alert( jsonObj.key6 );// 得到 json 數組
// 取出來每一個元素都是 json 對象
var jsonItem = jsonObj.key6[0];
// alert( jsonItem.key6_1_1 ); //6611
alert( jsonItem.key6_1_2 ); //key6_1_2_value

③，json 的常用兩個方法

json 的存在有兩種形式。

一種是：對象的形式存在，我們叫它 json 對象。
一種是：字符串的形式存在，我們叫它 json 字符串。

一般我們要操作 json 中的數據的時候，需要 json 對象的格式。
一般我們要在客戶端和服務器之間進行數據交換的時候，使用 json 字符串。

JSON.stringify() 把 json 對象轉換成爲 json 字符串
JSON.parse() 把 json 字符串轉換成爲 json 對象
示例代碼：

// 把 json 對象轉換成爲 json 字符串
var jsonObjString = JSON.stringify(jsonObj); // 特別像 Java 中對象的 toString
alert(jsonObjString)
// 把 json 字符串。轉換成爲 json 對象
var jsonObj2 = JSON.parse(jsonObjString);
alert(jsonObj2.key1);// 12
alert(jsonObj2.key2);// abc

2，JSON 在 java 中的使用（使用的是谷歌的Gson ）

Gson包的下載

①，javaBean 和和 json 的互轉

@Test
public void test1(){
    Person person = new Person(1," Tommey周");
    // 創建 Gson 對象實例
    Gson gson = new Gson();
    // toJson 方法可以把 java 對象轉換成爲 json 字符串
    String personJsonString = gson.toJson(person);
    System.out.println(personJsonString);
    // fromJson 把 json 字符串轉換回 Java 對象
    // 第一個參數是 json 字符串，第二個參數是轉換回去的 Java 對象類型
    Person person1 = gson.fromJson(personJsonString, Person.class);
    System.out.println(person1);
}

②，List 和 json 互轉

@Test
public void test2() {
    List<Person> personList = new ArrayList<>();
    personList.add(new Person(1, " Tommey"));
    personList.add(new Person(2, " Tommey周"));
    Gson gson = new Gson();
    // 把 List 轉換爲 json 字符串
    String personListJsonString = gson.toJson(personList);
    System.out.println("list ==> json :"+personListJsonString);
    List<Person> list = gson.fromJson(personListJsonString, new TypeToken<List<Person>>() {}.getType());
    System.out.println("json ==> list :"+ list);
}

③， map 和 json 的互轉

@Test
public void test3(){
    Map<Integer,Person> personMap = new HashMap<>();
    personMap.put(1, new Person(1, " Tommey"));
    personMap.put(2, new Person(2, " Tommey周"));
    Gson gson = new Gson();
    // 把 map 集合轉換成爲 json 字符串
    String personMapJsonString = gson.toJson(personMap);
    System.out.println("map ====》 json" + personMapJsonString);
    Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType());
    System.out.println("json ====》 map" + personMap2);
}

AJAX 請求

1，什麼是 AJAX 請求

AJAX 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建交互式網頁應用的網頁開發
技術。
ajax 是一種瀏覽器通過 js 異步發起請求，局部更新頁面的技術。
Ajax 請求的局部更新，瀏覽器地址欄不會發生變化
局部更新不會捨棄原來頁面的內容

2，原生 AJAX 請求的示例

- ajax.html頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 在這裏使用 javaScript 語言發起 Ajax 請求，訪問服務器 AjaxServlet 中 javaScriptAjax
        function ajaxRequest() {
            // 1 、我們首先要創建 XMLHttpRequest
            var xmlhttprequest = new XMLHttpRequest();
            // 2 、調用 open 方法設置請求參數
            xmlhttprequest.open("GET","http://localhost:8080/ServletTest/ajaxServlet?action=javaScriptAjax",true)
            // 4 、在 send 方法前綁定 onreadystatechange 事件，處理請求完成後的操作。
            xmlhttprequest.onreadystatechange = function(){
                if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                    var jsonObj = JSON.parse(xmlhttprequest.responseText);
                    // 把響應的數據顯示在頁面上
                    document.getElementById("div01").innerHTML = " 年齡：" + jsonObj.age + " ,  姓名：" +
                        jsonObj.name;
                }
            }
            // 3 、調用 send 方法發送請求
            xmlhttprequest.send();
        }
    </script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01"></div>
</body>
</html>

servlet類：

public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Ajax請求過來了");
        Person person = new Person(1, "Tommey周");
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }

3，jQuery 中的 AJAX 請求

$.ajax 方法

url 表示請求的地址

type 表示請求的類型 GET 或 POST 請求

data 表示發送給服務器的數據
格式有兩種：

①：name=value&name=value
②：{key:value}

success 請求成功，響應的回調函數

dataType 響應的數據類型
常用的數據類型有：text 表示純文本，xml 表示 xml 數據，json 表示 json 對象
html頁面代碼：

<body>
<button id="ajaxBtn">ajax request</button>
<div id="msg"></div>

<script>
    $("#ajaxBtn").click(function(){
        $.ajax({
            url:"http://localhost:8080/ServletTest/ajaxServlet",
            // data:"action=jQueryAjax",
            data:{action:"jQueryAjax"},
            type:"GET",
            success:function (data) {
                // alert(" 服務器返回的數據是： " + data);
                // var jsonObj = JSON.parse(data);
                $("#msg").html(" 年齡：" + data.age + " ,  姓名：" + data.name);
            },
            dataType : "json"
        });
    });
</script>
</body>

$.get 方法和 $.post 方法

url 請求的 url 地址

data 發送的數據

callback 成功的回調函數

type 返回的數據類型
html頁面代碼：

<script>
    // ajax--get 請求
    $("#getBtn").click(function(){
        $.get("http://localhost:8080/ServletTest/ajaxServlet","action=jQueryGet",function (data) {
            $("#msg").html(" get  年齡：" + data.age + " ,  姓名：" + data.name);
        },"json");
    });
    // ajax--post 請求
    $("#postBtn").click(function(){
        $.post("http://localhost:8080/ServletTest/ajaxServlet","action=jQueryPost",function (data)
        {
            $("#msg").html(" post  年齡：" + data.age + " ,  姓名：" + data.name);
        },"json");
    });
</script>

$.getJSON 方法

url 請求的 url 地址

data 發送給服務器的數據

callback 成功的回調函數
html頁面代碼：

<script>
    // ajax--getJson 請求
    $("#getJSONBtn").click(function(){
        $.getJSON("http://localhost:8080/ServletTest/ajaxServlet","action=jQueryGetJSON",function
            (data) {
            $("#msg").html(" getJSON  年齡：" + data.age + " ,  姓名：" + data.name);
        });
    });
</script>

表單序列化 serialize()
serialize()可以把表單中所有表單項的內容都獲取到，並以 name=value&name=value 的形式進行拼接。

<body>
<form id="form01" >
    用戶名：<input name="username" type="text" /><br/>
    密碼：<input name="password" type="password" /><br/>
</form>
<button id="submit">提交--serialize()</button>
<div id="msg"></div>
<script>
    // ajax 請求
    $("#submit").click(function(){
        // 把參數序列化
        $.getJSON("http://localhost:8080/ServletTest/ajaxServlet","action=jQuerySerialize&" +
            $("#form01").serialize(),function (data) {
            $("#msg").html(" Serialize  年齡：" + data.age + " ,  姓名：" + data.name);
        });
    });
</script>
</body>

Ajax使用案例

使用 AJAX 驗證用戶名是否可用
regist.jsp 頁面中的代碼：

$("#username").blur(function () {
	//1 獲取用戶名
	var username = this.value;
	$.getJSON("http://localhost:8080/book/userServlet","action=ajaxExistsUsername&username=" +
username,function (data) {
		if (data.existsUsername) {
			$("span.errorMsg").text(" 用戶名已存在！");
		} else {
			$("span.errorMsg").text(" 用戶名可用！");
		}
	});
});

servlet類：

protected void ajaxExistsUsername(HttpServletRequest req, HttpServletResponse resp) throws
ServletException, IOException {
	// 獲取請求的參數 username
	String username = req.getParameter("username");
	// 調用 userService.existsUsername();
	boolean existsUsername = userService.existsUsername(username);
	// 把返回的結果封裝成爲 map 對象
	Map<String,Object> resultMap = new HashMap<>();
	resultMap.put("existsUsername",existsUsername);
	Gson gson = new Gson();
	String json = gson.toJson(resultMap);
	resp.getWriter().write(json);
}

i18n 國際化

1，什麼是 i18n 國際化？

國際化（Internationalization）指的是同一個網站可以支持多種不同的語言，以方便不同國家，不同語種的用戶訪問。
關於國際化我們想到的最簡單的方案就是爲不同的國家創建不同的網站，比如蘋果公司，他的英文官網是：http://www.apple.com 而中國官網是 http://www.apple.com/cn
蘋果公司這種方案並不適合全部公司，而我們希望相同的一個網站，而不同人訪問的時候可以根據用戶所在的區域顯示不同的語言文字，而網站的佈局樣式等不發生改變。
於是就有了我們說的國際化，國際化總的來說就是同一個網站不同國家的人來訪問可以顯示出不同的語言。但實際上這
種需求並不強烈，一般真的有國際化需求的公司，主流採用的依然是蘋果公司的那種方案，爲不同的國家創建不同的頁
面。
國際化的英文 Internationalization，但是由於拼寫過長，老外想了一個簡單的寫法叫做 I18N，代表的是Internationalization這個單詞，以 I 開頭，以 N 結尾，而中間是 18 個字母，所以簡寫爲 I18N。以後我們說 I18N 和國際化是一個意思。

2，國際化相關要素介紹

3，國際化資源 properties 測試

配置兩個語言的配置文件：
- i18n_en_US.properties 英文
  
  username=username
  password=password
  sex=sex
  age=age
  regist=regist
  boy=boy
  email=email
  girl=girl
  reset=reset
  submit=submit
- i18n_zh_CN.properties 中文
  
  username= 用戶名
  password= 密碼
  sex= 性別
  age= 年齡
  regist= 註冊
  boy= 男
  girl= 女
  email= 郵箱
  reset= 重置
  submit=提交
國際化測試代碼：

public class I18nTest {

    @Test
    public void testLocale() {
        // 獲取你係統默認的語言。國家信息
//        Locale locale = Locale.getDefault();
//        System.out.println(locale);
//
//        for (Locale availableLocale : Locale.getAvailableLocales()) {
//            System.out.println(availableLocale);
//        }

        // 獲取中文，中文的常量的Locale對象
        System.out.println(Locale.CHINA);
        // 獲取英文，美國的常量的Locale對象
        System.out.println(Locale.US);

    }

    @Test
    public void testI18n() {
        // 得到我們需要的Locale對象
        Locale locale = Locale.US;
        // 通過指定的basename和Locale對象，讀取 相應的配置文件
        ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale);

        System.out.println("username：" + bundle.getString("username"));
        System.out.println("password：" + bundle.getString("password"));
        System.out.println("Sex：" + bundle.getString("sex"));
        System.out.println("age：" + bundle.getString("age"));
    }
}

4，通過請求頭國際化頁面

<body>
<%
    // 從請求頭中獲取 Locale 信息（語言）
    Locale locale = request.getLocale();
    System.out.println(locale);
    // 獲取讀取包（根據 指定的 baseName 和 Locale 讀取 語言信息）
    ResourceBundle i18n = ResourceBundle.getBundle("i18n", locale);
%>
<a href="">中文</a>|
<a href="">english</a>
<center>
    <h1><%=i18n.getString("regist")%></h1>
    <table>
        <form>
            <tr>
                <td><%=i18n.getString("username")%></td>
                <td><input name="username" type="text" /></td>
            </tr>
            <tr>
                <td><%=i18n.getString("password")%></td>
                <td><input type="password" /></td>
            </tr>
            <tr>
                <td><%=i18n.getString("sex")%></td>
                <td>
                    <input type="radio" /><%=i18n.getString("boy")%>
                    <input type="radio" /><%=i18n.getString("girl")%>
                </td>
            </tr>
            <tr>
                <td><%=i18n.getString("email")%></td>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="reset" value="<%=i18n.getString("reset")%>" />&nbsp;&nbsp;
                    <input type="submit" value="<%=i18n.getString("submit")%>" /></td>
            </tr>
        </form>
    </table>
    <br /> <br /> <br /> <br />
</center>
國際化測試：
<br /> 1、訪問頁面，通過瀏覽器設置，請求頭信息確定國際化語言。
<br /> 2、通過左上角，手動切換語言
</body>
</html

5，通過顯示的選擇語言類型進行國際化

<body>
<%
    // 從請求頭中獲取 Locale 信息（語言）
    Locale locale = null;
    String country = request.getParameter("country");
    if ("cn".equals(country)) {
        locale = Locale.CHINA;
    } else if ("usa".equals(country)) {
        locale = Locale.US;
    } else {
        locale = request.getLocale();
    }
    System.out.println(locale);
    // 獲取讀取包（根據 指定的 baseName 和 Locale 讀取 語言信息）
    ResourceBundle i18n = ResourceBundle.getBundle("i18n", locale);
%>
<a href="i18n.jsp?country=cn">中文</a>|
<a href="i18n.jsp?country=usa">english</a>
<center>
    <h1><%=i18n.getString("regist")%>
    </h1>
    <table>
        <form>
            <tr>
                <td><%=i18n.getString("username")%>
                </td>
                <td><input name="username" type="text"/></td>
            </tr>
            <tr>
                <td><%=i18n.getString("password")%>
                </td>
                <td><input type="password"/></td>
            </tr>
            <tr>
                <td><%=i18n.getString("sex")%>
                </td>
                <td>
                    <input type="radio"/><%=i18n.getString("boy")%>
                    <input type="radio"/><%=i18n.getString("girl")%>
                </td>
            </tr>
            <tr>
                <td><%=i18n.getString("email")%>
                </td>
                <td><input type="text"/></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="reset" value="<%=i18n.getString("reset")%>"/>&nbsp;&nbsp;
                    <input type="submit" value="<%=i18n.getString("submit")%>"/></td>
            </tr>
        </form>
    </table>
    <br/> <br/> <br/> <br/>
</center>
國際化測試：
<br/> 1、訪問頁面，通過瀏覽器設置，請求頭信息確定國際化語言。
<br/> 2、通過左上角，手動切換語言
</body>
</html>

6，JSTL 標籤庫實現國際化

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>Title</title>
<body>
<%--1 使用標籤設置 Locale 信息 --%>
<fmt:setLocale value="${param.locale}" />
<%--2 使用標籤設置 baseName--%>
<fmt:setBundle basename="i18n"/>
<a href="i18n.jsp?locale=zh_CN">中文</a>|
<a href="i18n.jsp?locale=en_US">english</a>
<center>
    <h1><fmt:message key="regist" /></h1>
    <table>
        <form>
            <tr>
                <td><fmt:message key="username" /></td>
                <td><input name="username" type="text" /></td>
            </tr>
            <tr>
                <td><fmt:message key="password" /></td>
                <td><input type="password" /></td>
            </tr>
            <tr>
                <td><fmt:message key="sex" /></td>
                <td>
                    <input type="radio" /><fmt:message key="boy" />
                    <input type="radio" /><fmt:message key="girl" />
                </td>
            </tr>
            <tr>
                <td><fmt:message key="email" /></td>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="reset" value="<fmt:message key="reset" />" />&nbsp;&nbsp;
                    <input type="submit" value="<fmt:message key="submit" />" /></td>
            </tr>
        </form>
    </table>
    <br /> <br /> <br /> <br />
</center>
</body>
</html>

（14）JSON 、AJAX 和i18n的使用

JSON

AJAX 請求

Ajax使用案例

i18n 國際化

（1）MYSQL——————基礎，函數，分組查詢，子查詢，分頁查詢以及聯合查詢

（13）Filter過濾器

（2）JDBC——————數據庫事務，數據庫連接池和Apache-DBUtils實現CRUD操作

（3）Oracle——————分組函數，子查詢，創建和管理表和數據處理

（12）Cookie和Session

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結