html 页面的同步与异步(ajax)

同步加载(刷新):每次刷新的是整个页面的数据

异步加载(刷新):每次刷新的是整个页面的部分数据

由于之前做公司内部的小项目的一个显示的页面,用到定时加载页面数据的变化 ,每隔多少时间刷新一次数据反馈到页面;所以前端方面就随意写了,做了一个简单的小后台操作,然后把后端接口和数据逻辑写完,就接连前后端测试无误后,部署了 》》》

我的小麻烦来了,由于我的显示页面的数据数据请求都是直接加载该接口,然后重定向(同步加载)回显示页面,这就造成了很多小问题了:

(1)由于是拉取第三方数据,再经过后台的逻辑计算循环存储到本地数据库,再查询本地数据返回,如果网络不怎么好,就很容易出现加载失败,返回显示页面就会报警,不能正常显示,就要重新投屏刷新;

(2)本公司的网络到晚上0点时会断网,早上看到的显示页面就会变白屏,每天都要重新投屏刷新;

所以:本人就不得不优化这个项目了(没办法,本公司本部门就我一个web的,而我就是部门中混的最差的那个,原因这里就不说了)

好了,搬砖时候到了  》》》

1、优化前的显示页面

后端返回(另外两个方法类似):

 public function gogo(){
        $meblts = Db::query('SELECT name,avatarUrl,all_task,completed_task,today_task,COUNT(1) FROM comp_members WHERE today_task =(SELECT MAX(today_task) FROM comp_members)'); //查询数据库获取数据
        $list = Db::query('SELECT * FROM comp_members ORDER BY completed_task DESC');//查询数据库获取数据

        $this->assign("list",$list);//获取对象显示到对应的view
        $this->assign('meblts', $meblts);//获取对象显示到对应的view

        $text1 = Db::query('SELECT content FROM tb_text where id = 1');//获取文字1
        $text1 = current($text1);
        $text2 = Db::query('SELECT content FROM tb_text where id = 2');//获取文字2
        $text2 = current($text2);
        $this->assign("tx1",$text1);//获取对象显示到对应的view
        $this->assign("tx2",$text2);//获取对象显示到对应的view
        return $this->fetch();
       
    }

