ajax实践
2017-03-31 本文已影响0人
高进哥哥
1： ajax 是什么？有什么作用？
ajax(synchronous JavaScript and XML),是异步的js和xml通过与后台服务器进行少量的数据交换，从而实现页面不重新加载的情况下，对某部分进行更新
2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
前后端开发联调需要注意事项：
- 约定数据：有哪些需要传输的数据，数据类型是什么；
- 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
- 根据这些约定整理成接口文档
如何mock数据： - 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
- 可以用xampp进行模拟
- 也可使用server-mock
3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
设置状态锁
var lock=true;
document.querySelector('#btn').addEventListener('click', function(){
if(!lock){
return;
}
ajax({
.......
lock=true;
})
lock=false;
利用ajax异步原理，当数据未到来时对状态封锁，屏蔽用户的点击
4：封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opts){
// todo ...
}
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('出错了')
}
})
});
});
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 xml=new XMLHttpRequest();
xml.onreadystatechange=function(){
if(xml.readyState===4){
if(xml.status===200||xml.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 dataStr="";
for(var key in opts.data){
dataStr+=key+"="+opts.data[key]+"&";
}
dataStr=dataStr.substr(0,dataStr.length-1);
if(opts.type.toLowerCase()==="post"){
xml.open(opts.type,opts.url,true);
xml.setRequestHeader("content-type","application/x-www-from-uclencoded");
xml.send(dataStr);
}
if(opts.type.toLowerCase()==="get"){
xml.open(opts.type,opts.url+"?"+dataStr,true);
xml.send();
}
}
5：实现加载更多的功能，后端在本地使用server-mock来模拟数据
<body>
<ul class="ct"></ul>
<input type="button" class="btn" value="加载更多">
<script>
var lock=true;
var pageIndex=0;
$('.btn').addEventListener('click', function(){
if(!lock){
return
}
loadData(function(news){
getMore(news)
pageIndex+=5;
lock=true;
})
lock=false;
})
function loadData(callback){
ajax({
url: '/list', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
index: pageIndex,
length: 5
},
dataType: "json",
success: callback,
error: function(){
console.log('出错了')
}
})
}
function getMore(news){
var box=$(".ct");
var fragment=document.createDocumentFragment();
for(var i=0;i<news.length;i++){
var node=document.createElement("li");
node.innerText=news[i];
fragment.appendChild(node);
}
box.appendChild(fragment);
}
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 xml=new XMLHttpRequest();
xml.onreadystatechange=function(){
if(xml.readyState===4){
if(xml.status===200||xml.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 dataStr="";
for(var key in opts.data){
dataStr+=key+"="+opts.data[key]+"&";
}
dataStr=dataStr.substr(0,dataStr.length-1);
if(opts.type.toLowerCase()==="post"){
xml.open(opts.type,opts.url,true);
xml.setRequestHeader("content-type","application/x-www-from-uclencoded");
xml.send(dataStr);
}
if(opts.type.toLowerCase()==="get"){
xml.open(opts.type,opts.url+"?"+dataStr,true);
xml.send();
}
}
function $(id){
return document.querySelector(id);
}
function $$(cls) {
return document.querySelectorAll(cls);
}
</script>
</body>
后台模拟数据
app.get('/list', function(req, res) {
var index = req.query.index; // 通过 req.query获取请求参数
var length= req.query.length;
var arr=[];
for(var i=0;i<length;i++){
arr.push("新闻"+(parseInt(index)+i));
}
res.send(arr);
});
