题目1： ajax 是什么？有什么作用？
ajax(Asynchronous JavaScript and XML 异步的JavaScript与XML技术),他利用HTML.CSS.Javascript.XML以及最最最重要的XMLHttpResponse接口向后端发送http请求实现不刷新页面的情况下更新部分页面内容.
步骤:
1.构建ajax, xhr = new XMLHttpResponse
2.设置发送方式.接口名字,参数. xhr.open('get','/loadMore?index='+pageIndex+'length=5',true)
3.设置header,文件格式等参数
4.发送HTTP请求,xhr.send()
5.接受数据,对数据进行操作
6.更新页面相关内容
作用:不刷新页面的情况下,更新部分页面内容,不耽误用户其他操作,提升用户体验.
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
注意事项:大的方面我需要什么,我给你什么.具体来讲:
1.约定后端发回的数据格式.数组.JSON.文本.二进制文件
2.约定请求方式:post或者get
3.约定接口名字/路径
4.约定发送的参数
mock数据
要完整运行前端代码，通常并不需要完整的后端环境，我们只要在mock server中实现以下几点就行了：
- 能渲染模板
- 实现请求路由映射
-
数据接口代理到生产或者
image.png
测试环境
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
增加一个状态锁.具体在题目4实现
参考
题目4：实现加载更多的功能，效果范例338，后端在本地使用server-mock来模拟数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-6">
<title>load-more</title>
<style>
a{
text-decoration: none;
}
.ct {
margin: 0;
padding: 0;
vertical-align: middle;
text-align: center;
}
.ct li{
list-style: none;
border: 1px solid red;
padding: 10px;
margin: 10px 20px;
color: blue;
cursor: pointer;
border-radius: 4px;
}
.ct li:hover {
background-color: green;
color: azure;
}
.btn-ct {
text-align: center;
}
.btn {
display: inline-block;
margin: 20px auto;
padding: 10px;
background: yellowgreen;
font-size: 18px;
color: red;
border-radius: 5px;
}
.btn:hover {
background-color: deepskyblue;
color: firebrick;
}
</style>
</head>
<body>
<ul class="ct">
<li>新闻0</li>
</ul>
<div class="btn-ct"><a href="##" class="btn">加载更多</a></div>
</body>
<script>
var ct = document.querySelector('.ct')
var btn = document.querySelector('.btn')
var pageIndex = 1
var dataArrive = true//状态锁,防止重复点击
function loadMore(){
if(dataArrive === false){//用来判断是否为重复无效点击
return
}
dataArrive = false
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if (xhr.readyState === 4){
if (xhr.status === 200 || xhr.status === 304){
console.log(xhr.responseText)
var results = JSON.parse(xhr.responseText)
console.log(results.length)
var fragment = document.createDocumentFragment()
for(var i = 0;i < results.length; i++){
console.log(i)
var node = document.createElement('li')
node.innerText = results[i]
fragment.appendChild(node)
pageIndex += 1;
}
ct.appendChild(fragment)
}else{
console.log('error')
}
dataArrive = true
}
}
xhr.open('get','/loadMore?index='+pageIndex+'&length=5',true)
xhr.send()
}
btn.addEventListener('click',loadMore)
</script>
</html>
// 服务端 router.js
app.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);
},3000)
});
网友评论