ajax 是什么？有什么作用？
Ajax（Asynchronus JavaScript And XML）是一种利用XMLHttpRequest对象，实现当对服务器请求额外的数据而无需卸载页面的技术，可以带来更好的用户体验。能够以异步的方式从服务器端取得更多信息。
前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
约定数据格式
约定接口（类型、名字、参数）
通过server mock实现，如下
app.get('/getFriends', function (req, res) {
var username = req.query.username
var ret = ["nobody"]
if (username == "bb") {
ret = ["小明","小刚"]
}
res.send(ret)
});
app.psot('/getFriends', function (req, res) {
var username = req.body.username
var ret = ["nobody"]
if (username == "bb") {
ret = ["小明","小刚"]
}
res.send(ret)
});
//在当前网页文件夹下创建router.js,并如上通过get或post方法从URL中获取请求，再通过send方法返回响应
git 指令
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
设置状态锁
var btn = document.querySelector('.loadingMore a')
var ctn = document.querySelector('#ct')
var target = 0
var dataArrive = true //设置状态锁
btn.addEventListener('click',function(){
if(!dataArrive){
return;
} //当判断是否有状态锁
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200||xhr.status === 304){
var newLi = JSON.parse(xhr.responseText)
console.log(newLi)
var fragment = document.createDocumentFragment()
for(var i=0; i < newLi.length; i++){
var node = document.createElement('li')
node.innerText = newLi[i]
fragment.appendChild(node)
}
ctn.appendChild(fragment)
dataArrive = ture //得到响应，解锁
}else{
console.log("it's wrong")
}
}
}
xhr.open('get','/loadingMore?index='+target+'&length=5',true)
xhr.send()
target += 5
dataArrive = false //已发送请求，加状态锁
})
实现加载更多的功能，后端在本地使用server-mock来模拟数据
- 源代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.loadingMore {
text-align: center;
}
a {
text-decoration: none;
border: 1px solid orangered;
border-radius: 5px;
padding: 10px 20px;
}
a:hover {
background-color: orangered;
color: white;
cursor: pointer;
}
li {
list-style: none;
}
#ct li {
border: 2px solid brown;
border-radius: 4px;
padding: 15px 20px;
margin: 10px 0px;
}
li:hover{
background-color: brown;
color: white;
}
</style>
</head>
<body>
<ul id="ct">
</ul>
<div class="loadingMore">
<a>加载更多</a>
</div>
<script>
var btn = document.querySelector('.loadingMore a')
var ctn = document.querySelector('#ct')
var target = 0
var dataArrive = true
btn.addEventListener('click',function(){
if(!dataArrive){
return;
}
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200||xhr.status === 304){
var newLi = JSON.parse(xhr.responseText)
console.log(newLi)
var fragment = document.createDocumentFragment()
for(var i=0; i < newLi.length; i++){
var node = document.createElement('li')
node.innerText = newLi[i]
fragment.appendChild(node)
}
ctn.appendChild(fragment)
dataArrive = ture //得到响应，解锁
}else{
console.log("it's wrong")
}
}
}
xhr.open('get','/loadingMore?index='+target+'&length=5',true)
xhr.send()
target += 5
dataArrive = false //已发送请求，加状态锁
})
</script>
</body>
</html>
- 后端server mock 模拟数据
app.get('/loadingMore',function(req,res){
var tgIndex = req.query.index
var tgLength = req.query.length
var data = []
for(var i = 0; i < tgLength; i++){
data.push('新闻'+(parseInt(tgIndex)+ i+1))
}
res.send(data)
})
效果图
网友评论