Ajax记述
2017-03-24 本文已影响0人
zevei
题目1： ajax 是什么？有什么作用？
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新.
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
注意事项：
1.约定数据：确定数据类型及大小限制
2.约定接口：确定接口的名称、请求的方式。
如何 mock 数据？
可以自己使用服务器框架搭建一个模拟服务器环境或者使用mock-server来模拟
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
使用状态锁
var dataArrive = true;
btn.addEventListener("click",function(){
if(!dataArrive){
return;
}
var xhr = new XMLHttpRequest();
xhr.open();
xhr.send();
var dataArrive = false;
if (xhr.readyState === 4) {
var dataArrive = true;
}
});
题目4：封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opt){
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200||xhr.status === 304) {
var results = xhr.responseText;
opt.success(results);
}else{
opt.error()
}
}
}
var query = '?';
for(key in opt.data){
query+=key+'='+opt.data[key]+'&';
}
var query = query.substr(0,query.length-1)
xhr.open(opt.type,opt.url+query,true)
xhr.send()
}
document.querySelector('#btn').addEventListener('click',function(){
ajax({
url: '/login',
type: 'get',
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret);
},
error: function(){
console.log('出错！')
}
})
})
//router部分:
app.get('/login', function(req, res) {
var name=req.query.username;
var pwd=req.query.password;
var datas;
if(name ==='xiaoming'&& pwd ==='abcd1234'){
datas = '登陆成功';
}else {
datas = '用户名或密码错误';
}
res.send(datas);
});
题目5：实现加载更多的功能
html文件
<!doctype html>
<html>
<head>
<style type="text/css">
ul,li{
margin: 0;
padding: 0;
}
#ct li{
list-style: none;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
border: 1px solid #e27272;
border-radius: 4px;
cursor: pointer;
}
#ct li:hover{
color: #fff;
background: #e27272;
}
#load-more{
display: block;
margin: 10px auto;
text-align: center;
cursor: pointer;
}
#load-more img{
width: 40px;
height: 4px;
}
.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: #e27272;
color: #fff;
border-color: #e27272;
}
</style>
</head>
<body>
<ul id="ct"></ul>
<a id="load-more" class="btn" href="#" >加载更多</a>
<script type="text/javascript">
var btn = document.querySelector('#load-more');
var ct = document.querySelector('#ct')
var curIndex = 0;
var dataArrive = true;
btn.addEventListener('click',function(e){
e.preventDefault()
if(!dataArrive){
return;
}
loadData(randerPage)
})
function loadData(callback){
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if (xhr.readyState === 4){
if(xhr.status === 200 ||xhr.status ===304){
var results = JSON.parse(xhr.responseText)
console.log(results)
callback(results)
curIndex=curIndex+5
}else{
console.log('错误')
}
dataArrive = true;
}
}
xhr.open('get','/loadMore?index='+curIndex+'&length=5',true)
xhr.send()
dataArrive = false;
}
function randerPage(news){
var fragment = document.createDocumentFragment()
for(var i = 0;i<news.length;i++){
var node = document.createElement('li')
node.innerText = news[i]
fragment.appendChild(node)
}
ct.appendChild(fragment);
}
</script>
</body>
</html>
router部分
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))
}
res.send(data);
});
