AJAX

!! ES6新增模板字符串 `` ,需要拼接值时使用${}包裹即可,便于字符串的拼接

 1.AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML一种新技术，
 而是多个技术综合。用于快速创建动态网页的技术。
 2.一般的网页如果需要更新内容，必需重新加载个页面。而AJAX通过浏览器与服务器
 进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，
 对网页的部分内容进行局部更新。

 同步和异步区别:
 同步（Synchronization)即任务顺序执行，在上一个任务未执行完成之前下一个任务等待执行。
 异步（Asynchronous ）：CUP暂时搁置当前任务，等到主线程任务执行完成，再来响应该任务。
 在JS中，异步有两种，一种是setTimeout()和setInterval()函数，它们会在指定的一段事件后触发指定函数的调用。
 另一种是ajax异步。

 1.核心对象：XMLHttpRequest
   用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
     
 2.打开链接：open(method,url,async)
   method：请求的类型 GET 或 POST。
   url：请求资源的路径。
   async：true(异步) 或 false(同步)。
     
 3.发送请求：send(String params)
   params：请求的参数(POST 专用)。
     
 4.处理响应：onreadystatechange
   readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪。
   status：200-响应已全部 OK
     
 5.获得响应数据形式
   responseText：获得字符串形式的响应数据。
   responseXML：获得 XML 形式的响应数据

 核心语法：$.get(url,[data],[callback],[type]);
 url：请求的资源路径。
 data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
 callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
 type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

 核心语法：$.post(url,[data],[callback],[type]);
 url：请求的资源路径。
 data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
 callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
 type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。 
   核心语法：$.post(url,[data],[callback],[type]);

核心语法：$.ajax({name:value,name:value,…});
 url：请求的资源路径。
 async：是否异步请求，true-是，false-否 (默认是 true)。
 data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
 type：请求方式，POST 或 GET (默认是 GET)。
 dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
 success：请求成功时调用的回调函数。
 error：请求失败时调用的回调函数
     contentType:设置发送给服务器的数据格式,默认是application/x-www-form-urlencoded,
     只能处理普通的json处理,不支持嵌套json,此时可以自定义为applciation/json进行处理 

window.onload = function (ev) {
    $("#username").blur(function () {
        // get/post方式
        /*$.post(
            "/LoginCheckout",
            "username="+$("#username").val(),
                function (data) {
                    $("#warning").html(data);
                },
                "text"
        );*/
        // 通用方式
        $.ajax({
            url: "/LoginCheckout",
            async:true,
            data:"username="+$("#username").val(),
            type:"post",
            dataType:"text", // 特别注意dataType中Type首字母是大写的
            success:function (data) {
                $("#warning").html(data);
            },
            error:function () {
                 alert("请求失败");
            }
        });
    });
 };

 ObjectMapper // Jackson工具包的核心类,提供一些方法来实现JSON字符串和对象之间的转换
 TypeReference // 对集合泛型的反序列化,使用TypeReference明确指定反序列化的对象类型

 String writeValueAsString(Object obj) // 将JAVA对象转换成JSON字符串
 <T> readValue(String json,Class<T> valueType) // 将JSON字符串转换成Java对象
 <T> readValue(String json,TypeReference valueTypeRef) // 将JSON字符串转换成Java对象

 1.导入相关JAR包
   jackson-annotations.jar
   jackson-core.jar
   jackson-databind.jar
 2.创建ObjectMapper对象
   ObjectMapper objectMapper = new ObjectMapper();
 3.对自定义类进行JSON格式转换
   String user = objectMapper.writeValueAsString(new User("张三","123"));
 4.JSON转换为自定义类
   User us = objectMapper.readValue(user,User.class);

 1.将对象转换为JSON格式时都使用writeValueAsString方法,参数均为要转换的对象名称
 2.将JSON格式转换为对象时需要注意:
 (1)若转换的对象中包含自定义类时,readValue中传递的第二个参数需要为TypeReference的
 实现类,泛型写上转换的对象的类型,{}中为空实现即可
 
 示例:
     Map<String, User> map2 = new HashMap<>();
     map2.put("一班",new User("张三", "23"));
     map2.put("二班",new User("李四", "25"));
     String s2 = objectMapper.writeValueAsString(map2);
     System.out.println(s2);
     HashMap<String, User> value = objectMapper.readValue(s2, new TypeReference<HashMap<String, User>>(){});
     System.out.println(value);

