AJAX

ajax 是什么？有什么作用？

ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。
ajax可以无需刷新整个网页，而是对部分网页进行刷新。

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

前后端进行开发前，要定义好接口以及数据形式等细节，已达到解耦效果。
后端接口完成前，前端可以通过MOCKJS等工具模拟数据。

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

通过设定标记

var flag=false;
tn.addEventListener('click', function(e) {
    //......
    flag = true;
    if(flag){
        return;
    }
});

在请求数据时，函数flag设为false,保证不重复点击

代码

1. 封装一个 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){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            var ret = JSON.parse(xmlhttp.responseText);
            opts.success(ret);
        }
        if(xmlhttp.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() == 'post'){
        xmlhttp.open(opts.type,opts.url,true);
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlhttp.send(dataStr);
    }
    if(opts.type.toLowerCase() == 'get'){
        xmlhttp.open(opts.type,opts.url+'?'+dataStr,true);
        xmlhttp.send();
    }
}

2. 实现如下加载更多的功能。效果如下： http://jrgzuoye.applinzi.com/作业安排/jscode/JS9-jqueryajax/1.html
   新浪云
   源码
3. 实现注册表单验证功能效果如下：http://jrgzuoye.applinzi.com/作业安排/jscode/JS7-ajax/3.html
   新浪云
   源码