AJAX的相关
2017-09-30 本文已影响0人
727上上上
题目1： ajax 是什么？有什么作用？
全称是Asynchronous JavaScript and Xml，
ajax是一种技术的泛称，能与服务器交换数据并更新部分网页
优点：
页面不用整个重新加载，用户体验好
按需取数据，可以最大程度的减少对服务器造成的负担
缺点：
无法跨服发送请求
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
充分的了解项目的需求
约定好设计接口
约定好数据格式
前端需要传递怎么样的参数和传递的方式
后端需要返回怎么样的参数
后端接口完成前，前端根据约定的好数据格式和参数mock数据
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
设计一个状态锁，数据发送成功后锁上，数据接收到后打开，用户点击前判断状态锁是true还是false
题目4：实现加载更多的功能,后端在本地使用server-mock来模拟数据
<!doctype html>
<head>
<meta charset="utf-8">
<title>加载更多</title>
<style>
ul,li {
list-style: none;
padding-left: 0;
}
li {
border: 1px solid;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<ul></ul>
<button class="btn" id="load-more">加载更多</button>
<script>
var btn = document.querySelector('#load-more')
var ul=document.querySelector('ul')
var pageIndex=0 //这个变量用于记录下标
var isDataOk=true //用于锁住数据未传输完毕时用户的操作
btn.addEventListener('click',function(){
if(!isDataOk){
return
}
var xhr = new XMLHttpRequest() //使用AJAX
xhr.onreadystatechange = function(){ //状态检测
if(xhr.readyState === 4){
if(xhr.status===200 || xhr.status ==304){ //状态都没问题则继续执行
var results = JSON.parse(xhr.responseText)//返回数据转成JSON
console.log(results) //到这里时检测传回的数据是否有问题
var fragment = document.createDocumentFragment() //创建节点
for(var i=0;i<results.length;i++){
var node = document.createElement('li')//创建元素li
node.innerText=results[i] //遍历后赋值，innerText安全性上来讲比innerHTML高
fragment.appendChild(node)
}
ul.appendChild(fragment)
pageIndex+=5
} //每次数据返回后都会增加
}else{
console.log('报错') //用于状态检测没过时返回报错信息
}
isDataOk=true //传回数据成功后打开
}
xhr.open('get','/loadMore?index='+pageIndex+'&length=5',true)//设置传递方式，接口名字，是否异步
xhr.send()//发送请求
isDataOk= false //发送请求后锁住
})
</script>
</body>
app.get('/loadMore',function(req,res){
var curIdx= req.query.index //获取请求的参数
var len= req.query.length //获取请求的参数
var data=[] //创建一个Array
//然后遍历请求的参数
for(var i=0; i<len;i++){
data.push('新闻' + (parseInt(curIdx) + i))
}
res.send(data); //发送参数回去
})
