ajax（实现加载更多）
2017-06-11 本文已影响0人
李永州的FE
题目1：ajax 是什么？有什么作用？
- ajax是异步的javascript和xml
- 1优点
- 实现网页的异步加载，
- 局部刷新网页（和其他几种请求方式都不能局部更新相比）
- 前后端负载平衡： 可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担
- 2 缺点：
- 浏览器历史记录的遗失： 在使用AJAX对页面进行改变后，由于并没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
-
接口叫什么？接口名称，统一命名，定制规范，甚至拟定命名表。
-
接口传什么？数据类型确定
-
接口的相关参数： 到底想告诉服务器什么？请求数据的一些限制？
-
前端人员可以自己使用服务器框架搭建一个模拟服务器环境，比如使用express&nodejs或者使用xampp，更简单的办法是使用server-mock. 在数据的模拟传输与请求查看上，postman也是一个好工具。
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
let AjaxLock = false;
if (!AjaxLock){
AjaxLock = true;
xhr.onreadystatechange = function(){
if( xhr.readyState == 4) {
//do sth
AjaxLock = false;
//当接受完毕请求数据后将锁打开
}
}
xhr.send();
} else {
return;
}
题目4：实现加载更多的功能，效果范例228，后端在本地使用server-mock来模拟数据
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>loading</title>
<style>
* {
padding: 0;
margin: 0;
}
a {
color: #666;
text-decoration: none;
}
ul {
list-style-type: none;
}
.ct-li li{
padding: 10px 10px;
margin:10px 10px;
border: 1px solid #ccc;
}
.ct-li li:hover{
background-color: lightgreen;
}
.ct-btn {
text-align: center;
}
.btn{
padding: 10px 15px;
border: 1px solid #e75480;
display: inline-block;
margin: 0 auto;
color: #e75480;
}
.btn:active{
background-color: #f60;
color: #fff;
}
</style>
</head>
<body>
<ul class="ct-li">
<li>内容1</li>
<li>内容2</li>
</ul>
<div class="ct-btn">
<a href="JavaScript:;" class="btn">加载更多</a>
</div>
<script>
//对ajax进行了封装
function ajax(obj){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState == 4 && xhr.status == 200) {
var json=JSON.parse(xhr.responseText);
obj.success(json);//对返回的成功数据进行处理
}
if (xhr.readyState == 4 && xhr.status == 404) {
obj.error();
}
}
function params(data){
var arr=[];
for(var i in data){
arr.push(i+'='+data[i]);
}
return arr.join('&');
}
var data=params(obj.data);//跟在url后面的参数形式，告诉服务器自己到底想要什么
if (obj.type.toLocaleLowerCase()==='get') {
xhr.open(obj.type,obj.url+'?'+data,true);
xhr.send();
}
if (obj.type.toLocaleLowerCase()==='post') {
xhr.open(obj.type,obj.url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
}
}
var ctLi = document.querySelector('.ct-li'),
flag=true;
document.querySelector('.btn').addEventListener('click', function() {
var li=ctLi.children;
if(!flag){
return;
}else{
flag=false
ajax({//传进去各种参数
url: '/getMore',
type: 'get',
data: {
start: li.length, //核心就是这里了，每次传递的参数是不一样的
len: 6
},
success: function(ret) {
addContent(ret);//对返回来的数据进行html拼接最后加到屏幕上显示
flag=true
},
error: function() {
console.log('出错了');
}
});
}
});
function addContent(ret){
for (var i = 0; i < ret.data.length; i++) {
var newLi = document.createElement('li');
newLi.innerText=ret.data[i];
ctLi.appendChild(newLi);
}//这个函数的作用是如何拼接html并显示到屏幕上
}
</script>
</body>
</html>
- route.js
app.get('/getMore', function(req, res) {
var start=parseInt(req.query.start),
len=req.query.len;
var data=[];
for (var i = 1; i < len; i++) {
data.push('内容'+(start+i))
}
res.send({
data: data
});
});
