1.ajax 是什么？有什么作用？
- ajax是一种技术方案，它通过浏览器提供的XMLHttpRequest对象，使得浏览器可以发送http请求和接收http响应
- 可以在不刷新页面的情况下，和后端交互数据。
2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
- 约定数据。数据在传输中的格式，数据的类型。
- 约定接口。约定请求的格式，响应的格式。
- 按照约定编写接口文档。
1.在node.js环境下使用npm下载server-mock（淘宝npm镜像地址可以大大加快下载速度）
2.按照接口文档编写假数据进行测试。
3.点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
伪代码如下：
var btnStatus = true;
var btn = document.querySelector('#btn');
btn.addEventListener('click',function () {
if(btnStatus === false){
return; // 判断btnStatus状态， 为真才执行，为假不执行
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
btnStatus = true; //xhr状态发生改变时，btnStatus状态为真，此时点击有效。
.........
}
xhr.open('get',url,true);
xhr.send();
btnStatus = false; //发送请求之后，锁死btn点击状态，只有xhr状态发生改变点击才有效果。
});
4.实现加载更多的功能，效果范例307，后端在本地使用server-mock来模拟数据
前端代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
body{
margin: 0;
padding: 0;
}
ul{
padding: 0;
width: 98%;
margin: 0 auto;
}
ul li{
margin-top: 10px;
list-style: none;
padding: 10px 20px;
border: 1px solid #ccc;
cursor: pointer;
}
ul li:hover{
background: green;
}
button{
display: block;
outline: none;
padding: 10px 7px;
border: 1px solid #E27272;
border-radius: 3px;
color: #E27272;
font-size: 18px;
margin: 50px auto;
background: #ffffff;
}
</style>
<body>
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>
<button>加载更多</button>
<script>
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
var btnStatus = true;
var liIndex = 3;
btn.addEventListener('click',function () {
if(btnStatus === false){
return;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
btnStatus = true;
if(xhr.readyState === 4){
if(xhr.status === 200 || xhr.status === 304){
var results = JSON.parse(xhr.responseText);
console.log(results);
var frag = document.createDocumentFragment();
for(var i=0;i<results.length;i++){
var li = document.createElement('li');
li.innerText = results[i];
frag.appendChild(li);
}
ul.appendChild(frag);
liIndex += 5;
}else{
console.log('出错了');
}
}
}
xhr.open('get','/loadMore?index='+liIndex+'&length=5',true);
xhr.send();
btnStatus = false;
})
</script>
</body>
</html>
后端代码：
router.get('/loadMore',function (req,res) {
var index = req.query.index;
var length = req.query.length;
var data = [];
for(var i=0;i<length;i++){
data.push('内容' + (parseInt(index) + i));
}
setTimeout(function(){
res.send(data);
},1500)
});
网友评论