ajax

1： ajax 是什么？有什么作用？

ajax全称是Asynchrous JavaScript XML的缩写。

作用：与服务器交换数据并更新部分网页，在不重新加载整个页面的情况下。
AJAX在浏览器和服务器之间使用异步传输从服务器获取数据，异步指的是脱离当前浏览器页面的请求、加载等单独执行，这样就能在不重载页面的情况下发送请求然后获得服务器的返回数据。

具体来说,AJAX包括以下几点
1.创建AJAX对象；
2.发出HTTP请求；3.
接受服务器传回的数据；
4.更新网页数据。

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

前后端开发联调需要注意事项：

• 约定数据：有哪些需要传输的数据，数据类型是什么；
• 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
• 根据这些约定整理成接口文档
  如何mock数据：
• 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
• 可以用xampp进行模拟
• 也可使用server-mock

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

答：使用状态锁,在ajax没有监听到后台数据时锁住，只有当后台数据返回并且监听到后才能开锁

var btn = document.querySelector('.btn');
var isDataArrive=false;
btn.addEventListener('click',function(){
   if(isDataArrive){return}
   isDataArrive=true;
   xhr=new XMLHttpRequest();
   xhr.onreadystate=function(){
         if(xhr.readyState===4){
             if(xhr.status===200||xhr.status===304){
                  //do something 
             }else{
                      console.log('出错了！') 
                   }
            isDataArrive=false;
         }
  }
xhr.open('.....')
shr.send()
})

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.success = opts.success || function(){};
    opts.error = opts.error || function(){};
    opts.type = opts.type || 'get';
    opts.data = opts.data || {};
    opts.dataType = opts.dataType || 'json';

    var html = '';
    for(var key in opts.data) {
        html += key + '=' + opts.data[key] + '&';
    }

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status === 200 || xhr.status === 304){
                if(opts.dataType == 'text'){
                    opts.success(xhr.responseText);
                }else if(opts.dataType == 'json'){
                    var json = JSON.parse(xhr.responseText);
                    opts.success(json);
                }  
            }else{
                opts.error();
            } 
        }   
    }
    var html = html.substr(0,html.length-1);

    if(opts.type.toLowerCase() === 'get'){
        html = opts.url + '?' + html;
        xhr.open(opts.type,html,true);
        xhr.send();
    }
    if(opts.type.toLowerCase() === 'post'){
        xhr.open(opts.type,opts.url,true);
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        xhr.send(html);
    }
}
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：实现加载更多的功能，效果范例128，后端在本地使用server-mock来模拟数据

前端代码
后端代码
效果：

TIM图片20170422200842.png TIM图片20170422200936.png