Ajax

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

ajax主要是实现页面和web服务器之间数据的异步传输。
不采用ajax的页面，当用户在页面发起请求时，就要进行整个页面的刷新，刷新快慢取决于服务器的处理快慢。在这个过程中用户必须得等待，不能进行其他操作；采用ajax的页面，可以实现页面的局部更新，并且发起请求后，用户还可以进行页面上的其他操作；

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

需要注意的事情：

• 约定数据：确定需要传输的数据及数据类型
• 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
  如何mock数据：
• 方法一：使用xampp等工具，搭建本地web服务器，编写php脚本提供数据
• 方法二：使用server-mock模拟数据

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

• 使用button的disabled属性，配合setTimeout 0，使在数据到来之前按钮都不能被点击

ele.addEventListener('click',function(){ 
    this.disabled=true; 
    ajax();
    setTimeout(this.disabled=false,0); 
});

• 设置一个开关，初始状态是false，发生点击事件后，开关状态置为true，直到ajax请求完成后，开关状态才会被重新置为false。

var lock = false;
ele.addEventListener('click',function(){
    if(!lock){ 
        lock = true; 
        ajax(); 
        lock = false; 
    }
});

代码

1.封装一个 ajax 函数，能通过如下方式调用

function ajax(opts) {
    //  做参数兼容
    opts.success = opts.success || function(){};
    opts.error = opts.error || function(){};
    opts.type = opts.type || 'get';
    opts.dataType = opts.dataType || 'json';
    opts.data = opts.data || {};

    var dataStr = '';
    for (var key in opts.data) {
        dataStr += key + '=' + opts.data[key] + '&';
    }
    dataStr = dataStr.substr(0, dataStr.length - 1);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4) {
            if(xmlhttp.status === 200){
                if(opts.dataType === 'text'){
                    opts.success(xmlhttp.responseText);
                }
                if(opts.dataType === 'json'){
                    var json = JSON.parse(xmlhttp.responseText);
                    opts.success(json);                 
                }        
            }else{
                opts.error();   
            }
        }
    };
    if (opts.type.toLowerCase() === 'post') {
        xmlhttp.open(opts.type, opts.url, true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(dataStr);
    }
    if (opts.type.toLowerCase() === 'get') {
        xmlhttp.open(opts.type, opts.url + '?' + dataStr, true);
        xmlhttp.send();
    }
}

调用方式：

document.querySelector('#btn').addEventListener('click', function(){ 
    ajax({ url: 'getData.php',    //接口地址
       type: 'get',     // 类型，post 或者 get,
       data: { 
       username: 'xiaoming', 
       password: 'abcd1234' 
       }, 
       success: function(ret){ 
         console.log(ret);  // {status: 0} 
       }, 
       error: function(){ 
         console.log('出错了') 
      } 
    })
});

代码

1.实现如下加载更多的功能
本地测试通过GitHub上代码地址
2.实现注册表单验证功能
xampp上测试通过GitHub上代码地址