Ajax基础

ajax

• Ajax全称是Asynchronous JavaScript and XML，指的是通过Javascript脚本发起HTTP通信；
• 它可以使用原生的XMLHttpRequest对象向服务器发出HTTP请求，这个请求可以是同步或异步的（一般是异步），建立连接后可以得到服务器的数据，我们就可以利用得到的数据通过JS来更新部分页面而无需对整个页面进行刷新。

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

• 前后端联调需要注意：①确定接口信息；有哪些接口，哪些参数，以什么样的请求等，一般要确定详细的接口文档。②确定要填充的数据，哪里填充图片，哪里填充文本信息等。
• 在后端接口完成前，我们可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常，可以使用Mock.js，它能拦截ajax请求并根据请求中的内容来随机生成符合你要求的假数据，模拟后端环境让你完成对页面和接口的测试。

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

• 自己的想法：依目前所学，只有js能实现；第一反应是点击后我把事件移除，你随便点，等加载完成后我在处理函数中再给它绑事件；或者我再给按钮绑个事件，点击后把自己的class给改掉让ajax不能正常触发，不过改class可能会有改变样式的风险，写样式时可以预先加个比如interrupt的类。
• 网上搜索了一下：自己封装加个比对-如果ajax请求一致的话就不进行提交、提交后把button disable掉、如果点完一个又去点了另外一个的话就abort之前的请求、加个setTimeout+clearTimeOut避免恶意快速点击等。

用js封装了一个 ajax 函数

function ajax(opts){
  var request = new  XMLHttpRequest();
  var str = '';
  for(i in opts.data){
    str += i+'='+opts.data[i]+'&';
  }
  str = str.substr(0, str.length-1); 
  if(opts.type.toLowerCase() === 'get'){
    request.open('GET', opts.url+'?'+str, true);
    request.send();
  }
  if(opt.type.toLowerCase() === 'post'){
    resuest.open('POST', opt.url, true);
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.send(str);
  }
  request.onreadystatechange=function(){
    if(request.readyState==4 && request.status==200){
      var responsetext=JSON.parse(request.responseText);
      opts.success(responsetext);
    }
    if(request.status!==200){
      opts.error();
    }
  }
}
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('出错了')
     }
   })
});