ajax实践

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

ajax全称Asynchronous Javascript And XML，即创建异步交互的网页应用的一种开发技术，当在网页中涉及到很多数据信息时，往往不是把所有的信息直接写在html页面上，而是通过数据交互从后台获取数据，而传统的表单提交数据需要提交整个网页，有时只是更新页面上很少部分的数据却要刷新整个网页，效率低，用户体验差，因此人们思考通过能否通过局部刷新网页的方式，达到肉眼看起来“无刷新”的效果，这样ajax这种新的技术就被提出来，ajax通过核心对象XMLHttpRequest，用js的方式向服务端提交少量数据，并处理响应，同时不阻塞用户在网页上的其他动作，达到异步刷新，局部更新网页的目的。

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

确认好分工，角色；约定好接口的参数，格式，数据，接口地址，传递方式，回传数据的内容类型；讨论好接口的实现方式后，由前后台人员确认是否可行，再开始开发；确认接口与html内容整合统一后若页面出现样式或其他问题由谁来解决。
mock数据指的是在后端开发没有完成时，前端可以通过mock方法搭建本地服务器，模拟后台数据来实现数据交互的效果。可以通过安装xampp在本地搭建服务器，也可以安装server-mock，这样不需要特地去写一个后台的处理页面文件来访问数据。

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

设置状态锁：设置一个变量locked，初始值为false，触发相关事件时为ture，并且设置当locked为true时return。当事件函数里面的ajax执行完之后设置locked为false，这样当ajax请求的数据还没来之前如果重复点击的话，就会直接return出该事件函数，使重复点击无效。

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

function ajax(opts) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var result = JSON.parse(xmlhttp.responseText);
            opts.success(result);
        }

        if (xmlhttp.readyState == 4 && xmlhttp.status == 404) {
            opts.error();
        }

    };

    var tmpArr = [];
    for (var key in opts.data) {
        tmpArr.push(key + "=" + opts.data[key]);
    }
    var data = tmpArr.join('&');

    if (opts.type.toLowerCase() === 'get') {
        xmlhttp.open('get', opts.url + '?' + data);
        xmlhttp.send(null);

    }

    if (opts.type.toLowerCase() === 'post') {
        xmlhttp.open('get', opts.url);
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlhttp.send(data);
    }
}

题目5：实现加载更多的功能，后端在本地使用server-mock来模拟数据

• 效果 由于不能部署动态页面，后端在本地使用server-mock模拟数据
• 代码地址