题目1: ajax是什么? 有什么作用?
概念：ajax是一种技术的泛称，它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器在不刷新页面的情况下向服务器发出HTTP请求与接收HTTP响应。
作用：在不从新加载整个页面的情况下，与服务器交换数据并更新部分网页。
题目2: 前后端开发联调需要注意那些事情？后端接口完成前如何mock数据？
前后端联调需要注意：
1. 约定好接口的参数，格式，数据，接口地址，传递方式，回传数据的内容类型。
2. 讨论好接口方式后，由双方确定是否可行，在开发。
如何mock数据：
可以通过安装server-mock的方法来搭建web服务器，模拟网站后端。
1. 安装
- 下载nodejs（如果安装可以忽略）
- 打开终端（Windows用户打开GitBash）
- 执行 npm install -g server-mock
- 如果安装太慢也可以执行 npm install -g server-mock -- registry=https://registry.npm.taobao.org
2. 使用
1. 搭建web服务器
- 在终端cd到的文件夹所在的文件夹
- 执行 mock start 可以将当前文件路径作为根目录启动一个web服务器
- 在浏览器输入 http://localhost:8080/xxx.html
2. mock数据
- 在终端cd到你的文件夹所在的文件夹
- 在当前文件创建 router.js, 该文件是就收并处理后端请求文件（可以理解为网站后端）
- mock init 可以创建范例文件.
题目3: 点击按钮，使用Ajax获取数据，如何在数据到来之前防止重复点击？
点击按钮后添加一个disable属性就好，在数据完成时删掉这个disable属性。
<input id = "clickButton" type = "button" name = "button" value = "button">
var buttonNode = document.getElementById('clickButton');
var islocking = true;
buttonNode.addEventListener('click', function (e) {
if (!islocking) {
return;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if ( XMLHttpRequest.readyState === 4 ){
if (xhr.status === 200 || xhr.status ===304) {
console.log('成功');
} else {
console.log(xhr.status);
}
islocking = true;
}
};
xhr.open( 'get' , "/server?index=0$length=5" , true);
xhr.send();
islocking = false
});
题目4: 实现加载更多的功能，后端在本地使用server-mock来模拟数据。
前端部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>加载更多</title>
<style>
body,
ul,
li,
a {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
#load-more {
display: block;
margin: 30px auto 0 auto;
text-align: center;
cursor: pointer;
}
#ct li {
margin: 10px 20px;
padding: 10px;
background: #ccc;
border-radius: 4px;
cursor: pointer;
}
.btn {
height: 40px;
line-height: 40px;
width: 160px;
background: orange;
border-radius: 4px;
color: #333;
}
.btn:hover {
background: #c78;
color: #000;
}
</style>
</head>
<body>
<ul id="ct">
</ul>
<a href="#" class="btn" id="load-more">
加载更多
</a>
<script>
var btn = document.querySelector('#load-more');
var ct = document.querySelector('#ct');
var curIndex = 0;
var islocking = true;
btn.addEventListener('click', function(e){
e.preventDefault();
if (!islocking) {
return;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 304) {
var results = JSON.parse(xhr.responseText);
var fragment = document.createDocumentFragment();
for(var i = 0 ; i < results.length; i++) {
var node = document.createElement('li');
node.innerText = results[i];
fragment.appendChild(node);
}
ct.appendChild(fragment);
curIndex += 5;
} else {
alert('出错了');
}
islocking = true;
}
}
xhr.open('get', '/loadMore?index='+curIndex+'&length=5' ,true);
xhr.send();
isload = false;
});
</script>
</body>
</html>
服务器部分
app.get('/loadMore' , function(req, res){
var curIndex= req.query.index;
var len = req.query.length;
var data = [];
for(var i = 0; i < len; i++) {
data.push('新闻'+(parseInt(curIndex) + i));
}
res.send(data);
});
加载更多
网友评论