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

1.Ajax是Asynchronous JavaScript And XML的缩写，这一技术能够从服务器获取额外的数据而无需刷新整个页面，会带来良好的用户体验；
2.Ajax在浏览器和Web服务器之间使用异步数据传输（HTTP请求）从服务器获取数据；
3.Ajax本质就是用JS创造了一个XMLHttpRequest对象，这个对象可以操作浏览器的接口，不通过页面刷新，而是直接向后台发送请求获取数据，然后浏览器进行展示改变网页；
4.使用Ajax最直观的感受就是向服务器获取数据不需要刷新页面等待了。
Ajax使用的四大步骤

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

1.需要注意的事情：

• 约定前后端联调的时间。
• 约定双方需要传输的数据和接口，在接口文档中确定好参数的名称、格式等。
• 约定请求和响应的格式和内容。

2.mock数据的方法有：

• 使用server-mock或mock.js搭建模拟服务器，进行模拟测试；
• 使用XAMPP等工具，编写PHP文件来进行测试。

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

var isLocked = false;//利用布尔值作为状态锁
btn.addEventListener('click',function(){
   if(isLocked == true){
      return;
   }
   isLocked = true;//先上锁
   ajax({
 ...
 });
});
function success(){
 ...
 isLocked = false;//解锁
}
function erreo(){
 ...
 isLocked = 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('出错了')
                }
            })
        });

代码:

function ajax(opts){
    //创建ajax对象
    var xmlhttp=new XMLHttpRequest();
    //对ajax进行事件监听
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState===4&&xmlhttp.status===200){
            //将服务器返回的文本内容转换为JSON格式
            var json=JSON.parse(xmlhttp.responseText);
            opts.success(json);
        }
        if(xmlhttp.status===404){
            opts.error();
        }
    }

    //创建发送到服务器的数据,为了让数据附加到url上,必须为key/value格式
    var dataStr="";
    for(var key in opts.data){
        dataStr+=key+"="+opts.data[key]+"&";
    }
    dataStr=dataStr.substr(0,dataStr.length-1);

    //判断请求的方式为GET
    if(opts.type.toLowerCase()==="GET"){
        //连接服务器
        xmlhttp.open("GET",opts.url+"?"+dataStr,true);
        //发送请求
        xmlhttp.send();
    }

    //判断请求方式为post
    if(opts.type.toLowerCase()==="post"){
        xmlhttp.open("POST",opts.url,true);
        //为了使post请求与提交web表单相同,
        //将Content-Type头部信息设置为application/x-www-form-urlencoded来模仿表单提交功能
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlhttp.send(dataStr);
    }
}

五、实现如下加载更多的功能。

代码地址

六、实现注册表单验证功能。

代码地址