ajax实践
2017-05-07 本文已影响32人
任少鹏
1、ajax 是什么？有什么作用？
AJAX = 异步 JavaScript 和 XML。
所谓异步，就是向服务器发送请求的时候，我们不必等待结果，而可以同时做其他的事情，等到有了结果我们可以再来处理这个事。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
2、 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
前后端联调 是一种 真实业务数据 和 本地mock数据 之间来回切换以达到前后端分离架构下的不同开发速度时数据交换的一种方式方法。
需要注意事项：
约定数据：有哪些需要传输的数据，数据类型是什么；
约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
根据这些约定整理成接口文档
后端接口完成前如何 mock 数据：
根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
搭建本地服务器，php写脚本提供临时数据；
使用server-mock或mock.js搭建模拟服务器，进行模拟测试；
3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var Lock = false; // 默认是解锁状态
function ajax() {
if(Lock ===true) {
return;
} else {
Lock = true; // 上锁
// ajax...
function success() {
...
lock = false; // 解锁
}
function error() {
...
lock = false; // 解锁
}
}
}
4：封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opts) {
opts.type = opts.type || "get";
opts.datatype = opts.datatype || "json";
opts.data = opts.data || {};
opts.success = opts.success || function() {};
opts.errot = opts.errot || function() {};
var xhr = new xhrRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.readyState == 200 || xhr.status == 304) {
if (opts.dataType === "text") {
opts.success(xml.responseText);
}
if (opts.dataType === "json") {
var json = JSON.parse(xml.responseText);
opts.success(json);
} else {
opts.error();
}
}
};
var dataString = '';
for (var key in opts.data) {
dataString += key + '=' + opts.data[key] + '&';
}
dataString = dataString.substring(0, dataString.length - 1);
if (opts.type.toLowerCase() === 'get') {
xhr.open('get', opts.url + '?' + dataString, true);
xhr.send();
}
if (opts.type.toLowerCase() === 'post') {
xhr.open('post', opts.url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(dataString);
}
}
document.querySelector('#btn').addEventListener('click', function() {
ajax({
url: '/login', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret) {
console.log(ret); // {status: 0}
},
error: function() {
console.log('出错了')
}
})
});
5：实现加载更多的功能，后端在本地使用server-mock来模拟数据
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>加载更多</title>
<style type="text/css">
ul,
li {
margin: 0;
padding: 0
}
li {
list-style: none;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
cursor: pointer;
}
.btn {
border: 1px solid red;
height: 40px;
line-height: 40px;
width: 80px;
text-align: center;
background: white;
text-decoration: none;
color: red;
display: block;
margin: 10px auto;
}
li:hover {
background: green;
color: #fff;
}
</style>
</head>
<body>
<ul id="ct">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
</ul>
<button id="load-more" class="btn">加载更多</button>
<script>
var btn = document.querySelector('#load-more')
var ct = document.querySelector('#ct')
var lock = false
var pageIndex = 6
btn.addEventListener('click', function() {
if (lock === true) {
return;
} else {
lock === true;
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)
pageIndex = pageIndex + 5
} else {
alert("出错了")
}
}
}
xhr.open('get', 'loadMore?index=' + pageIndex + '&length=5', true)
xhr.send()
lock = false
}
})
</script>
</body>
</html>
app.get('/loadMore', function(req, res) {
var curIdx = req.query.index
var len = req.query.length
var start = 3
var data = []
for (var i = 0; i < len; i++) {
data.push('内容' + (parseInt(curIdx) + i))
}
res.send(data);
});
