ajax 是什么？有什么作用？
AJAX即“Asynchronous JavaScript and XML”，异步传输+js+xml，
使用Ajax技术不必刷新整个页面，只需对页面的局部进行刷新，可以节省网络带宽，提高页面的加载速度，从而缩短用户等待时间，改善用户体验。
前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
注意事项：
1.确定接口信息
2.确定前端要以什么方式提交数据到服务器，约定数据格式，数据类型
3.确定要请求的参数
如何mock数据
1.手动模拟，把数据写死
在调用接口的时候，不请求接口，直接返回想要的数据，但是在后端联调的时候需要把数据删除。
2.可以使用的 Mock Server
当后端 接口文档没有编写完成时，前端无法进行调试，这就导致了前端会被后端阻塞的情况。而 Mock Server 是相当于构建假数据，然后把这些假数据存到 JSON 文件上，Mock Server 可以响应请求或者生成页面
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var reqLock=false;//默认是解锁状态
function ajax(){
if(reqLock===true){
return;
}else {
reqLock=true;//上锁
//ajax请求
function isOK(){
//...
reqLock===false;
}
function error(){
//...
reqLock===false;
}
}
}
实现加载更多的功能，后端在本地使用server-mock来模拟数据
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul li {list-style: none}
a{
text-decoration: none;
color: #ff00ff;
}
.outer{
text-align: center;
width: 600px;
margin: 0 auto;
}
.wrap>li{
border: 1px solid #ddd;
text-align: center;
line-height: 2;
margin-bottom: 10px;
}
.wrap>li:hover{
background: #ddd;
}
#btn{
display: inline-block;
padding: 8px 20px ;
color: #fff;
background: #0000ff;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="outer">
<ul class="wrap">
</ul>
<a href="javascript:;" id="btn">加载更多</a>
</div>
</body>
<script>
var wrap=document.querySelector(".wrap");
var btn=document.querySelector("#btn");
var pageIndex=0;
var lock=0;//默认解锁
btn.addEventListener('click',function(e){
e.preventDefault();//阻止默认事件
var xhr=new XMLHttpRequest();
console.log(1);
xhr.onreadystatechange=function(){
if(!lock){
return;
}
if(xhr.readyState==4){
if(xhr.status==200||xhr==304){
var res=JSON.parse(xhr.responseText);
var fragment=document.createDocumentFragment();
for(var i=0;i<res.length;i++){
var lis=document.createElement("li");
lis.innerText=res[i];
fragment.appendChild(lis);
}
wrap.appendChild(fragment);
pageIndex=pageIndex+5;
}else{
console.log("出错了");
}
lock=1;
}
};
xhr.open('get','/loadMore?index='+pageIndex+'&length=5',true);
xhr.send();
lock=1;
});
</script>
</html>
router.js
app.get('/loadMore',function(req,res){
var index=req.query.index;
var len=req.query.length;
var data=[];
for(var i=0;i<len;i++){
data.push('新闻'+(parseInt(index)+i));
}
res.send(data);
});
网友评论