问答部分

一、ajax 是什么？有什么作用？

• ajax(Asynchronous Javascript and XML)~指的是异步的Javascripot和XML，是一种无须刷新整个页面就能为页面中某一部分加载数据的技术
• 作用~通过在后台与服务器进行少量数据交换，可以使网页实现异步更新；这意味着在不重新加载网页的情况下，对网页的某些部分进行更新，会带来更好的用户体验

二、前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)

• 联调注意事项：
  • 要约定好接口，确认接口名称、接口的参数及返回值
  • 要约定好数据，确认数据的传输类型
• Mock数据：
  • 根据之前定的接口文档，利用假数据来验证我们所写的页面
  • 本地安装XAMPP本地搭建web服务器，编写php来mock数据
  • 使用server-mock进行mock数据

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

• 通过给ajax设置状态锁，如下代码：

var locked =false;//设置状态锁
document.getElementById("btn").addEventListener("click",function(){
    if(locked){    //locked为false执行ajax
            return;
        }
    locked = true;//上锁
    ajax({
        ···
        locked = false;//解锁
        }
    })
});

代码部分

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

function ajax(opts){
    // todo ...
}
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('出错了')
        }
    })
});

所封装的ajax函数如下：

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

二、实现如下加载更多的功能！

• 演示如下动图所示：
  
  加载更多
• 代码2

三、实现注册表单验证功能！

• 演示如下动图所示：
  
  表单验证功能
• 代码3
  版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！