json格式数据的key值访问方式
 1.对象.key
 例：rtn.message
 
 2.对象[key]
 例：rtn[‘message’]

 java:
 (1)Page中封装的是从数据库中查询出的数据,以json字符串的格式进行存储(但不属于json,
 使用ObjectMapper进行转换)
 (2)PageInfo中封装的是分页的所有信息,包括总页数,总条数,当前页数,数据中查询数据等,
 数据中查询数据使用list键进行标识,pages为总页数的键名称,pageNum为当前页数的键名称
 
 html+jquery;
 (1)瀑布流实现分页时,通过服务器传递过来的数据data获取从数据库中查询出来的信息,
 例如data[0].title即表示数据库中title列的第一条数据的信息
 (2)按钮实现分页时,通过服务器传递过来的数据data获取从数据库中查询出来的信息,
 例如data.list[0].title即表示data中list中的title值,即数据库中title列的第一条数据的信息,
 按钮实现分页属于一种模板代码,导入jquery.simplePagination.js文件后进行如下配置即可使用:
 html:
 <!--分页插件的标签元素的固定模板-->
     <div class="content">
         <div class="pagination-holder clearfix">
             <div id="light-pagination" class="pagination"></div>
         </div>
     </div>
 jquery:
     $("#light-pagination").pagination({
         // 为分页按钮区域设置总页数,paggeInfo即为服务器返回的PageInfo数据
         pages:pageInfo.pages,
         // 为分页按钮区域设置当前页数,paggeInfo即为服务器返回的PageInfo数据
         currentPage:pageInfo.pageNum
    });
 
     //为分页按钮绑定单击事件,完成上一页下一页查询功能
     $("#light-pagination .page-link").click(function () {
         //获取点击按钮的文本内容
         let page = $(this).html();
         //如果点击的是Prev，调用查询方法，查询当前页的上一页数据
         if(page == "Prev") {
             queryByPage(pageInfo.pageNum - 1,pageSize);
        }else if (page == "Next") {
             //如果点击的是Next，调用查询方法，查询当前页的下一页数据
             queryByPage(pageInfo.pageNum + 1,pageSize);
        } else {
             //调用查询方法，查询当前页的数据
             queryByPage(page,pageSize);
        }
    });

 页面加载事件:$(function(){})
 
 获取浏览器可视区(当前窗口)宽度高度
 $(window).width(); // $(window获取当前窗口对象)
 $(window).height();
 
 获取滚动条上下/左右滚动距离
 $(window).scrollTop();  
 $(window).scrollLeft();
 
 获取页面文档的宽度高度
 $(document).width();
 $(document).height();
 
 // jQuery(window).height()代表了当前可见区域的大小
 // jQuery(document).height()则代表了整个文档的高度
 
 获取页面滚动距离
 $(document).scrollTop();  
 $(document).scrollLeft();
 
 滚动条滚动事件
     $(window).scroll(function(){  
         ......  
    })
     $('html,body').animate({'scrollTop':0}) 

//定义发送请求标记
 var send = true;
 //定义当前页码和每页显示的条数
 var start = 1;
 var pageSize = 10;
 //设置页面加载事件
 $(function () {
     //为当前窗口绑定滚动条滚动事件
     $(window).scroll(function () {
         //计算当前展示数据是否浏览完毕
         //当 滚动条距底部的距离 + 当前滚动条滚动的距离 + 当前窗口的高度 >= 当前文档的高度
         if((1 + $(window).scrollTop() + $(window).height()) >= $(document).height() && send == true) {
                 //将请求标记置为false，当前异步操作完成前，不能重新发起请求。
                 send = false;
                 //根据当前页和每页显示的条数来 请求查询分页数据
                 //加载动图显示
                 $(".loading").show();
                 //发起AJAX请求
                 $.ajax({
                     //请求的资源路径
                     url:"newsServvar",
                     //请求的参数
                     data:{"start":start,"pageSize":pageSize},
                     //请求的方式
                     type:"POST",
                     //响应数据形式
                     dataType:"json",
                     //请求成功后的回调函数
                     success:function (data) {
                         if(data.length == 0) {
                             $(".loading").hide();
                             $("#no").html("我也是有底线的...");
                             return;
                        }
                         //加载动图隐藏
                         $(".loading").hide();
                         //将数据显示
                         var titles = "";
                         for(var i = 0; i < data.length; i++) {
                             titles += "<li>\n" +
                                 "               <div class=\"title-box\">\n" +
                                 "                   <a href=\"#\" class=\"link\">\n" +
                                 data[i].title +
                                 "                       <hr>\n" +
                                 "                   </a>\n" +
                                 "               </div>\n" +
                                 "           </li>";
                        }
 
                         //显示到页面
                         $(".news_list").append(titles);
                         //将请求标记设置为true
                         send = true;
                    }
                });
                 //当前页码+1
                 start++;
            }
    });
 });

//定义当前页码和每页显示的条数
 let start = 1;
 let pageSize = 10;
 //调用查询数据的方法
 queryByPage(start,pageSize);
 //定义请求查询分页数据的函数，发起AJAX异步请求，将数据显示到页面
 function queryByPage(start,pageSize) {
     $.ajax({
         //请求的资源路径
         url:"newsServlet2",
         //请求的参数
         data:{"start":start,"pageSize":pageSize},
         //请求的方式
         type:"POST",
         //响应数据形式
         dataType:"json",
         //请求成功后的回调函数
         success:function (pageInfo) {
             //将数据显示到页面
             let titles = "";
             for(let i = 0; i < pageInfo.list.length; i++) {
                 titles += "<li>\n" +
                     "               <div class=\"title-box\">\n" +
                     "                   <a href=\"#\" class=\"link\">\n" +
                                             pageInfo.list[i].title +
                     "                       <hr>\n" +
                     "                   </a>\n" +
                     "               </div>\n" +
                     "           </li>";
            }
             $(".news_list").html(titles);
             //为分页按钮区域设置页数参数（总页数和当前页）
             $("#light-pagination").pagination({
                 pages:pageInfo.pages,
                 currentPage:pageInfo.pageNum
            });
 
             //为分页按钮绑定单击事件,完成上一页下一页查询功能
             $("#light-pagination .page-link").click(function () {
                 //获取点击按钮的文本内容
                 let page = $(this).html();
                 //alert(page);
                 //如果点击的是Prev，调用查询方法，查询当前页的上一页数据
                 if(page == "Prev") {
                     queryByPage(pageInfo.pageNum - 1,pageSize);
                }else if (page == "Next") {
                     //如果点击的是Next，调用查询方法，查询当前页的下一页数据
                     queryByPage(pageInfo.pageNum + 1,pageSize);
                } else {
                     //调用查询方法，查询当前页的数据
                     queryByPage(page,pageSize);
                }
            });
        }
    });
 }