原生js开发AJAX数据分页缓存模块特效

Posted 学习web前端

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js开发AJAX数据分页缓存模块特效相关的知识，希望对你有一定的参考价值。

效果所用知识点：原生Js实现ajax数据交互、数据分页技术原理剖析，前端数据缓存, H5domAPI应用, 职业化前端的性能优化处理方案, 设计模式与用户体验。

需要更多企业常用学习案例，项目实战，学习方法可以加一下我的前端群589651705，每天都会精选一个特效分享！

数据分页缓存模块源码：



原生js开发AJAX数据分页缓存模块特效

<!DOCTYPE html>

<html>

<head>

<title>index</title>

<meta charset="utf-8">

<meta name="Author" content="潭州学院-海牙">

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <style>

    * { margin: 0; padding: 0; }


        li { list-style: none; }


        a { text-decoration: none; corlor: #222222; }


        .flex_row { display: flex; flex-direction: row; justify-content: space-around; align-items: center; }


        .flex_column { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }


        .wrap { width: 500px; height: 600px; margin: 100px auto; box-shadow: 0 0 5px #434343; }


        .wrap .content { width: 100%; height: 540px; }


        .wrap .content .items {width:100%; padding: 10px 0; border-bottom: 1px solid #cccccc;opacity:1;transition:1s; }

        .wrap .content .items.load{opacity:1;}

        .wrap .content .items .img img { width: 18%; height: 18%; margin-right: 5px; box-shadow: 0 0 3px #dddddd; }


        .wrap .content .items .img img { display: block; width: 45px; height: 45px; }


        .wrap .content .items .bd { width: 76%; }


        .wrap .content .items .bd p { vertical-align: sub; display: inline-block; width: 78%; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #222222; }


        .wrap .content .items .ft { width: 4%; color: #222222; font-weight: bold; }


        .wrap .page { width: 100%; height: 60px; }


        .wrap .page ul { width: 100%; height: 100%; }


        .wrap .page ul li { width: 40px; height: 40px; box-shadow: 0 0 4px #222222; font-weight: bold; text-align: center; line-height: 40px; cursor: pointer; }


        .wrap .page ul li:hover { background-color: rgba(227, 248, 251, 0.49); box-shadow: 0 0 4px rgba(51, 173, 251, 0.89); }

    </style>

</head>

<body>

<div class="wrap flex_column">

<div class="content flex_column">   

</div>

<div class="page">

<ul class="flex_row">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

</div>

</div>

    <script src='js/myAjax.js'></script>

    <script>

        //var box=document.getElementById('box'); //es3就有的 dom节点获取方法

        var oContent=document.querySelector('.content'); //h5 API dom节点 ie8

        var oPages=document.querySelectorAll('.page ul li'); //获取所有的列表节点

        /*

            javascript  基于原型的动态解释性脚本语言

                改变dom元素以及样式

                用户交互事件反馈

                数据交互 ajax

                封装插件

                框架 vue angular node 设计模式 事务代理

                vue es5

                缓存代理

                闭包

                没有类的概念

        */


        var cache={};   

        changePage();

        setInterval(function(){

            cache={};

        },1000);

        function changePage(){

            for(let i=0,len=oPages.length;i<len;i++){ //let es6块级作用域变量声明方式

                oPages[i].onclick=function(){ //用户点击li 弹出li的序号 0-5

                    var page=i+1;      //1-6 0-5

                    if( page in cache){

                        addDom(cache[page]);

                        console.log('数据已经有了');

                    }else{

                        goTo(page);

                        console.time('数据还没有,正在加载');

                    }

                    console.log(cache);

                }

            }

        }

        goTo(1);

        function goTo(page){

            myAjax({

                url:'https://route.showapi.com/181-1',

                method:'GET',

                data:{

                        showapi_appid:'30603',

                        showapi_sign:'98960666afeb4992ae91971d13494090',

                        num:8,

                        page:page,  //数据获取分页

                    },

                success:function(res){

                    //console.log(res);//字符串 string 类json 字符串

                    var result=JSON.parse(res);

                    var dataList=result.showapi_res_body.newslist;

                    //获取到我们的数据数组

                    addDom(dataList);

                    cache[page]=dataList;

                    console.timeEnd('数据还没有,正在加载');

                }   

            });

        }

        function addDom(result){

            var dataList=result;

            var dataLength=dataList.length; //存储数组长度 8

            var str='';

            for(var i=0;i<dataLength;i++){

                str+=`

                     <a href="${dataList[i].url}" class="items flex_row">

                     <div class="img"><img color: #569cd6;">${1+Math.floor(Math.random()*10)}.jpg" alt=""></div>

                    <div class="bd">

                    <p class="label">${dataList[i].title}</p>

                    </div>

                    <div class="ft">&GT;</div>

                 </a>`

                }

                oContent.innerHTML=str; //把生成好的节点字符串 添加到content里面

                //console.log(result.showapi_res_body.newslist[0].url)

        }

        //(function(){})(); //IIFE

         //函数执行 引入进来的 myAjax函数

    </script>

</body>

</html>

<!--

    1. 数据交互


        请求的参数

            请求账号 showapi_appid: 30603

            请求密码 showapi_sign:98960666afeb4992ae91971d13494090

            请求多少条数据 num :8

            是否随机拉取数据:rand:1

            从多少页开始请求:pag:1

    https://route.showapi.com/181-1?showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&num=8&rand=1&page=1


    2. 解析数据并且动态dom生成

        for循环解析数组

        querySelector

        innerHMTL

    前端发起数据请求

    后台验证请求(前后端数据通信 建立数据通道 验证请求状态)

    后台根据请求的参数 发送数据

    数据通过回调函数回馈到前端

    xml base64

    number 单条数据 数字

    string 字符串

    function 函数

    json json

    array 数组

    

    json数据格式

        json.属性名称


        json['属性名称']

        数组 [1,2,3,54,5];

        json:{  

            apple:'苹果',

            pk:[1,2,3,4],

            fn:function(){

                }

            }

            键值对 key:value

                json.apple

        res:{

            showapi_res_body:{

                 code:200, //链接完成

                 msg:'success',

                 newsList:[

                        {

                            url:"http://mp.weixin.qq.com/s/NS1IgclC-bc7eTKUh6r-pA"

                        },

                        {},

                        {},

                        {}

                    ]

                }

        }

        认清自己的水平

            实操结合案例

        javascript

                第一层:[事件,dom方法,bom方法,变量,数据类型,函数,控制流程,判断,数组]

                第二层:[作用域,函数表达式,call,apply,this 对象 面向对象 递归 迭代

                原型,原型链,闭包,arguments,工具的高级用法,二次穿参,回调函数,ajax,正则表达式,前端路由];

                第三层:[设计原理 ,设计模式 ,算法与数据结构, 框架分析]

                碰撞检测模块开发

                事件监听模块开发

                动态遍历模块开发 迭代器

                图片等比例缩放

                拖拽模块开发

        ajax

            XMLHTTPRequest

            open设置数据

            同步  

                一个收银台 排队

            异步

                给一个号牌

                    有人出收集号牌

                    分配号牌给多个收银台进行结账

            windows

                多线程处理

                    同时处理多个进程

                    光速在各个进程之间来回切换

        真正的前端开发

            实现业务逻辑

            用户体验

-->



文档源码已上传群文件，有需要的效果版可以加群获取

点击“阅读原文”也可加入群，点赞分享是种美德哦



以上是关于原生js开发AJAX数据分页缓存模块特效的主要内容，如果未能解决你的问题，请参考以下文章

开发中经常用到的特效效果

原生js实现ajax封装

原生js实现ajax封装

原生js实现ajax封装

原生js实现ajax封装

用原生JS实现AJAX和JSONP