AJAX：

1. 概念： ASynchronous JavaScript And XML    非同步的JavaScript 和 XML
    1. 非同步和同步：客戶端和伺服器端相互通訊的基礎上
        * 同步:客戶端必須等待伺服器端的響應。在等待的期間客戶端不能做其他操作。
        * 非同步:客戶端不需要等待伺服器端的響應。在伺服器處理請求的過程中，客戶端可以進行其他的操作。

        * 四個概念:
                1. 同步阻塞:去視窗辦事,提交完資料一直在等待,處理完畢,拿著資料走人
                2. 同步非阻塞:去視窗辦事,提交完資料去旁邊轉悠,不時回來問辦好了沒有,直到處理完畢
                3. 非同步阻塞:去視窗辦事,提交完資料就回家,辦完事通知你去取
                4. 非同步非阻塞:去視窗辦事,提交完資料回家,辦完事會把東西給你寄回來,無需去取

        Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。 
        通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。(區域性重新整理)
        傳統的網頁（不使用 Ajax）如果需要更新內容，必須過載整個網頁頁面。

        底層還是使用原生的js程式碼來完成非同步請求傳送和接收

        提升使用者的體驗

2. 實現方式：
    1. 原生的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)
                    {
                       //獲取伺服器的響應結果xmlhttp.responseText
                        var responseText = xmlhttp.responseText;
                        alert(responseText);
                    }
                }

                * //post請求需要設定請求頭的內容型別
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                * get的引數在open中傳遞,post的引數在send中傳遞

    2. JQeury實現方式
        1. $.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"//設定接受到的響應資料的格式
                });
        2. $.get()：傳送get請求
            * 語法：$.get(url, [data], [callback], [type])
                * 引數：
                    * url：請求路徑
                    * data：請求引數
                    * callback：回撥函式
                    * type：響應結果的型別

        3. $.post()：傳送post請求
            * 語法：$.post(url, [data], [callback], [type])
                * 引數：
                    * url：請求路徑
                    * data：請求引數
                    * callback：回撥函式
                    * type：響應結果的型別
            * 例:        
            $("#btn").click(function () {
                $.post("getServlet",{"username":"wangwu"},function (data) {
                    alert(data)
                },"text")
            });
 

JSON：

1. 概念： JavaScript Object Notation        JavaScript物件表示法
    java的方式:
    Person p = new Person();
    p.setName("張三");
    p.setAge(23);
    p.setGender("男");
    js的方式
    var p = {"name":"張三","age":23,"gender":"男"};

    * json現在多用於儲存和交換文字資訊的語法
    * 進行資料的傳輸
    * JSON 比 XML 更小、更快，更易解析。

2. 語法：
    1. 基本規則
        * 資料在名稱/值對中：json資料是由鍵值對構成的
            * 鍵用引號(單雙都行)引起來，也可以不使用引號(儘量都使用雙引號來引起來)
            * 值得取值型別：
                1. 數字（整數或浮點數）
                2. 字串（在雙引號中）
                3. 邏輯值（true 或 false）
                4. 陣列（在方括號中）    {"persons":[{},{}]}
                5. 物件（在花括號中） {"address":{"province"："陝西"....}}
                6. null
        * 資料由逗號分隔：多個鍵值對由逗號分隔
        * 花括號儲存物件：使用{}定義json 格式
        * 方括號儲存陣列：[]
    2. 獲取資料:
        1. 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]);
                    }
                }


3. JSON資料和Java物件的相互轉換

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


    * 使用jackson的方式:
    1. JSON轉為Java物件
        1. 匯入jackson的相關jar包
        2. 建立Jackson核心物件 ObjectMapper
        3. 呼叫ObjectMapper的相關方法進行轉換
            1. readValue(json字串資料,Class)
    2. Java物件轉換JSON
        1. 使用步驟：
            1. 匯入jackson的相關jar包
            2. 建立Jackson核心物件 ObjectMapper
            3. 呼叫ObjectMapper的相關方法進行轉換
                1. 轉換方法：
                    * writeValue(引數1，obj):
                        引數1：
                            File：將obj物件轉換為JSON字串，並儲存到指定的檔案中
                            Writer：將obj物件轉換為JSON字串，並將json資料填充到字元輸出流中
                            OutputStream：將obj物件轉換為JSON字串，並將json資料填充到位元組輸出流中
                    * writeValueAsString(obj):將物件轉為json字串

                2. 註解：
                    1. @JsonIgnore：排除屬性。加在對應的屬性上,或者對應的get方法上
                    2. @JsonFormat：屬性值得格式化
                        * @JsonFormat(pattern = "yyyy-MM-dd")

                3. 複雜java物件轉換
                    1. List：陣列
                    2. Map：和物件格式一致

    * 使用fastjson的方式
        1. 使用步驟:
            1. 匯入jar包
            2. 直接使用
                * 將物件轉換為json字串
                String person = JSONObject.toJSONString(p);
                JSONObject.writeJSONStringTo(p,new FileWriter("d://c.txt"));
                * 將集合轉換成json字串
                ps是一個LIST集合物件
                JSONArray.toJSONString(ps);
                JSONArray.toJSONString(map);可以將一個MAP物件直接轉換成JSON字串
                * 將指定的JSON字串轉換成指定的JAVA類
                JSONObject.parseObject(json,Person.class);

        2. 註解:
            @JSONField(format="yyyy-MM-dd") 此註解可指定欄位的日期格式
            @JSONField(serialize=false) 此註解可忽略指定的欄位
 

案例：

* 校驗使用者名稱是否存在
    1. 伺服器響應的資料，在客戶端使用時，要想當做json資料格式使用。有兩種解決方案：
        1. $.get(type):將最後一個引數type指定為"json"
        2. 在伺服器端設定MIME型別
            response.setContentType("application/json;charset=utf-8");

* 程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax非同步校驗使用者名稱</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<form>
    <input type="text" placeholder="請輸入你的使用者名稱" id="username" onblur="fun1(this)">
    <input type="text" placeholder="請輸入你的密碼">
    <input type="button" value="submit">
    <span id="s_username"></span>
</form>

<script>
    //兩種方式設定點選事件
    /*$(function () {
        $("#username").blur(function () {
            alert($(this).val())
        })
    })*/

    function fun1(obj) {
       var username = $(obj).val();
       $.get("loginServlet",{username:username},function (data) {
           if (data.flag){
               //重複的名字
               $("#s_username").css("color","red");
               $("#s_username").text(data.msg);
           } else {
               //沒有重複
               $("#s_username").css("color","green");
               $("#s_username").text(data.msg);
           }
       },"json");
    }
</script>
</body>
</html>

servlet
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //設定編碼並獲取引數
        request.setCharacterEncoding("utf-8");
        String username = request.getParameter("username");
        Map<String,Object> map = new HashMap<>();
        //此處的邏輯應為呼叫service層,service層呼叫dao層,從資料庫中拿到資料進行比對(此處省略了這個步驟)
        if ("tom".equals(username)){
            //有重複的名字
            map.put("flag",true);
            map.put("msg","此名字太熱門了,請換一個吧!");
        }else {
            //沒有重複的名字
            map.put("flag",false);
            map.put("msg","此名字可以使用!");
        }
        //設定流的編碼
        response.setContentType("text/html;charset=utf-8");
        //使用jackson的方式來處理java物件
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(),map);
    }

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