Ajax

ajax 是什么?有什么作用?

  • AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求)从服务器获取数据.
    通过JavaScript发送请求、接受服务器传来的数据,然后操作DOM将新数据对网页的某部分进行更新,使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待

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

  • 前后端进行开发前,注意接口的名字,请求的方式,数据的类型
  • 后端接口完成前,前端可以通过MOCKJS等工具模拟数据。

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

  • 可以设置状态锁
    var flag=false;//设置状态锁
    btn.addEventListerner('click',function(){
    if(!flag){
    flag=true;//打开状态锁
    //to do运行代码
    flag=false;//执行完代码,将状态锁关闭
    }
    })
  • 使用计时器
    var oBtn=document.querySelector(".button");
    var clockTime=null;
    oBtn.addEventListener("click",function(){
    if(clockTime){
    clearTimeout(clockTime)
    }
    clockTime=setTimeout(function(){
    //to do
    },5000)
    })

封装一个 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 xml = new XMLHttpRequest;
  xml.onreadystatechange = function(){
    if(xml.readyState == 4 && xml.status == 200){
      var jsonStr = JSON.parse(xml.responseText)
      opts.success(jsonStr);
    }
    if(xml.status == 404){
      opts.error()
    }
  }
  var dataStr = '';
  for(key in opts){
  dataStr += key + '=' + opts.data[key] + "&";    
  };
  dataStr= dataStr.substr(0,dataStr.length-1);
  if(opts.type.toLowerCase == 'post'){
    xml.open(post,opts.url,true);
    xml.setreRequestHeader('Content-type','application-x-www-form-urlencoded');
    xml.send(dataStr);
  }
  if(opts.type.toLowerCase == 'get'){
    xml.open(get,opts.url+'?'+dataStr,true);
    xml.send();
  }
}

你可能感兴趣的