题目1： ajax 是什么？有什么作用？
Ajax的英文全称是Asynchronous JavaScript and XML，异步的javascript和xml,是一种与服务器交互数据的方法；
作用：可以在不需要重载页面的情况请求数据，带来了更好的用户体验
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
注意事项
- 约定数据：有哪些需要传输的数据，数据类型是什么；
- 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
- 根据这些约定整理成接口文档
如何mock数据, - 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
- 可以用xamp进行模拟
- 也可使用server-mock
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
1：设置一个变量，初始值为false,表示没有加载过数据，
tn.addEventListener('click',function(){
if(!boo){
if(num<5){
var url='page'+num+'.json'
setAjax(url)
boo=true;
num++;
}else{
alert('没有更多新闻啦！')
}
}else{
console.log('请勿多次点击')
}
})
然后在ajax函数里面设置当数据加载成功时将boo设为false;
2可直接设置btn的disabled属性，当第一次点击后将其设置为true，这样做用户体验更好。也可以将1,2结合
题目4：实现加载更多的功能，效果范例245，后端在本地使用server-mock来模拟数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<style type="text/css">
li{
border: 1px solid;
}
div{
border: 1px solid;
}
</style>
</head>
<body>
<div id="div1">
<li>新闻01</li>
<li>新闻02</li>
</div>
<button id='btn'>加载</button>
<script type="text/javascript">
//封装ajax
function setAjax(url){
var x;
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status=200||xhr.status==304){
var x=xhr.responseText;
x=JSON.parse(x);
var newAll=document.createDocumentFragment()
for(var i=0;i<x.length;i++){
var newLi=document.createElement('li')
newAll.appendChild(newLi)
newLi.innerText=x[i];
}
setTimeout(function(){
div1.appendChild(newAll)
boo=false;
},2000)
}else{
document.write('请求失败'+xhr.status)
}
}
}
xhr.open('GET',url,true);
xhr.send(null)
}
var div1=document.getElementById('div1');
var btn=document.getElementById('btn');
var boo=false;//是否正在加载？
var num=1;//控制加载的内容1-4
btn.addEventListener('click',function(){
if(!boo){
if(num<5){
var url='page'+num+'.json'
setAjax(url)
boo=true;
num++;
}else{
alert('没有更多新闻啦！')
}
}else{
console.log('请勿多次点击')
}
})
</script>
</body>
</html>
网友评论