ajax实践
2017-06-19 本文已影响0人
jamesXiao_
ajax 是什么？有什么作用？
- AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。
- 可以和后端交换数据，不用刷新页面
作用
- 最大的一点是页面无刷新，用户的体验非常好。
- 使用异步方式与服务器通信，具有更加迅速的响应能力。。
- 可以把以前一些服务器负担的工作转嫁到客户端
- 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
- ajax可使因特网应用程序更小、更快，更友好。
前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
- 需要和后端约定数据接口的名称
- 需要和后端约定数据格式是什么
- 约定请求数据格式和响应数据格式
根据约定自己设置模拟数据,然后来完成测试
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
设置一个变量作为状态锁,初始的时候打开,发送完请求后锁定,接收到响应数据后在解锁
var lock = true;
var btn = document.querySelector('button');
btn.onclick = function () {
if (!lock) return;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
let res = xhr.response;
}
}
lock = true;
}
xhr.open('GET', 'dizhi');
xhr.send();
lock = false;
}
实现加载更多的功能，后端在本地使用server-mock来模拟数据
<!doctype html>
<html>
<head>
<style>
body {
max-width: 800px;
margin: auto;
text-align: center;
}
ul,li {
list-style: none;
}
li {
border: 1px solid;
}
</style>
</head>
<body>
<ul class="more">
</ul>
<button>加载更多</button>
<script>
var btn = document.querySelector('button')
var more = document.querySelector('.more')
var lock = true;
var index = 0;
btn.addEventListener('click', function(){
if (!lock) return;
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if (xhr.status === 200 || xhr.status === 304) {
var res = JSON.parse(xhr.responseText);
var forgment = document.createDocumentFragment();
for (var i = 0; i < res.news.length; i++) {
var node = document.createElement('li');
node.innerText = res.news[i];
forgment.appendChild(node);
}
more.appendChild(forgment);
index = res.index;
lock = true;
}
}
}
xhr.open('get', '/more?index=' + index + '&length=5')
xhr.send()
lock = false;
})
</script>
</body>
</html>
router.get('/more', function(req, res) {
var index = parseInt(req.query.index); // 通过 req.query获取请求参数
var length = parseInt(req.query.length);
var news = [];
var start = index * 5;
for (var i = start; i < start + length; i++) {
news.push('新闻' + i);
}
var moreNew = {
'news': news,
'index': ++index
}
res.send(moreNew)
})
