• 关键词：Ajax

Ajax：在不刷新页面的情况下，向服务器发送请求、获取数据，并异步更新网页的某部分！

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

• Ajax 全称“Asynchronous Javascript And XML”，即：异步的 JavaScript 和 XML。
• Ajax 本质就是一个 XMLHttpRequest 对象，这个对象提供了一些接口：用于向服务器发送请求和解析服务器响应。
• Ajax 就是一种技术，可在不刷新页面的情况下，与服务器交互数据，采用异步方式更新网页的部分内容。
• 采用 Ajax 与服务器交互数据，可使用户拥有较好的体验：运行页面上某个功能时页面不会重新加载，且等待过程中不会影响页面上其他功能的运行。

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

前后端在进行开发前，需要协作商定数据和接口的各项细节，后端负责提供数据，前端负责展示数据（根据数据负责页面的开发）。

• 前后端开发联调注意事项

1. URL：接口名称
2. 发送请求的参数和格式（get/post）
3. 数据响应的数据格式（数组/对象）
4. 根据前后端约定，整理接口文档

• 如何 mock 数据

1. 搭建 web 服务器
2. 根据接口文档仿造假数据
3. 关联前后端文件，开启 web 服务器
4. 验证前端页面功能及显示是否正确

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

• 思路

1. 使用状态锁检验此刻是否正在请求数据（是否上锁）：是则放弃请求，否则发送请求
2. 请求数据之前，解锁状态：“ 发送 Ajax 请求 ” 代码可执行
3. 正在请求数据，上锁状态：“ 发送 Ajax 请求 ” 代码被禁用
4. 拿到后台数据，解锁状态：“ 发送 Ajax 请求 ” 代码被解禁

• 代码

var btn = document.querySelector('.btn');
var isLoading = false; // 状态锁1：发送请求之前，解锁状态
btn.addEventListener('click', function () {
        if(isLoading){
            return; // 状态锁0：用于检测是否正在请求数据，是则跳出，否则继续
        }
        ajax({ // 调用封装的 ajax 函数
            method: 'get',
            url: '/lockModal',
            data: {},
            async: 'true',
            success: function () {
                onSuccess();
                isLoading = false;  // 状态锁3.1：请求数据已完成（成功拿到数据），解锁状态
            },
            error: function() {
                onError();
                isLoading = false;  // 状态锁3.2：请求数据已完成（失败拿到数据），解锁状态
            }
        });
        isLoading = true; // 状态锁2：正确请求数据，上锁状态
    })

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

• Download
• ajax 调用格式

ajax（{
     method: '',
     url: '',
     data: {},
     // dataType: '', // 若需要则添加，否则不需添加
     asyns: true, // 根据需要可以设置封装函数的默认值为 true
     success: function () {},
     error: function () {}
}）

• ajax 简单封装

function ajax(opts) {
    // 三、对数据进行处理
    // 3.1、若数据存在，将数据组装成字符串
    if(opts.data){
        var dataStr = '';
        for(var key in opts.data){
            dataStr = dataStr + key + '=' + opts.data[key] + '&';
        }
        opts.data = dataStr.substring(0, dataStr.length-1);
    }
    // 3.2、将方法处理为小写
    opts.method = opts.method.toLowerCase();
    // 3.3、若为 get 方法，重新组装 url
    if( (opts.method == 'get') && opts.data){
        opts.url = opts.url + '?' + opts.data;
    }
    // 四、开始 AJAX 函数
    // 4.1、创建 AJAX 对象
    var xhr = new XMLHttpRequest();
    // 4.2、规定所需数据格式
    xhr.open(opts.method, opts.url, opts.asyns);
    // 4.3、发送请求
    if(opts.method == 'get'){
        xhr.send();
    }else if(opts.method == 'post'){
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send(opts.data);
    }
    // 4.4、检测服务器响应
    xhr.onreadystatechange = function () {
        if( (xhr.readyState == 4) && (xhr.status == 200) ){
            opts.success( JSON.parse(xhr.responseText) );
            console.log(opts.method);
        }else {
            opts.error(); // 此处有待改进，目前到此为止
        }
    }
}

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

• 思路

1. 编写 HTML 和 CSS 代码
2. JS部分：给 ‘加载更多’ 按钮添加事件：当用户点击时，执行下列代码
3. 调用封装好的 ajax 函数，将定义好的请求发送给后端
4. 在后端 mock 数据，获取前端参数，处理数据，给前端发送数据
5. 前端接收并调用数据，将数据展示在页面上

• 代码：穿梭到 github 查看代码

6. 额外实现一个功能：换一批看看，后端自行 mock 数据

• 思路：与第5题思路大致相同
• 代码：穿梭到 github 查看代码

本文章著作权归饥人谷和作者所有，转载须说明来源！