利用Ajax實現分頁快取
阿新 • • 發佈：2019-01-16
用原生JavaScript寫資料分頁快取，看教學視訊寫的，下面是詳細程式碼。
<!doctype html>
<html><head>
<title>index</title>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="css/demo.css"> -->
<style>
body{
margin:0;
padding:0;
}
.wrap{
margin:30px auto;
border:1px solid;
width:500px;
}
.flex_row{
padding:0;
display:flex;
flex-direction:row;
list-style:none;
justify-content:space-around;
align-items:center;
}
.flex_row li{
border:1px solid;
width:40px;
height:40px;
text-align:center;
font-weight:bold;
line-height:40px;
cursor:pointer;
}
.itemsflex_row{
position:relative;
color:#000;
text-decoration:none;
margin:0;
padding:10px 0;
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-around;
border-bottom:1px solid gray;
}
.ft{
/* position:absolute;
right:16px;
top:16px; */
}
.img{
width:50px;
height:45px;
}
.img img{
width:45px;
height:45px;
}
.bd{
width:380px;
height:19px;
}
.bd p{
margin:0;
padding:0;
width:78%;
height:18px;
overflow:hidden;
text-overflow:ellipsis;
}
</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>
/*
const 常量
addEventListener('click', pageList, false); 事件監聽
toLowerCase 轉小寫
if(a in b){ }
for in ; array.push()
將陣列轉成字串 array.join
字串轉json物件 JSON.parse
str
`
<a href="${data[i].url}" class="itemsflex_row load">
<div class="img">
<img src="${data[i].picUrl}" alt=""/>
</div>
</a>
`
div.innerHTML=str 將字串寫入div
console.time('正在拉取資料'); console.timeEnd('正在拉取資料');
*/
const url='https://route.showapi.com/181-1?';
//獲取div
var oCon=document.querySelector('.content');
var oUl=document.querySelector('.flex_row');
var page=1;//初始化頁碼
var cache={};//快取池
//新增點選事件監聽
oUl=addEventListener('click', pageList, false);
//獲取每頁的資料
function pageList(e){
if(e.target.nodeName.toLowerCase()==='li'){
//點選獲取對應的原始碼 1,2,3...
page=e.target.innerHTML*1;
//判斷json中是否有該頁快取了
if(page in cache){
console.log('資料已經快取了，頁碼：'+page);
//直接渲染資料元件
showPage(cache[page]);
}else{
getJson();//獲取資料
}
}
}
//獲取資料
getJson();
function getJson(){
console.time('正在拉取資料');
//獲得陣列
var params=[];
//建立Ajax物件
var xhr=new XMLHttpRequest();
var sendData={
'showapi_appid':'30603',//賬號
'showapi_sign':'98960666afeb4992ae91971d13494090',//密碼
'page':page,//第幾頁資料
'num':8//幾條資料
}
//json轉陣列
for(key in sendData){
params.push(key+'='+sendData[key]);
}
//將陣列轉成字串
var postData=params.join('&');
xhr.open('GET',url+postData,true);
xhr.send(null)
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//獲得json資料
var dataList=JSON.parse(xhr.response).showapi_res_body.newslist;
cache[page]=dataList;//快取資料
showPage(dataList);//呼叫渲染資料
}
}
}
//資料渲染元件
function showPage(data){
var len=data.length;//長度預存
var str='';//初始化模板
for(var i=0;i<len;i++){
str+=
`
<a href="${data[i].url}" class="itemsflex_row load">
<div class="img">
<img src="${data[i].picUrl}" alt=""/>
</div>
<div class="bd">
<p class="label">${data[i].title}</p>
</div>
<div class="ft">></div>
</a>
`
}
oCon.innerHTML=str;//更改oCon的內容為str
console.timeEnd('正在拉取資料');
//停止一個通過 console.time() 啟動的計時器
//需要停止的計時器名字。一旦停止，計時器所經過的時間會被自動輸出到控制檯。
}
</script>
</body>
</html>