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>
