日夜谈——Ajax

Ajax

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

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

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

ajax的作用

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

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

前后端开发联调注意事项

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

如何mock数据

1. 可以使用sever-mock，mock.js等数据模拟工具。
2. 自己搭建服务器，然后使用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);
    }
  }

2.代码二

mock 成功.png

代码地址

3.代码三

mock 成功2.png

代码地址

版权归饥人谷peter和饥人谷所有，若有转载，请注明来源

感谢吃瓜子的观众：

gaki24