AJAX
2017-08-13 本文已影响0人
Wensx
题目1： ajax 是什么？有什么作用？
ajax是Asynchronous JavaScript and XML的缩写，指的是一套综合了多项技术的浏览器端网页开发技术，使用JavaScript执行异步网络请求。
作用：无需重新加载整个网页的情况下，更新部分网页。
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
要明确：请求的方式，名称，参数格式及返回数据的内容格式。
后端接口完成前可以使用nodejs中的server-monk在本地模拟后端mock数据
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
有两种思路
1.让网页忽略数据返回前的重复点击。
2.服务器对用户的重复请求进行判断，如果请求相同，则只返回一组数据。
<script>
让网页忽略数据返回前的重复点击
var btn=document.querySelector("#load-more")
var sendEnd = false //网络请求未发送
btn.addEventListener("click",function(){
if(sendEnd){ //若网络请求已发送则返回
return
}
var xhr=new XMLHttpRequest()
xhr.onreadystatechange=function(){
if(xhr.readyState === 4 && (xhr.status === 200||xhr.status === 304)){
console.log("test")
sendEnd = false//返回数据处理完毕，重置状态
}
}
xhr.open("get","/test",true)
xhr.send()
sendEnd = true //请求已发送
})
</script>
题目4：实现加载更多的功能，效果范例374，后端在本地使用server-mock来模拟数据
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加载更多</title>
<style>
.ct{
list-style: none;
padding: 0;
}
.ct li{
margin-bottom: 10px;
border: 1px solid;
cursor: pointer;
height: 38px;
padding-top: 10px;
}
.ct li:hover{
background: green;
color:white;
}
.button {
display: block;
width: 100px;
height: 40px;
line-height: 40px;
margin: 0 auto;
border: 1px solid red;
text-align: center;
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<ul class="ct">
<li>内容1</li>
<li>内容2</li>
</ul>
<a href="#" class="button">加载更多</a>
<script>
var button = document.querySelector('.button')
var content = document.querySelector('.ct')
var xhr = new XMLHttpRequest()
var index = 2
var sendEnd = false
button.addEventListener('click', function (e) {
e.preventDefault()
if (sendEnd){
return
}
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && (xhr.status == 200||xhr.status == 304)){
//获取数据
var data = JSON.parse(xhr.responseText)
var fragment = document.createDocumentFragment()
for (var i in data){
//创建元素
var li = document.createElement('li')
//将内容放入元素
li.innerText = data[i]
fragment.appendChild(li)
}
content.appendChild(fragment)
sendEnd = false
}
}
xhr.open('get', '/loadMore?index=' + index + '&length=5', true)
xhr.send()
sendEnd = true
index += 5
})
</script>
</body>
</html>
router.js
router.get('/loadMore', function(req, res) {
var index = parseInt(req.query.index)
var length = req.query.length
var backdata = []
setTimeout(function () {
for (var i = 0; i < length; i++){
backdata.push('内容' + (index + i + 1))
}
res.send(backdata)
},2000)
