AJAX：

1. 概念： ASynchronous JavaScript And XML 異步的JavaScript 和 XML

   1. 異步和同步：客戶端和服務(wù)器端相互通信的基礎(chǔ)上

      • 客戶端必須等待服務(wù)器端的響應(yīng)育谬。在等待的期間客戶端不能做其他操作蜕依。
      • 客戶端不需要等待服務(wù)器端的響應(yīng)笤喳。在服務(wù)器處理請(qǐng)求的過程中，客戶端可以進(jìn)行其他的操作诅病。

      Ajax 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。 [1]
      通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換房揭，Ajax 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下晌端，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新捅暴。
      傳統(tǒng)的網(wǎng)頁(yè)（不使用 Ajax）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面咧纠。

      提升用戶的體驗(yàn)

2. 實(shí)現(xiàn)方式：

   1. 原生的JS實(shí)現(xiàn)方式（了解）

             //1.創(chuàng)建核心對(duì)象
            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. 建立連接
            /*
                參數(shù)：
                    1. 請(qǐng)求方式：GET蓬痒、POST
                        * get方式，請(qǐng)求參數(shù)在URL后邊拼接漆羔。send方法為空參
                        * post方式梧奢，請(qǐng)求參數(shù)在send方法中定義
                    2. 請(qǐng)求的URL：
                    3. 同步或異步請(qǐng)求：true（異步）或 false（同步）
      
             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);
      
            //3.發(fā)送請(qǐng)求
            xmlhttp.send();
      
            //4.接受并處理來(lái)自服務(wù)器的響應(yīng)結(jié)果
            //獲取方式 ：xmlhttp.responseText
            //什么時(shí)候獲取演痒？當(dāng)服務(wù)器響應(yīng)成功后再獲取
      
            //當(dāng)xmlhttp對(duì)象的就緒狀態(tài)改變時(shí)亲轨，觸發(fā)事件onreadystatechange。
            xmlhttp.onreadystatechange=function()
            {
                //判斷readyState就緒狀態(tài)是否為4鸟顺，判斷status響應(yīng)狀態(tài)碼是否為200
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                   //獲取服務(wù)器的響應(yīng)結(jié)果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }
      

   2. JQeury實(shí)現(xiàn)方式
      1. $.ajax()
         • 語(yǔ)法：$.ajax({鍵值對(duì)}

          //使用$.ajax()發(fā)送異步請(qǐng)求
             $.ajax({
                 url:"ajaxServlet1111" , // 請(qǐng)求路徑
                 type:"POST" , //請(qǐng)求方式
                 //data: "username=jack&age=23",//請(qǐng)求參數(shù)
                 data:{"username":"jack","age":23},
                 success:function (data) {
                     alert(data);
                 },//響應(yīng)成功后的回調(diào)函數(shù)
                 error:function () {
                     alert("出錯(cuò)啦...")
                 },//表示如果請(qǐng)求響應(yīng)出現(xiàn)錯(cuò)誤瓶埋，會(huì)執(zhí)行的回調(diào)函數(shù)
         
                 dataType:"text"http://設(shè)置接受到的響應(yīng)數(shù)據(jù)的格式
             });
         

      2. $.get()：發(fā)送get請(qǐng)求
         • 語(yǔ)法：$.get(url, [data], [callback], [type])
           • 參數(shù)：
             • url：請(qǐng)求路徑
             • data：請(qǐng)求參數(shù)
             • callback：回調(diào)函數(shù)
             • type：響應(yīng)結(jié)果的類型

      
          $.get("ajaxServlet", {
              username: "rose"
          }, function (data) {
              alert(data);
          }, "text");
      
      

      3. $.post()：發(fā)送post請(qǐng)求
         • 語(yǔ)法：$.post(url, [data], [callback], [type])
           • 參數(shù)：
             • url：請(qǐng)求路徑
             • data：請(qǐng)求參數(shù)
             • callback：回調(diào)函數(shù)
             • type：響應(yīng)結(jié)果的類型

          $.post("ajaxServlet", {
             username: "rose"
         }, function (data) {
             alert(data);
         }, "text");
         

JSON：

1. 概念： JavaScript Object Notation JavaScript對(duì)象表示法

   Person p = new Person();
   p.setName("張三");
   p.setAge(23);
   p.setGender("男");
   
   var p = {"name":"張三","age":23,"gender":"男"};
   

   • json現(xiàn)在多用于存儲(chǔ)和交換文本信息的語(yǔ)法
   • 進(jìn)行數(shù)據(jù)的傳輸
   • JSON 比 XML 更小、更快，更易解析养筒。

2. 語(yǔ)法：

   1. 基本規(guī)則
      • 數(shù)據(jù)在名稱/值對(duì)中：json數(shù)據(jù)是由鍵值對(duì)構(gòu)成的
        • 鍵用引號(hào)(單雙都行)引起來(lái)曾撤，也可以不使用引號(hào)
        • 值得取值類型：
          1. 數(shù)字（整數(shù)或浮點(diǎn)數(shù)）
          2. 字符串（在雙引號(hào)中）
          3. 邏輯值（true 或 false）
          4. 數(shù)組（在方括號(hào)中） {"persons":[{},{}]}
          5. 對(duì)象（在花括號(hào)中） {"address":{"province"："陜西"....}}
          6. null
      • 數(shù)據(jù)由逗號(hào)分隔：多個(gè)鍵值對(duì)由逗號(hào)分隔
      • 花括號(hào)保存對(duì)象：使用{}定義json 格式
      • 方括號(hào)保存數(shù)組：[]
   2. 獲取數(shù)據(jù):

      1. json對(duì)象.鍵名

      2. json對(duì)象["鍵名"]

      3. 數(shù)組對(duì)象[索引]

      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對(duì)象中所有的鍵和值
          //for in 循環(huán)
         /* for(var key in person){
              //這樣的方式獲取不行。因?yàn)橄喈?dāng)于  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數(shù)據(jù)和Java對(duì)象的相互轉(zhuǎn)換

   • JSON解析器：
     • 常見的解析器：Jsonlib晕粪，Gson挤悉，fastjson，jackson
   1. JSON轉(zhuǎn)為Java對(duì)象
      1. 導(dǎo)入jackson的相關(guān)jar包
      2. 創(chuàng)建Jackson核心對(duì)象 ObjectMapper
      3. 調(diào)用ObjectMapper的相關(guān)方法進(jìn)行轉(zhuǎn)換
         1. readValue(json字符串?dāng)?shù)據(jù),Class)
   2. Java對(duì)象轉(zhuǎn)換JSON
      1. 使用步驟：
         1. 導(dǎo)入jackson的相關(guān)jar包
         2. 創(chuàng)建Jackson核心對(duì)象 ObjectMapper
         3. 調(diào)用ObjectMapper的相關(guān)方法進(jìn)行轉(zhuǎn)換
            1. 轉(zhuǎn)換方法：
               • writeValue(參數(shù)1巫湘，obj):
                 參數(shù)1：
                 File：將obj對(duì)象轉(zhuǎn)換為JSON字符串装悲，并保存到指定的文件中
                 Writer：將obj對(duì)象轉(zhuǎn)換為JSON字符串，并將json數(shù)據(jù)填充到字符輸出流中
                 OutputStream：將obj對(duì)象轉(zhuǎn)換為JSON字符串尚氛，并將json數(shù)據(jù)填充到字節(jié)輸出流中
               • writeValueAsString(obj):將對(duì)象轉(zhuǎn)為json字符串

   @Test
   public void test1() throws JsonProcessingException {
       //1.創(chuàng)建Person對(duì)象
       Person p = new Person();
       p.setName("zhangsan");
       p.setAge(23);
       p.setGender("男");
   
       //創(chuàng)建Jackson的核心對(duì)象 ObjectMapper
       ObjectMapper mapper = new ObjectMapper();
       //3.轉(zhuǎn)換
       /*
   
           轉(zhuǎn)換方法：
               writeValue(參數(shù)1诀诊，obj):
                   參數(shù)1：
                       File：將obj對(duì)象轉(zhuǎn)換為JSON字符串，并保存到指定的文件中
                       Writer：將obj對(duì)象轉(zhuǎn)換為JSON字符串阅嘶，并將json數(shù)據(jù)填充到字符輸出流中
                       OutputStream：將obj對(duì)象轉(zhuǎn)換為JSON字符串属瓣，并將json數(shù)據(jù)填充到字節(jié)輸出流中
               writeValueAsString(obj):將對(duì)象轉(zhuǎn)為json字符串
   
        */
       String s = mapper.writeValueAsString(p);
       System.out.println(s);//{"name":"zhangsan","age":23,"gender":"男","birthday":null}
       //writeValue，將數(shù)據(jù)寫到d://a.txt文件中
       //mapper.writeValue(new File("d://a.txt"),p);
   
       //writeValue.將數(shù)據(jù)關(guān)聯(lián)到Writer中
       mapper.writeValue(new FileWriter("d://b.txt"),p);
   }
   

   2. 注解：

      1. @JsonIgnore：排除屬性讯柔。
      2. @JsonFormat：屬性值得格式化
         * @JsonFormat(pattern = "yyyy-MM-dd")

   3. 復(fù)雜java對(duì)象轉(zhuǎn)換
      1. List：數(shù)組
      2. Map：對(duì)象格式一致
      案例：

