server-mock ajax

ajax 是什么？有什么作用？

ajax全称Asynchronous javascript and xml。它的主要作用是在向服务器发送请求的时候，不用刷新页面，同时能接收和处理服务器的数据

前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？

前后端开发需要注意的事情
1.数据的传输格式是post还是get
2.请求的url的名字
3.以key=valaue的形式向后端传递参数，多组数据中间要加上&
4.后端返回的数据的格式是否为json

如何mock数据
方法一 使用nodejs的express框架
方法二使用server-mock，具体步骤：
1.在需要开启服务器的文件夹下创建router.js
2.在router.js内写好对应接口的函数
3.通过git bash 执行mock start来开启服务器
4.选中地址，右键打开网址
5.ctrl+c关闭服务器

点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

设定一个变量isDataArrive来监控数据有没有达到，默认为true

var isDataArrive=true;
btn.addEventListener('click',function(){

    if(!isDataArrive) return;
    xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function(){
      if(xhr.readySyate === 4){
            if(xhr.status ===200){
                     //todo
                     isDataArrive=true;//数据来了之后设置为true，又可以发请求了
              }
          }
       
    }
    xhr.open(...)
    xhr.send(...);
    isDataArrive=false;//发送一次请求后立即设置为false防止用户再次发请求
}

封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据

function ajax(opts){
    var xhr=new XMLHttpRequest();
    
    xhr.onreadystatechange=function(){
        if(xhr.readyState === 4){
            if(xhr.status === 200 || xhr.status === 304){
                var results=JSON.parse(xhr.responseText);
                opts.success(results);
            }else
                opts.error()
        }
    }

    var str='';//拼接URL
    for(key in opts.data){
        str+=key+'='+opts.data[key]+'&';
    }
    str=str.substr(0,str.length-1);//去掉&符号


    if(opts.type === 'get'){
        xhr.open(opts.type,opts.url+'?'+str,true);
        xhr.send();
    }
    if(opts.type === 'post')
        xhr.open(opts.type,url,true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(str);
    }

}

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('出错了')
        }
    })
});

实现加载更多的功能

前端代码

ct.addEventListener('mouseover',function(e){
            if(e.target.tagName.toLowerCase() === 'li'){
                e.target.classList.add('hover');
            }
        });
        
        ct.addEventListener('mouseout',function(e){
            if(e.target.tagName.toLowerCase() === 'li'){
                e.target.classList.remove('hover');
            }
        });

        btn.addEventListener('click',function(e){
            e.preventDefault();

            if(!isDataArrived ) return;
            var xhr=new XMLHttpRequest();
            xhr.open('GET','/loadmore?index='+pos+'&length=5');
            xhr.onreadystatechange=function(){
                if(xhr.readyState === 4){
                    if(xhr.status === 200 || xhr.status === 304){
                        var results=JSON.parse(xhr.responseText);
                        var docfrag=document.createDocumentFragment();
                        for(var i=0;i<results.length;i++){
                            var li=document.createElement('li');
                            li.innerText=results[i];
                            docfrag.appendChild(li);
                        }
                        ct.appendChild(docfrag);
                        pos+=5;
                        isDataArrived=true;
                    }
                }
            }
            xhr.send();
            isDataArrived=false;
        });

后端代码

app.get('/loadmore',function(req,res){
    var idx=req.query.index;
    var len=req.query.length;
    var data=[];
    for(var i=0;i<len;i++,idx++){
        data.push('内容'+idx);
    }
    res.send(data);
})