1： ajax 是什么？有什么作用？
ajax是异步的js和XML(Async JavaScript And XML)，是一种技术泛称
可以异步传递数据和获取数据，这就使ajax可以在不加载整个页面的情况下对页面局部更新，使用户体验更佳。
2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
- get还是post方法
- 约定数据接口和格式，前端提供参数，后台响应时返回什么格式
- 约定每次请求数据数量
如何mock数据？
使用server mock搭建本地服务器，模拟网站后端，使用server-mock首先得下载nodejs，然后下载server-mock（npm install -g server-mock），下载完成后，在目标文件文件夹创建一个router.js文件夹，用来接收和处理后端的请求文件（mock init可创建范例）；最后mock start启动一个web服务器
3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var isDataArrive = true //设置一个状态锁初始为true
btn.addEventListener('click', function(e){
e.preventDefault()
if (!isDataArrive) {
return //数据没到来时为true
}
if(xhr.readyState === 4){
if (xhr.status === 200 || xhr.status === 304) {
// dosomething
}
isDataArrive = true //数据到来后变为true
}
}
xhr.open('get', '/loadmore?index='+ pageIndex +'&length=5', true)
xhr.send()
isDataArrive = false //发送数据之后数据到来前点击没用
})
4：实现加载更多的功能，后端在本地使用server-mock来模拟数据
<style type="text/css">
.ct li {
list-style: none;
border:1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
.btn {
display: block;
width: 80px;
height: 40px;
line-height: 40px;
border:1px solid;
border-radius: 4px;
text-align: center;
text-decoration: none;
margin:0 auto;
}
.btn:hover {
background: red;
color: #fff;
}
</style>
<body>
<ul class="ct">
</ul>
<a href="#" id="load-more" class="btn">加载更多</a>
<script>
var btn = document.querySelector('.btn')
var ct = document.querySelector('.ct')
var pageIndex = 0
var isDataArrive = true
btn.addEventListener('click', function(e){
e.preventDefault()
if (!isDataArrive) {
return
}
var xhr = new XMLHttpRequest()
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 = document.createDocumentFragment()
for(var i = 0;i < result.length;i++){
var node = document.createElement('li')
node.innerText = result[i]
fragment.appendChild(node)
}
ct.appendChild(fragment)
pageIndex = pageIndex +5
}else {
alert('出错了')
}
isDataArrive = true
}
}
xhr.open('get', '/loadmore?index='+ pageIndex +'&length=5', true)
xhr.send()
isDataArrive = false
})
</script>
//后端
router.get('/loadmore',function(req,res){
var curIdx = req.query.index
var len = req.query.length
var data = []
for (var i = 0; i < len; i++) {
data.push('新闻' + (parseInt(curIdx) + i ))
}
setTimeout(function(){
res.send(data)
},5000)
})
//模拟慢网速
网友评论