进阶12 ajax实践
2017-07-13 本文已影响11人
hhg121
使用server-mock
1.安装nodejs
2.打开gitbash,执行npm install -g server-mock
使用：搭建web服务器
- 在终端cd到你的文件所在的文件夹
- 执行
mock start可将当前文件夹路径作为根目录启动一个web服务器 - 在浏览器中输入http://localhost:8080/xx.html
题目1： ajax 是什么？有什么作用？
Ajax(Asynchronous JavaScript + XML)是一种创建交互式网页应用的开发技术，利用Ajax可以向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。
Ajax特点：
- Ajax通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新。
- Ajax的核心是XMLHttpRequest对象
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
前后端开发联调需要注意事项：
- 约定接口数据：包括接口名称,前端需要传的查询数据格式，后台返回的数据格式，请求方式(get/post/...)
- 根据约定生成接口文档
mock数据方式：
使用nodejs搭建服务器，如安装server-mock，在项目所在的根目录创建router.js文件，修改router.js代码，添加方法模拟接收前端请求，并返回数据。
3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
添加一个判断数据是否到来的isDataArrive变量，4中有实现。
4：实现加载更多的功能，效果范例312，后端在本地使用server-mock来模拟数据
//router.js
app.get('/loadMore', function(req, res) {
var curIdx = req.query.index
var len = req.query.length
var data = []
for(var i = 0; i < len; i++) {
data.push('新闻' + (parseInt(curIdx) + i))
}
setTimeout(function(){
res.send(data);
},3000);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
加载更多
</title>
<style>
ul,li{
margin: 0;
padding: 0
}
#ct li{
list-style:none;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
cursor:pointer;
}
#load-more{
display: block;
margin: 10px auto;
text-align: center;
cursor: pointer;
}
#load-more img{
width: 40px;
height: 40px;
}
.btn{
display: inline-block;
height: 40px;
line-height: 40px;
width: 80px;
border: 1px solid #E27272;
border-radius: 3px;
text-align: center;
text-decoration: none;
color: #E27272;
}
.btn:hover{
background: green;
color: #fff;
}
</style>
</head>
<body>
<ul id="ct">
</ul>
<a id="load-more" class="btn" href="javascript:void(0);">
加载更多
</a>
</body>
<script>
var btn = document.querySelector("#load-more");
var ct = document.querySelector('#ct');
var pageIndex = 0;
var isDateArrive = true; //防止多次点击造成的多次请求
btn.onclick = function(){
if(!isDateArrive){
return;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200 || xhr.statue === 304){
var result = JSON.parse(xhr.responseText);
var fragment = document.createDocumentFragment();
for(var i=0;i<result.length;i++){
var li = document.createElement('li');
li.innerText = result[i];
fragment.appendChild(li);
}
ct.appendChild(fragment);
pageIndex += 5;
isDateArrive = true;
}
else {
console.log('出错了');
}
}
}
xhr.open('get','/loadMore?index='+pageIndex+'&length=5',true);
xhr.send();
isDateArrive = false;
}
</script>
</html>
