ajax实践（进阶12）

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

• ajax(Asynchronous JavaScript and XML)，这一技术能够向服务器请求额外的数据而无需卸载整个页面。可以实现异步，这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新。
• 异步请求，不需要像表单提交请求一样阻塞页面（同步请求会造成页面卡死等情况）。异步会带来良好的用户体验。

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

• 需要在开发前达成对接口的约定(一般是文档)，决定url(和方法名)，参数名（和参数值格式），返回数据格式
• mock数据：
  • 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
  • 使用server-mock，简单使用步骤如下：
    1. npm install -g server-mock：在全局中安装server-mock
    2. mock init：生成3个mock文件(index.html,router.js,user.ejs)
    3. mock start：开启服务器

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

点击按钮后，设置状态变量，直到请求结束(readyState===4时)重置状态变量让后面的请求代码可以执行。

let isLoading = false;//状态变量：用于在数据到来之前防止重复点击
btnNode.addEventListener('click', () => {
    if(isLoading) return;//正在加载则终止
    let text = textNode.value;
    let xhr = new XMLHttpRequest();
    xhr.open('get', '/test?text=' + text, true);
    xhr.send();
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let content = xhr.responseText;
            console.log(content);
            contentNode.innerText = content;
            isLoading = false;//加载成功则重置状态变量
        }
    }
    isLoading = true;//加载开始时改变状态变量的值
});

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

//I defined a method: convert from obj to url-parameters
const convert=(obj)=>{
    let arr = [];
    for(let [key,value] of Object.entries(obj)) {
        arr.push(key+"="+value);
    }
    return arr.join('&');
}
function ajax(opts){
    // todo ...
    let xhr = new XMLHttpRequest();
    if(opts.type==='get'){
        xhr.open(opts.type, opts.url+'?'+convert(opts.data), true);
        xhr.send();
    } else if(opts.type === 'post'){
        xhr.open(opts.type, opts.url, true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(convert(opts.data));
    }
    xhr.onreadystatechange = ()=>{
        if(xhr.readyState===4&&xhr.status===200){
            let res = xhr.responseText;
            console.log(res);
            opts.success(res);
        }else if(xhr.readyState===4){
            opts.error();
        }
    }
}
document.querySelector('#btn').addEventListener('click', function(){
    ajax({
        url: '/login',   //接口地址
        type: 'get',               // 类型， post 或者 get,
        data: {
            username: 'xiaoming',
            password: 'abcd1234'
        },
        success: function(ret){
            console.log(ret);       // {status: 0}
        },
        error: function(){
           console.log('出错了')
        }
    })
});

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

代码链接