ajax

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

• ajax
  ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。
• 作用

1、页面无刷新，在页面内与服务器通信，给用户的体验非常好。
2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

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

注意事项：

• 注意事项
  约定好需要传输的数据和接口，包括请求的类型get/post，请求url，数据的格式等
• 如何mock数据：使用server-mock
  • 安装nodejs，在系统终端中输入npm install -g server-mock安装mock
  • mock init 初始化数据，mock start开始；
  • 生成的三个文件中，index.html为静态页面，router.js为后端接口文件，user.ejs为静态页面分隔的模板文件。

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

    var isLoading = false ;
    btn.addEventlistener('click',function(){
      if(isLoading){
        return;
    }else{
      isLoading = true;
        //to do
      isLoading = false;
    }
    },false);

代码

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

function ajax(opts){
    // todo ...
}
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('出错了')
        }
    })
});

        function ajax(opts) {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
                    var json = JSON.parse(xmlhttp.responseText);
                    opts.success(json);
                }
                if (xmlhttp.status == 404) {
                    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') {
                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(dataStr);
                }

            }