日夜谈——Ajax

Ajax

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

<li>ajax的全称是Asynchronous JavaScript and XML(异步的JavaScript与XML技术)；

是一种基于现有标准的更新部分网页的新方法；
资源加载方式是异步的方式；
使用JS语言去实现请求的接收和发送；
XML指的是一开始的数据交换的格式是XML,现在常用的格式是json；

<li>ajax的作用

资源异步加载提高用户体验
降低数据流量传输以节省成本

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

<li>前后端开发联调注意事项

开发前约定好接口文档并指定负责人进行后续撰写和维护；
约定接口使用的数据类型，json/xml还是text等等；
约定页面渲染时用到的数据；

<li>如何mock数据

可以使用sever-mock，mock.js等数据模拟工具。
自己搭建服务器，然后使用PHP或者JAVA等后端语言去模拟数据。

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

 var lock = false;
 btn.addEventListener('click',function(e){
    if(lock){
        return;
    }else{
        lock = true;
        ajax({
            url:'',
            type:'get',
            data:{},
            success:function(data){
            ......
            ......
            lock = false;
            },
            error:function(){
                console.log('error');
                 lock = false;
            }
        })
    }
 })

代码：

1用JS封装一个ajax函数

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