1.Ajax是什么？有什么作用？
Ajax是一种技术方案，ajax全称是Asynchrous JavaScript XML的缩写。
作用：与服务器交换数据并更新部分网页，在不重新加载整个页面的情况下，用户的体验较好。
2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
需要和后端约定好
接口叫什么？接口名称，统一命名，定制规范，甚至拟定命名表。
接口传什么？数据类型确定，数据大小等限制的确定。
接口的相关参数： 服务器？端口？方法？请求数据的一些限制？
按照上述确认后的版本严格执行
后端接口如何 mock数据，
1.自己模拟数据来进行MOCK；
2.使用server-mock或mock.js搭建模拟服务器，进行模拟测试；
3.使用XAMPP等工具，编写PHP文件来进行测试。
3.点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
当正在发送AJAX，还没有接受到数据之前，按钮没有功能，也就是不发送AJAX。
我们可以做一个变量，来监视Ajax的状态。。
具体步骤如下，
- 声明一个变量，至少是Ajax请求的父作用域里面。(例如 isloading=false)
- if (isloading===ture) 什么都不做，返回一个空就可以了。
- if(isloading===false) 发送AJAX，
var isloading=false
if(isloading){
returen;
}else{
isloding=ture
发送Ajax请求。
接受到Ajax请求之后{ isloading=false ; dosomething}
}
4.实现加载更多的功能.
- html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>加载更多</title>
<style type="text/css">
* {
margin:0;
pading:0;
text-align:center;
}
ul {
margin:0px;
padding:0px;
}
#ct li{
border:solid 1px #ccc;
border-radius:5px;
margin:10px;
list-style:none;
padding:20px;
}
button {
color:red;
border:1px solid red;
display:inline-block;
padding:20px;
background:#fff;
}
</style>
</head>
<body>
<ul id="ct">
</ul>
<button type="button">加载更多</button>
<script>
var ct=document.querySelector('#ct');
var btn=document.querySelector('button');
var times=0;
var isloading = false
btn.addEventListener('click',function() {
if (isloading) {
return;
} else{
isloading = true
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
var result = JSON.parse(xhr.responseText)
isloading = false
var d = document.createDocumentFragment()
for (var i = 0; i < result.length; i++) {
var node = document.createElement('li')
node.innerText = result[i]
d.appendChild(node)
}
ct.appendChild(d)
times += 5
}
}
xhr.open('get','/addnews?index='+times+'&length=5',true)
xhr.send()
}
})
</script>
</body>
</html>
sever mock
router.get('/addnews',function(req,res){
var index = req.query.index;
var length = req.query.length;
var b=[]
for(var i=0;i<length;i++){
b[i]='新闻'+(parseInt(index)+i);
}
setTimeout((function(){
res.send(b)
}),5000)
})// 做了一个延时
网友评论