Ajax

Ajax 是什么？有什么作用？##

Ajax(Asynchronous JavaScript and XML)，异步JavaScript和XML。可以实现在不刷新页面的前提下与后端交互数据并更新页面。

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

前后端开发联调需要注意:1请求类型(get/post);2请求参数(key/value);3发送的数据格式;4响应的数据格式
mock 数据可以通过在本地模拟后端服务器,并且建立符合约定规范的数据.

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

    var isLocked=false;
      document.querySelector("#id").addEventListener("click",function(){
          if(isLocked===true){  //使用状态所状态判断
              return;
          }
          isLocked=true;  //ajax之前先上锁
          var xhr = new XMLHttpRequest();
          xhr.open('get', '/xxxx?key=value', true);
          xhr.send();
          xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
              isLocked=false;//请求完成解锁
              if(xhr.status === 200){
                console.log('hello')
              }
            }
          }
        })

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

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

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