html 和 JavaScript:(记得引入js、一些 图片和 数据,我的后端是php语言)(数据可以造个假的测试)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--<meta http-equiv="refresh" content="1900">--><!--定时刷新页面-->
    <title>排行榜</title>
    <link rel="icon" type="image/x-icon" href="__PUBLIC__/image/favicon2.ico">
    <link rel="stylesheet" href="__PUBLIC__/css/tbrank.css">
    <script type="text/javascript" src="__PUBLIC__/js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="dv_tay">
        <div class="dv_tay2">
            <div class="dv_tb dv_tb_left">
                <div >
                    <div class="tb_left_box tb_left_top"></div>
                    <div id="tb_left_body" class="tb_left_box tb_left_middle">
                        {volist name="meblts" id="m" length='1'}
                        <div class="tb_margin2">
                            <img class="tb_box_img" src={$m.avatarUrl} />
                        </div>
                        <div class="tb_margin">
                            <p class="tb_box_white tb_box_name"><b>{$m.name}</b></p>
                            <b class="tb_box_white tb_box_font">今日之星</b>
                        </div>
                        <div class="tb_margin">
                            <div  class="tb_box">
                                <p class="tb_box_title tb_box_font">已完成</p>
                                <b class="tb_box_white dv_bold">{$m.completed_task}</b>
                            </div>
                            <div class="tb_box">
                                <p class="tb_box_title tb_box_font">当日完成</p>
                                <b class="tb_box_white dv_bold">{$m.today_task}</b>
                            </div>
                            <div class="tb_box">
                                <p class="tb_box_title tb_box_font">累计完成</p>
                                <b class="tb_box_white dv_bold">{$m.all_task}</b>
                            </div>
                        </div>
                        <div class="tb_margin2">
                            <img class="tb_box_trophy" src="__PUBLIC__/image/trophy.png" />
                        </div>
                        <div class="tb_margin2">
                            <p class="tb_box_white tb_box_fw ">{$tx1.content}</p>
                            <p class="tb_box_white tb_box_fw ">{$tx2.content}</p>
                        </div>
                        {/volist}
                    </div>
                    <div class="tb_left_box tb_left_lower"></div>
                </div>
            </div>
            <div class="dv_tb dv_tb_right">
                <div class="dv_theme">
                    <img class="dv_theme_img" src="__PUBLIC__/image/prize.png"/>
                    <b>软硬件工程师绩效荣耀榜</b>
                    <img class="dv_theme_top" src="__PUBLIC__/image/top10.png"/>
                </div>
                <div class="dv_tb_rblock dv_tb_scroll">
                    <table id="tb" >
                        <tbody>
                        {volist name='list' id='v' length="10"}
                        <tr class="tb_tr">
                            <td style="display: none">{$v._id}</td>
                            <td class="tr_tdimg"><img class="tb_img" src={$v.avatarUrl} /></td>
                            <!--<td class="td_position"><span class="td_name dv_bold2">{$v.name}</span></td>-->
                            <td class="tr_td"><span class="tb_zt_font">共计任务</span><p class="dv_bold">{$v.all_task}</p></td>
                            <td class="tr_td"><span class="tb_zt_font">未完成</span><p class="dv_bold">{$v.unfinished_task}</p></td>
                            <td class="tr_td"><span class="tb_zt_font">已完成</span><p class="dv_bold">{$v.completed_task}</p></td>
                            <td class="tr_td"><span class="tb_zt_font">当日完成</span><p class="dv_bold">{$v.today_task}</p></td>
                            <td class="tr_td"><span class="tb_zt_font">累计PASS</span><p class="dv_bold">{$v.pass}</p></td>
                            <td class="tr_td"><span class="tb_zt_font">累计NG</span><p class="dv_bold">{$v.ng}</p></td>
                            <td class="tr_td"><span class="tb_zt_font">月度排名</span><p class="dv_bold">{$i}</p></td>
                            <?php if($i==1){ ?>
                            <td class="tr_td tb_left_img"><img class="tb_img2" src="__PUBLIC__/image/crown.png"/></td>
                            <?php  } ?>
                            <?php if($i==2){ ?>
                            <td class="tr_td tb_left_img"><img class="tb_img2" src="__PUBLIC__/image/crown.png"/></td>
                            <?php  } ?>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
                <div class="dv_btnfs">
                    <a class="dv_fs dv_fse" onclick="requestFullScreen();"></a>
                    <a class="dv_fs dv_fsc" onclick="exitFullscreen();"></a>
                </div>
            </div>
        </div>
    </div>
    <script>
        var left_body_height = document.getElementById('tb_left_body');
        var tr_height = document.getElementById('tb').offsetHeight;
        //console.log('body:'+left_body_height);
        var total_height = tr_height+28;
        left_body_height.style.height = total_height+'px';
        //console.log('总高度:'+total_height+';body:'+left_body_height);

        if (navigator.onLine) { // 正常工作 有网状态//由于setInterval()每次刷新都重新计时
            window.onload = function () {
                setInterval(function () {
                    console.log('今天共计的!');
                    window.location.href = 'todayAndAll.html';//当天任务
                }, 1200 * 1000);
            }
            setInterval(function () {
                console.log('当月的!');
                window.location.href = 'unAndHas.html';//当月已完成
            }, 1201 * 1000);
        }
        else {
            console.log('网络断开了');
        }
        //初始化隐藏
        $(".dv_fsc").fadeOut();//隐藏收缩
        //进入全屏
        function requestFullScreen() {
            var de = document.documentElement;
            if (de.requestFullscreen) {
                de.requestFullscreen();
            } else if (de.mozRequestFullScreen) {
                de.mozRequestFullScreen();
            } else if (de.webkitRequestFullScreen) {
                de.webkitRequestFullScreen();
            }
            $(".dv_fsc").fadeIn(500);	//显示收缩
            $(".dv_fse").fadeOut(10);//隐藏扩展
        }
        //退出全屏
        function exitFullscreen() {
            var de = document;
            if (de.exitFullscreen) {
                de.exitFullscreen();
            } else if (de.mozCancelFullScreen) {
                de.mozCancelFullScreen();
            } else if (de.webkitCancelFullScreen) {
                de.webkitCancelFullScreen();
            }
            $(".dv_fse").fadeIn(500);	//显示扩展
            $(".dv_fsc").fadeOut(10);//隐藏收缩
        }
    </script>
