---

keywords: Ajax。

---

• Ajax是什么？有什么用？

Ajax = Asynchronous JavaScript and XML 。这一技术能够向服务器请求数据而无需重载页面，会带来良好的用户体验。

Ajax在浏览器与WEB服务器之间使用异步数据传输（HTTP请求），从服务器获取数据。

异步是指脱离当前浏览器页面的请求、加载等单独执行。因此，Ajax可以在不重载页面的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新。

图解AJAX

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

注意：
1、详细了解产品需求；
2、约定数据接口，包括约定数据格式、请求方法、返回数据格式等；

mock数据：
1、使用模拟数据生成器；
2、写简单的php文件模拟。

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

设置flag变量计数,初始值为0，点击一次变为1，ajax执行完毕后将flag恢复成0，并且设置当flag为1时return，因此当前一次ajax请求未完成就重复点击按钮，会直接return出事件处理程序：

var flag = 0;
el.addEventListener('click',function(){
    if (flag === 1) return;
    flag = 1;
    ajax({
        ...
        success:function() {
        flag = 0
        ...
    }
         error:function() {
        flag = 0
        ...
    }
        ...
    })
    ...
})

代码

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

function ajax(opts) {
    var xmlhttp = new XMLHttpRequest()
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4) {
            if ((xmlhttp.status >= 200 && xmlhttp.status <300) || xmlhttp.status === 304) {
                var json = JSON.parse(xmlhttp.responseText)
                opts.success(json)
            } else {
                opts.error(xmlhttp.statusText)
            }
        }
    }
    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)
    } else {
        xmlhttp.open(opts.type , 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('出错了')
        }
    })
});

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

效果

• 实现注册表单验证功能

效果