ajax分页(易源数据api)

来源：互联网发布：python爬虫书籍推荐编辑：程序博客网时间：2024/05/29 18:25
ajax请求

缓存代理

刷新缓存

<!DOCTYPE html><html lang="en"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="Author" content="">    <meta name="Keywords" content="">    <meta name="Description" content="">    <title>Document</title>    <style type="text/css">        * {margin: 0; padding: 0;}        a {text-decoration: none;}        ul,li {list-style: none;}        body {font-family: "Microsoft yahei";}        #box {width: 450px; height: 550px; margin: 50px auto; box-shadow: 0 0 10px 1px rgba(0,0,0,.4);}        .content {width: 100%; height: 480px;}        .content a {display: block; width: 440px; height: 49px; line-height: 49px; padding: 5px; border-bottom: 1px solid #ddd; color: #222; font-size: 14px;}        .content a:hover {background: #fafafa;}        .content a img {display: block; float: left; width: 49px; height: 49px;}        .content a span.title {float: left; overflow: hidden; width: 340px; height: 49px; margin-left: 10px; text-overflow: ellipsis; white-space: nowrap;}        .content a span.arrow {float: right; margin-right: 10px;}        .page {width: 100%; height: 70px; }        .page ul li {float: left; width: 45px; height: 45px; line-height: 45px; margin: 12.5px 15px; text-align: center; box-shadow: 0 0 10px 1px rgba(0,0,0,.4); cursor: pointer;}        .page ul li:hover {background: #ddd;}    </style></head><body>    <div id="box">        <div class="content">        </div>        <div class="page">            <ul>                <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 type="text/javascript">        // https://route.showapi.com/181-1?num=8&page=1&rand=1&showapi_appid=39602&showapi_test_draft=false&showapi_timestamp=20170604192846&src=人民日报&word=热点&showapi_sign=fedc406642bb42ad98344aed31c1015e        //https://route.showapi.com/181-1?showapi_appid=39602&showapi_sign=fedc406642bb42ad98344aed31c1015e&num=8        /*            请求id:            请求密钥:            num:         *//*        // 这只是模块化        var Dom = document.querySelector('#box .content'),            List = document.querySelectorAll('#box .page li');            // 缓存代理            //如果数据上千上万,  每次都跳转都ajax请求..         // 创建缓存         var cache = {};        // 数据是每隔一段时间更新的 所以要刷新缓存        setInterval(function(){            cache = {}        },10000);        // 改变页面 点击事件        changePage();        function changePage(){            for (let i = 0; i < List.length; i++) {                List[i].onclick = function(){                    var page = i+1;                    // 判断有没缓存                    if(page in cache){                        addDom(cache[page])                        console.log('已加载');                    }else{                        goTo(page);                        console.time('正在加载');                    }                }            }         }         // 跳转        goTo(1);        function goTo(page){            myAjax({                url:'https://route.showapi.com/181-1',                method:'GET',                data:{                    showapi_appid:'39602',                    showapi_sign:'fedc406642bb42ad98344aed31c1015e',                    num:8,                    page:page                },                success(res){                    var result = JSON.parse(res);                    var data = result.showapi_res_body.newslist;                    // console.log(data);                    addDom(data);                    // 储存起来                    cache[page] = data;                    console.log(cache);                    console.timeEnd('加载完成');                }            })        }        // 添加节点        function addDom(data){            var str = '';            for (var i = 0; i < data.length; i++) {                str +=`                    <a href="${data[i]['url']}">                        <img src="${data[i]['picUrl']}">                        <span class="title"> ${data[i]['title']} </span>                        <span class="arrow">></span>                    </a>                `            }            Dom.innerHTML = str;        }*/        // 面向对象        var cache = {}        function Page(dom,list,time){            if( this instanceof Page){                this.Dom = document.querySelector(dom);                this.List = document.querySelectorAll(list);                this.time = time;            }else{                return new Page(dom,list,time);            }        }        Page.prototype = {            constructor: Page,            init(){                this.goTo(1);                this.changePage();                setInterval(function(){                    cache = {};                    console.log('刷新');                },this.time);            },            goTo(page){                var This = this;                myAjax({                    url:'https://route.showapi.com/181-1',                    method:'GET',                    data:{                        showapi_appid:'39602',                        showapi_sign:'fedc406642bb42ad98344aed31c1015e',                        num:8,                        page:page                    },                    success(res){                        var result = JSON.parse(res);                        var data = result.showapi_res_body.newslist;                        // console.log(data);                        This.addDom(data);                        // 储存起来                        cache[page] = data;                        console.log(cache);                        console.timeEnd('加载完成');                    }                })            },            addDom(data){                var str = '';                for (var i = 0; i < data.length; i++) {                    str +=`                        <a href="${data[i]['url']}">                            <img src="${data[i]['picUrl']}">                            <span class="title"> ${data[i]['title']} </span>                            <span class="arrow">></span>                        </a>                    `                }                this.Dom.innerHTML = str;            },            changePage(){                for (let i = 0; i < this.List.length; i++) {                    this.List[i].onclick = function(){                        var page = i+1;                        // 判断有没缓存                        if(page in cache){                            this.addDom(cache[page])                            console.log('已加载');                        }else{                            this.goTo(page);                            console.time('正在加载');                        }                    }.bind(this);                }             }        }        var page = new Page('#box .content','#box .page li',10000);        page.init();    </script></body></html>
这里写图片描述
阅读全文
0 0