需改进代码：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
text-align: center;
}
ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
margin: 10px 0;
padding: 10px 5px;
border: 1px solid;
}
#btn{
padding: 6px 10px;
margin-top: 20px;
}
#btn:hover{
background: darkcyan;
}
</style>
</head>
<body>
<div>
<ul class="lists">
</ul>
<button id="btn" href="javascript:void(0);">加载更多</button>
</div>
<script>
var Olists=document.querySelector(".lists");
var Obtn=document.querySelector("#btn");
var pageindex=0;
Obtn.addEventListener("click",function(){
var xhr=new XMLHttpRequest();
xhr.open('get','/loadMore?count='+pageindex+'&length=5',true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200||xhr.status===304){
var result=JSON.parse(xhr.responseText);
console.log(result);
var fragment=render(result);
Olists.appendChild(fragment);
}else{
console.log("出错了");
}
pageindex=pageindex+5;
}
}
})
function render(arry){
var fragment=document.createDocumentFragment();
for (var i=0;i<arry.length;i++) {
var nod=document.createElement("li");
nod.innerText=arry[i];
fragment.appendChild(nod);
}
return fragment;
}
</script>
</body>
</html>
router.js
app.get("/loadMore",function(req,res){
var count=req.query.count;
var len=req.query.length;
var dates=[];
for (var i=0;i<len;i++) {
dates.push("新闻"+(parseInt(count)+i));
}
setTimeout(function(){
res.send(dates)
},5000)
})
这里需要注意：用户点击多次出现重复加载上面5条数据的现象
测试：
图片.png
改进代码：添加一个参数 dateSend=false,单击了按钮，参数 dateSemd=true,用来记录本次单击开始发送数据,成功发送返回数据 ，dateSend=false,表示发送响应结束
图片.png
优化代码：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
text-align: center;
}
ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
margin: 10px 0;
padding: 10px 5px;
border: 1px solid;
}
#btn{
padding: 6px 10px;
margin-top: 20px;
}
#btn:hover{
background: darkcyan;
}
</style>
</head>
<body>
<div>
<ul class="lists">
</ul>
<button id="btn" href="javascript:void(0);">加载更多</button>
</div>
<script>
var Olists=document.querySelector(".lists");
var Obtn=document.querySelector("#btn");
var pageindex=0;
var dateSend=false;
Obtn.addEventListener("click",function(){
var xhr=new XMLHttpRequest();
if(dateSend){
return;
}
xhr.open('get','/loadMore?count='+pageindex+'&length=5',true);
xhr.send();
dateSend=true;
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200||xhr.status===304){
var result=JSON.parse(xhr.responseText);
console.log(result);
var fragment=render(result);
Olists.appendChild(fragment);
}else{
console.log("出错了");
dateSend=false;
}
dateSend=false;
pageindex=pageindex+5;
}
}
})
function render(arry){
var fragment=document.createDocumentFragment();
for (var i=0;i<arry.length;i++) {
var nod=document.createElement("li");
nod.innerText=arry[i];
fragment.appendChild(nod);
}
return fragment;
}
</script>
</body>
</html>
router.js
app.get("/loadMore",function(req,res){
var count=req.query.count;
var len=req.query.length;
var dates=[];
for (var i=0;i<len;i++) {
dates.push("新闻"+(parseInt(count)+i));
}
res.send(dates)
})
进一步优化的代码（提高了按钮的交互效果）：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
text-align: center;
}
ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
margin: 10px 0;
padding: 10px 5px;
border: 1px solid;
}
#btn{
padding: 6px 10px;
margin-top: 20px;
}
#btn:hover{
background: darkcyan;
}
</style>
</head>
<body>
<div>
<ul class="lists">
</ul>
<button id="btn" href="javascript:void(0);">加载更多</button>
</div>
<script>
var Olists=document.querySelector(".lists");
var Obtn=document.querySelector("#btn");
var pageindex=0;
var dateSend=false;
Obtn.addEventListener("click",function(){
var xhr=new XMLHttpRequest();
if(dateSend){
return;
}
xhr.open('get','/loadMore?count='+pageindex+'&length=5',true);
xhr.send();
refuse();
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200||xhr.status===304){
var result=JSON.parse(xhr.responseText);
console.log(result);
var fragment=render(result);
Olists.appendChild(fragment);
}else{
console.log("出错了");
dateSend=false;
}
loaded()
pageindex=pageindex+5;
}
}
})
function render(arry){
var fragment=document.createDocumentFragment();
for (var i=0;i<arry.length;i++) {
var nod=document.createElement("li");
nod.innerText=arry[i];
fragment.appendChild(nod);
}
return fragment;
}
//数据加载的时候按钮的状态
function refuse(){
dateSend=true;
Obtn.innerText="正在加载...";
Obtn.style.background="#ccc";
Obtn.disabled=true;
}
//数据加载成功
function loaded(){
dateSend=false;
Obtn.innerText="加载更多";
Obtn.disabled=false;
Obtn.addEventListener("mouseenter",function(){
Obtn.style.background="darkcyan";
})
Obtn.addEventListener("mouseleave",function(){
Obtn.style.background="#ccc";
})
}
</script>
</body>
</html>
router.js
app.get("/loadMore",function(req,res){
var count=req.query.count;
var len=req.query.length;
var dates=[];
for (var i=0;i<len;i++) {
dates.push("新闻"+(parseInt(count)+i));
}
setTimeout(function(){
res.send(dates)
},2000)
})
