进阶12-ajax实践

• 题目1： ajax 是什么？有什么作用？
  AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术,它的作用就是在不重新加载页面的情况下，向服务器请求数据并获取服务器返回的内容。

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

  • 联调注意：
    • 约定好页面需要的数据和数据类型
    • 约定接口名称
    • 约定请求参数
    • 约定相应格式，例如成功返回什么消息，失败返回什么消息
  • 后端接口完成前如何 mock 数据:
    • 使用 sever-mock 等工具搭建环境

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

    //使用变量锁定
    var lock = false;
    btn.addEventListener('click', function() {
    if (!lock) {
    lock = true;
    ajax(XXXX);
    lock = false;
    }
    });
  

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

function ajax(opts) {

    var xhr = XMLHttpRequest();
    var data = '';
    for (vl in opts.data) {
        data += vl + '=' + opts.data[vl] + '&';
    }
    data = data.substring(0, data.length - 1);
    xhr.onreadystatechange = function() {
        if (readyState == 200 && status == 4) {
            opts.success(xhr.responseText);
        }
        if (xhr.redyState === 4 && xhr.status === 404) {
            opts.error();
        }
    }
    if (opts.type.toUpperCase() === 'GET') { //判断使用哪种方式请求
        xhr.open('GET', opts.url + '?' + data, true);
        xhr.send();
    }
    if (opts.type.toUpperCase() === 'POST') {
        xhr.open('POST', opts.url, true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }
}
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('出错了')
        }
    })
});

• 题目5：实现加载更多的功能，效果范例15，后端在本地使用server-mock来模拟数据
  代码地址
  进阶11-5.gif