</body>
</html>

自定义的样式  css:

/* 排行榜样式 */
body,img,ul,li,p{margin:0px;padding:0px;border:0px;#font-family:'font_web';}
.dv_tay{max-width:100%;height:100%;padding:15px;background-color: #007aff;}
.dv_tay2{width:100%;height:100%;border:1px solid #339966;border-radius:10px;background-color: #F5FAFE;display:flex}
.dv_tb{max-width:100vw;text-align: center;display: inline-block;}/*块状盒子*/
/*左边内容*/
.dv_tb_left{width:25vw;min-width:250px;margin:0px 8px;#position: relative;left:0px;top:0px;}
.tb_left_lower{height:22px;border-radius:15px 15px 0px 0px;margin-top:10px;background-color: #A7E2E7;}/*上下行条*/
.tb_left_top{height:22px;border-radius:0px 0px 15px 15px;margin-bottom: 10px;background-color: #A7E2E7;}/*上下行条*/
.tb_left_middle{height:445px;border-radius: 8px;background-color: #00cc66;text-align: center;}
.tb_margin{padding: 6px 5px;}
.tb_margin2{padding: 5px 25px;}
.tb_box_img{width:100%;min-width:60px;max-width: 100px;border-radius: 50%;}/*头像*/
.tb_box_trophy{width:100%;min-width:60px;max-width: 100px;}/*奖杯*/
.tb_box{display:inline-block;margin:5px 12px;}
.tb_box_white{color:#FFFFFF;line-height:1.5;}/*白色字体*/
.tb_box_font{font-size:12px;line-height:1.5;margin-bottom: 10px;}
.tb_box_name{font-size:32px;line-height:1.5;}/*姓名*/
.tb_box_fw{font-family:'font_web';font-size:18px;margin-top: 4px;font-weight: 600}

/*右边内容*/
.dv_tb_right{width:75%;margin-top:35px;position:relative;}
.dv_theme{height:28px;display: flex;text-align:left;font-size: 1.2em;line-height: 28px;}/*标题*/
.dv_theme_img{height:25px;margin-right:10px;padding-left: 1.8%;}/*标题图*/
.dv_theme_top{height:23px;}
.dv_tb_rblock{width:96%;}
.dv_tb_scroll{overflow-x: auto;overflow-y: hidden;white-space: nowrap;transition: all 1s;}
.tb_left_img{text-align: center;}
#tb{width:100%;margin:auto;}/*数据表格*/
.tb_tr{max-width:99%;display: flex;border:1px solid rgba(213, 213, 213, .3);margin: 3px 0px;}/*表格行*/
.tb_img{height:34px;position: relative;margin-top: 1px;border-radius:50%;}/*头像*/
.tb_img2{height:25px;position: relative;margin-top: 3px;}/*皇冠*/
.dv_bold{font-weight: bold;font-size:16px;line-height: 18px;font-family:'font_web';}/*数字字体加粗*/
.dv_bold2{font-weight: bold;font-size:12px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}/*姓名字体加粗,长度过长隐藏*/
.tr_tdimg{width:40px;height:36px;padding:0px 5px;}
.td_position{width:40px;height:36px;margin-right: 1.8%;line-height: 32px;text-align-last:justify; }/*图片文字居左对齐*/
.td_name{position:relative;left:5px;}/*图片靠左的文字垂直居中*/
.tb_zt_font{position: relative;line-height:18px;font-size:8px;-webkit-transform:scale(0.8);-webkit-text-size-adjust:none;font-family:'font_web';font-weight: 600}
.tr_td{width:60px;height:36px;padding:0px 8px;text-align: center;}
/*全屏扩展与收缩按钮*/
.dv_btnfs{width:25px;height: 25px;position: absolute;right:20px;}
.dv_fs{width:25px;height:25px;display:block;}
.dv_fse{background:url('../image/fullScreen/fse1.png') no-repeat center;background-size:cover;}
.dv_fse:hover{background:url('../image/fullScreen/fse2.png') no-repeat center;background-size:cover;}
.dv_fsc{background:url('../image/fullScreen/fsc1.png') no-repeat center;background-size:cover;}
.dv_fsc:hover{background:url('../image/fullScreen/fsc2.png') no-repeat center;background-size:cover;}
@media only screen and (max-width:500px){
    .dv_tay{width:100%;padding:0px;background-color: #f9f9f9;}
    .dv_tay2{width:100%;display:block;text-align: center}
    /*左边内容*/
    .dv_tb_left{width:90%;margin:auto;#position: relative;left:0px;top:0px;}
    .tb_left_lower{height:30px;border-radius:10px 10px 0px 0px;margin-top:20px;}/*上下行条*/
    .tb_left_box{width:100%;}
    .tb_left_top{height:30px;border-radius:0px 0px 10px 10px;margin-bottom: 20px;}/*上下行条*/
    .tb_box_img{width:80px;}/*头像*/
    .tb_box_font{font-size: 16px;line-height:1.5;margin-bottom: 10px;}
    .tb_box_name{font-size:24px;line-height:1.5;}/*姓名*/
    .tb_box_trophy{width:80px;}/*奖杯*/
    .tb_margin{margin: 10px;}
    .tb_box{display:inline-block;margin:5px;}

    /*右边内容*/
    .dv_tb_right{width:95%;;margin:20px 10px;}
    #tb{width:auto;margin:0px;}/*数据表格*/
    .tb_tr{width:100%;display: flex;}/*表格行*/
    .td_position{text-align-last:unset; }
    .tr_tdimg{height:30px;padding:0px 5px;}
    .dv_tb_scroll{overflow-x: auto;overflow-y: hidden;white-space: nowrap;transition: all 1s;}
    .dv_theme{font-size: 16px;}/*标题*/
    .dv_theme_img{width:20px;margin-left:10px;}/*标题图*/
    .tr_td{width:60px;padding:0px 6px;}
    /*全屏扩展与收缩按钮*/
    .dv_btnfs{position: absolute;right:5px;bottom: -15px;}
}
@font-face {
    font-family: 'font_web';
    src: url('../font/webfont.eot'); /* IE9*/
    src:
        url('../font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../font/webfont.woff') format('woff'), /* chrome、firefox */
        url('../font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('../font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
    font-weight:normal;
    font-style:normal;
}

2、优化后的显示页面

后端返回(另外两个方法类似):

public function godata(){
        $meblts = Db::query('SELECT name,avatarUrl,all_task,completed_task,today_task,pass,ng,COUNT(1) FROM comp_members WHERE today_task =(SELECT MAX(today_task) FROM comp_members)'); //查询数据库获取数据
        $list = Db::query('SELECT * FROM comp_members ORDER BY completed_task DESC');//查询数据库获取数据

        $this->assign("list",$list);//获取对象显示到对应的view
        $this->assign('meblts', $meblts);//获取对象显示到对应的view

        $text1 = Db::query('SELECT content FROM tb_text where id = 1');//获取文字1
        $text1 = current($text1);
        $text2 = Db::query('SELECT content FROM tb_text where id = 2');//获取文字2
        $text2 = current($text2);
        $this->assign("tx1",$text1);//获取对象显示到对应的view
        $this->assign("tx2",$text2);//获取对象显示到对应的view

         return json(['t1'=>$text1,'t2'=>$text2,'lt1'=>$meblts,'lt2'=>$list]);
    }

html 和 JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--<meta http-equiv="refresh" content="1900">--><!--定时刷新页面-->
    <title>排行榜</title>
    <link rel="icon" type="image/x-icon" href="__PUBLIC__/image/favicon2.ico">
    <link rel="stylesheet" href="__PUBLIC__/css/tbrank.css">
    <script type="text/javascript" src="__PUBLIC__/js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="dv_tay">
        <div class="dv_tay2">
            <div class="dv_tb dv_tb_left">
                <div >
                    <div class="tb_left_box tb_left_top"></div>
                    <div id="tb_left_body" class="tb_left_box tb_left_middle">

                    </div>
                    <div class="tb_left_box tb_left_lower"></div>
                </div>
            </div>
            <div class="dv_tb dv_tb_right">
                <div class="dv_theme">
                    <img class="dv_theme_img" src="__PUBLIC__/image/prize.png"/>
                    <b>软硬件工程师绩效荣耀榜</b>
                    <img class="dv_theme_top" src="__PUBLIC__/image/top10.png"/>
                </div>
                <div class="dv_tb_rblock dv_tb_scroll">
                    <table id="tb" >
                        <tbody id="tbd">
                       
                        </tbody>
                    </table>
                </div>
                <div class="dv_btnfs">
                    <a class="dv_fs dv_fse" onclick="requestFullScreen();"></a>
                    <a class="dv_fs dv_fsc" onclick="exitFullscreen();"></a>
                </div>
            </div>
        </div>
    </div>
    <div id="txt"></div>

     <script>
        $(document).ready(function(){
            init();//初始化执行一次
        })
        //判断网络是否断开
        if (navigator.onLine) { // 正常工作 有网状态//由于setInterval()每次刷新都重新计时
            window.onload = function () {
                setInterval(function () {
                    $.ajax({
                        type: 'post',
                        url: 'todayAndAll',
                        success: function (data) {
                            console.log(data);
                        },
                        error: function () {
                            console.log('AJAX请求失败1!');
                        }
                    });
                }, 1300 * 1000);
                setInterval(function () {
                    $.ajax({
                        type: 'post',
                        url: 'unAndHas',
                        success: function (data) {
                            console.log(data);
                        },
                        error: function () {
                            console.log('AJAX请求失败2!');
                        }
                    });
                }, 1720 * 1000);
                setInterval(function () {
                    init();
                }, 1800 * 1000);
            }
        }else{
            console.log('网络断开了');
        }

        function init() {
            $.ajax({
                type: 'post',
                url: 'godata',
                success: function (data) {
                    console.log(data);
                    var html = '';//定义左边内容
                    var right = '';//定义右边内容
                    html = " <div class='tb_margin2'>\n" +
                        "                            <img class='tb_box_img' src= '"+data.lt1[0].avatarUrl +"'/>\n" +
                        "                        </div>\n" +
                        "                        <div class='tb_margin'>\n" +
                        "                            <p class='tb_box_white tb_box_name'><b>"+data.lt1[0].name+"</b></p>\n" +
                        "                            <b class='tb_box_white tb_box_font'>今日之星</b>\n" +
                        "                        </div>\n" +
                        "                        <div class='tb_margin'>\n" +
                        "                            <div  class='tb_box'>\n" +
                        "                                <p class='tb_box_title tb_box_font'>已完成</p>\n" +
                        "                                <b class='tb_box_white dv_bold'>"+data.lt1[0].all_task+"</b>\n" +
                        "                            </div>\n" +
                        "                            <div class='tb_box'>\n" +
                        "                                <p class='tb_box_title tb_box_font'>当日完成</p>\n" +
                        "                                <b class='tb_box_white dv_bold'>"+data.lt1[0].today_task+"</b>\n" +
                        "                            </div>\n" +
                        "                            <div class='tb_box'>\n" +
                        "                                <p class='tb_box_title tb_box_font'>累计完成</p>\n" +
                        "                                <b class='tb_box_white dv_bold'>"+data.lt1[0].all_task+"</b>\n" +
                        "                            </div>\n" +
                        "                        </div>\n" +
                        "                        <div class='tb_margin2'>\n" +
                        "                            <img class='tb_box_trophy' src='__PUBLIC__/image/trophy.png' />\n" +
                        "                        </div>\n" +
                        "                        <div class='tb_margin2'>\n" +
                        "                            <p class='tb_box_white tb_box_fw '>"+data.t1.content+"</p>\n" +
                        "                            <p class='tb_box_white tb_box_fw '>"+data.t2.content+"</p>\n" +
                        "                        </div>";
                    //循环
                    for(var i= 0;i < 10 ;i++){right += "<tr class='tb_tr'>\n" +
                            "                            <td style='display: none'>data.lt2[i]._id</td>\n" +
                            "                            <td class='tr_tdimg'><img class='tb_img' src="+data.lt2[i].avatarUrl+" /></td>\n" +
                            "                            <td class='tr_td'><span class='tb_zt_font'>共计任务</span><p class='dv_bold'>"+data.lt2[i].all_task+"</p></td>\n" +
                            "                            <td class='tr_td'><span class='tb_zt_font'>未完成</span><p class='dv_bold'>"+data.lt2[i].unfinished_task+"</p></td>\n" +
                            "                            <td class='tr_td'><span class='tb_zt_font'>已完成</span><p class='dv_bold'>"+data.lt2[i].completed_task+"</p></td>\n" +
                            "                            <td class='tr_td'><span class='tb_zt_font'>当日完成</span><p class='dv_bold'>"+data.lt2[i].today_task+"</p></td>\n" +
                            "                            <td class='tr_td'><span class='tb_zt_font'>累计PASS</span><p class='dv_bold'>"+data.lt2[i].pass+"</p></td>\n" +
                            "                            <td class='tr_td'><span class='tb_zt_font'>累计NG</span><p class='dv_bold'>"+data.lt2[i].ng+"</p></td>\n" +
                            "                            <td class='tr_td'><span class='tb_zt_font'>月度排名</span><p class='dv_bold dv_lis"+i+"'>"+(i+1)+"</p></td>\n" +
                            "                        </tr>";
                    }
                    $('#tb_left_body').html(html);  //显示左边内容
                    $('#tbd').after(right);  //显示右边内容
                    var ls = $('.dv_lis0').text();
                    if(ls == 1){
                        $('.dv_lis0').parent().after("<td class='tr_td tb_left_img'><img class='tb_img2' src='__PUBLIC__/image/crown.png'/></td>");
                    }
                    var ls2 = $('.dv_lis1').text();
                    if(ls2 == 2){
                        $('.dv_lis1').parent().after("<td class='tr_td tb_left_img'><img class='tb_img2' src='__PUBLIC__/image/crown.png'/></td>");
                    }
                },
                error: function () {
                    console.log('数据请求失败!');
                }
            });
        }
        //初始化隐藏
        $(".dv_fsc").fadeOut();//隐藏收缩

        //进入全屏
        function requestFullScreen() {
            var de = document.documentElement;
            if (de.requestFullscreen) {
                de.requestFullscreen();
            } else if (de.mozRequestFullScreen) {
                de.mozRequestFullScreen();
            } else if (de.webkitRequestFullScreen) {
                de.webkitRequestFullScreen();
            }
            $(".dv_fsc").fadeIn(500);	//显示收缩
            $(".dv_fse").fadeOut(10);//隐藏扩展
        }
        //退出全屏
        function exitFullscreen() {
            var de = document;
            if (de.exitFullscreen) {
                de.exitFullscreen();
            } else if (de.mozCancelFullScreen) {
                de.mozCancelFullScreen();
            } else if (de.webkitCancelFullScreen) {
                de.webkitCancelFullScreen();
            }
            $(".dv_fse").fadeIn(500);	//显示扩展
            $(".dv_fsc").fadeOut(10);//隐藏收缩
        }

    </script>
</body>
</html>

样式CSS不变;

效果图:

最后

优化成功:局部刷新很不错,局部数据的刷新不仅优化页面的性能,也优化数据请求的资源!真的,可能用到是时候才觉得,之前我们都知道有ajax异步请求这个东西,有的地方也用了,但考虑不到很多种情况,可能是忽略吧!总的来说,经验是不断积累的,不是凭空产生的,多学多练才是硬道理!

猜你喜欢

转载自blog.csdn.net/qq_41408081/article/details/86534435