本教程版权归小圆和饥人谷所有，转载须说明来源

问答

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

Ajax是Asynchronous JavaScript and XML的缩写，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据
这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了

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

前后端开发联调：

• 约定数据：有哪些需要传输的数据，数据类型是什么；
• 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
• 根据这些约定整理成接口文档

如何mock数据：

• 本地安装WAMP或者XAMPP本地搭建web服务器，编写php脚本模拟数据
• 使用server-mock模拟数据

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

var lock = false;
btn.addEventListener("click",function(){ 
    if(!lock){ 
        lock = true; 
        ajax(XXXX); 
        lock = false; 
    }
});

代码

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

function ajax(opts){

     //创建XHR对象
     var xmlhttp = new XMLHTTPRequest();
     xmlhttp.onreadystatechange = function (){
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         var json = JSON.parse(xmlhttp.responseText);
         opts.success(json);
       }
       if (xmlhttp.status == 404) {
         opts.error();
       }
     };

     //将data里的属性和值转为值名对格式
     var dataStr = "";
     for (var key in opts.data) {
       dataStr += key + "=" + opts.data[key] + "&";
     }
     dataStr = dataStr.substr(0,dataStr.length-1);

    //判断请求方式
     if (opts.type.toLowerCase() === 'post') {
       xmlhttp.open('post',opts.url,true);
       xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
       xmlhttp.send(dataStr);
     }
     if (opts.type.toLowerCase() === 'get') {
       xmlhttp.open('get',opts.url + '?' + dataStr,true);
       xmlhttp.send();
     }
}

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('出错了');
        }
    });
});

2. 实现加载更多的功能

加载更多-代码

加载前 加载后

3. 实现注册表单验证功能

注册表单验证-代码

注册失败 注册成功