-
ajax 是什么？有什么作用？
AJAX=异步 JavaScript 和 XML。是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 -
前后端开发联调需要注意哪些事情？
- 接口名称，统一命名，定制规范
- 数据类型一致
- 数据提交方式 get/post
-
后端接口完成前如何 mock 数据？
- 搭建node.js环境，使用server-mock模拟前后端数据传输
-
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
<script>
var btn=document.querySelector("#load-more")
var isDataArrive=true
btn.addEventListener("click",function(){
if(!isDataArrive){
return
}
var xhr=new XMLHttpRequest()
xhr.onreadystatechange=function(){
if(xhr.readyState === 4 && (xhr.status === 200||xhr.status === 304)){
console.log("test")
isDataArrive=true
}
}
xhr.open("get","/test",true)
xhr.send()
isDataArrive=false
})
</script>
增加isDataArrive作为锁，在数据到来之前，不会再次发送ajax请求
- 实现加载更多的功能
网页代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
#ct li {
list-style: none;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
cursor: pointer;
}
#load-more {
display: block;
margin: 10px auto;
cursor: pointer;
}
.btn {
height: 40px;
line-height: 40px;
width: 80px;
border: 1px solid #e27272;
border-radius: 3px;
text-align: center;
text-decoration: none;
color: #e27272;
}
.btn:hover {
background-color: greenyellow;
color: #fff;
}
</style>
</head>
<body>
<ul id="ct"></ul>
<a href="#" class="btn" id="load-more">加载更多</a>
<script>
var ct = document.querySelector("#ct")
var btn = document.querySelector("#load-more")
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)
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 += 5
}else {
console.log("出错了")
}
isDataArrive = true
}
}
xhr.open("get", "/loadMore?index=" + pageIndex + "&length=5", true)
xhr.send()
isDataArrive = false
})
</script>
</body>
</html>
后端代码：
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)}, 5000)
}
)
网友评论