题目1： ajax 是什么？有什么作用？
AJAX即"Asynchronous Javascript and XML"，(异步的JavaScript和xml技术)，指的是一套综合多项网页开发技术。
ajax是一种技术的泛称，可以和后端交互，不用刷新页面。
优点：更新数据不需要刷新页面：它能在不刷新页面的情况下
（1）向服务器发出请求，更新数据不需要刷新页面
（2）处理服务器传来的数据
（3）减轻服务器的压力
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
后端开发联调需要注意的是
（1）数据类型如json格式
（2）接口：接口名称及请求方式是get还是post，请求的参数名称
（3）响应的格式，以及响应返回的数据状态
后端接口完成前如何 mock 数据
1.nodejs环境已经配置好
2.npm install -g server-mock
3.在自己的项目下创建一个router.js,代码格式如下：
//get方式请求如下，获取get请求的数据是。req.query.username;
//最后通过res.send()来发送数据到浏览器上
app.get('/user',function (req,res) {
var username=req.query.username;
var friends;
if(username=="xll"){
friends=["小米","bad huawei"];}
else{
friends=["none"];
}
//"find.ejs"是ejs模板引擎
res.render('find.ejs',{
friends:friends
});
}
);
//下面注意的是post请求方式，获取post请求的数据是：
req.body.username
app.post('/user',function (req,res) {
var username=req.body.username;
console.log(username);
var friends;
if(username=="xll"){
friends=["小米","bad huawei"];}
else{
friends=["none"];
}
res.render('find.ejs',{
friends:friends
});
}
);
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
重复点击出现的情况是在：当网络情况较差的情况下会出现数据返回要好长时间，用户会多次点击按钮，导致发送了多次请求，由于数据没有及时从服务器返回，所以发送的多次请求都是相同的，因此过了一段时间后，发现返回的数据都是相同的，因此我们需要在数据到来之前防止多次点击。
解决办法是：在网络受限的情况下用户可以多次点击按钮，但是只能发送一条请求，等请求返回后才能发送下面一条数据。
var block=true;//锁在true的情况下可以发送数据，如果为false则不行。
button.addEventListener('click',function(){
var xhr=new XMLHttpRequest();
if(block==false){
return ;
}
xhr.onreadystatechange=function()
{
if(xhr.readyState===4)
{ block=true;//当请求的数据返回后则block为true;
if (xhr.status === 200 || xhr.status === 304)
{
else
{
console.log("信息出错");
}
}
}
xhr.open("get",'/news?index1='+pageindex+'&lenght=5',true);
xhr.send();
block=false;//数据在发送后设置为false，则用户不可以再进行下一个请求。
// 必须要等到数据从服务器返回后，才能解锁
})
题目4：实现加载更多的功能，实现范例如下：后端在本地使用server-mock来模拟数据。
image.png
index.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
margin-bottom: 5px;
}
.content>div{
border:1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
font-size: 15px;
color: #241f1f;
}
.content>div:hover{
background-color: blanchedalmond;
cursor: pointer;
}
.button{
text-align: center;
}
.button a{
width: 80px;
display:inline-block;
padding:10px;
text-decoration: none;
background-color: crimson;
color: #fff;
font-size: 14px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
</div>
<div class="button">
<a href="javascript:void(0)">加载更多</a>
</div>
</div>
<script>
/*1.获取数据
2.创建节点和节点内容
3.渲染*/
var button=document.querySelector(".button");
var content=document.querySelector(".content");
var pageindex=0;
var block=true;//锁在true的情况下可以发送数据，如果为false则不行。
button.addEventListener('click',function(){
var xhr=new XMLHttpRequest();
if(block==false){
return ;
}
xhr.onreadystatechange=function()
{
if(xhr.readyState===4)
{ block=true;//当请求的数据返回后则block为true;
if (xhr.status === 200 || xhr.status === 304)
{ pageindex+=5;
var news=JSON.parse(xhr.responseText);
var frag=document.createDocumentFragment();
for(var i=0;i<news.length;i++)
{
var div=document.createElement("div");
div.innerText=news[i];
frag.appendChild(div);
}
content.appendChild(frag);
}
else
{
console.log("信息出错");
}
}
}
xhr.open("get",'/news?index1='+pageindex+'&lenght=5',true);
xhr.send();
block=false;//数据在发送后设置为false，则用户不可以再进行下一个请求。
// 必须要等到数据从服务器返回后，才能解锁
})
</script>
</body>
</html>
server-mock 代码如下：
app.get("/news",function (req,res) {
var f1=req.query.index1;
var length=req.query.lenght;
var data=[];
console.log(f1,length);
for(var i=1;i<=length;i++)
{ var newNum=i+parseInt(f1);
var news="新闻"+newNum;
console.log(news);
data.push(news);
}
//设置了三秒的延迟
setTimeout(function () {
res.send(data);
},30000);
});
效果图：
image.png
网友评论