• 校驗(yàn)用戶名是否存在
  1. 服務(wù)器響應(yīng)的數(shù)據(jù)抡蛙，在客戶端使用時(shí)，要想當(dāng)做json數(shù)據(jù)格式使用魂迄。有兩種解決方案：
     1. $.get(type):將最后一個(gè)參數(shù)type指定為"json"
     2. 在服務(wù)器端設(shè)置MIME類型
        response.setContentType("application/json;charset=utf-8");

Servlet層

 //1.獲取用戶名
        String username = request.getParameter("username");

        //2.調(diào)用service層判斷用戶名是否存在

        //期望服務(wù)器響應(yīng)回的數(shù)據(jù)格式：{"userExsit":true,"msg":"此用戶名太受歡迎,請(qǐng)更換一個(gè)"}
        //                         {"userExsit":false,"msg":"用戶名可用"}

        //設(shè)置響應(yīng)的數(shù)據(jù)格式為json
        response.setContentType("application/json;charset=utf-8");
        Map<String,Object> map = new HashMap<String,Object>();

        if("tom".equals(username)){
            //存在
            map.put("userExsit",true);
            map.put("msg","此用戶名太受歡迎,請(qǐng)更換一個(gè)");
        }else{
            //不存在
            map.put("userExsit",false);
            map.put("msg","用戶名可用");
        }

        //將map轉(zhuǎn)為json粗截，并且傳遞給客戶端
        //將map轉(zhuǎn)為json
        ObjectMapper mapper = new ObjectMapper();
        //并且傳遞給客戶端
        mapper.writeValue(response.getWriter(),map);

js層

 //在頁(yè)面加載完成后
        $(function () {
           //給username綁定blur事件
           $("#username").blur(function () {
               //獲取username文本輸入框的值
               var username = $(this).val();
               //發(fā)送ajax請(qǐng)求
               //期望服務(wù)器響應(yīng)回的數(shù)據(jù)格式：{"userExsit":true,"msg":"此用戶名太受歡迎,請(qǐng)更換一個(gè)"}
               //                         {"userExsit":false,"msg":"用戶名可用"}
               $.get("findUserServlet",{username:username},function (data) {
                   //判斷userExsit鍵的值是否是true

                   // alert(data);
                   var span = $("#s_username");
                   if(data.userExsit){
                       //用戶名存在
                       span.css("color","red");
                       span.html(data.msg);
                   }else{
                       //用戶名不存在
                       span.css("color","green");
                       span.html(data.msg);
                   }
               });

           }); 
        });