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语言)(数据可以造个假的测试)




    
    
    
    排行榜
    
    
    


    
{volist name="meblts" id="m" length='1'}

{$m.name}

今日之星

已完成

{$m.completed_task}

当日完成

{$m.today_task}

累计完成

{$m.all_task}

{$tx1.content}

{$tx2.content}

{/volist}
软硬件工程师绩效荣耀榜
{volist name='list' id='v' length="10"} {/volist}
{$v._id} 共计任务

{$v.all_task}

未完成

{$v.unfinished_task}

已完成

{$v.completed_task}

当日完成

{$v.today_task}

累计PASS

{$v.pass}

累计NG

{$v.ng}

月度排名

{$i}

自定义的样式  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:




    
    
    
    排行榜
    
    
    


    
软硬件工程师绩效荣耀榜

样式CSS不变;

效果图:

html 页面的同步与异步(ajax)_第1张图片

最后

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

你可能感兴趣的:(web前端,php,异步刷新,同步刷新,ajax)