ajax实践

ajax 是什么？有什么作用？

• AJAX = 异步 JavaScript 和 XML。
  AJAX 是一种用于创建快速动态网页的技术。
  通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
• 优点：
  更新数据而不需要刷新页面： 它能在不刷新整个页面的前提下与服务器通信维护数据，由于ajax是按照需求请求数据，避免发送那些没有改变的数据。
  异步通信： 它与服务器使用异步的方式通信，不会打断用户的操作（卡死页面）。
  前后端负载平衡： 可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担。
  数据与呈现分离： 利于分工，降低前后耦合。
• 缺点：
  浏览器历史记录的遗失： 在使用AJAX对页面进行改变后，由于并没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。
  AJAX的安全问题： AJAX的出现就像建立起了一直通服务器的另一条通道，容易遭受到一些攻击。

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

• 前后端开发联调需要注意哪些事情:
  约定数据: 后端数据写好,放在模板里,前端可以写页面,互不影响
  约定接口: 请求和响应的格式;接口名称,请求参数,响应

• 后端接口完成前如何mock数据
  mock数据指的是在后端开发没有完成时，前端可以通过mock方法搭建本地服务器，模拟后台数据来实现数据交互的效果。
  可安装xampp在本地搭建(php等)服务器，也可以安装server-mock，这样不需要特地去写一个后台的处理页面文件来访问数据。

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

设置一个状态锁,在触发ajax前是锁定的,之后若重复点击都不会触发ajax,直到代码执行完在接触锁定.

  var isloading = false;  // 设置状态锁，用于是否在加载数据
  btn.addEventListener('click', function(e) {
        e.preventDefault();     //  防止点击 a 链接页面跳到顶部
  }
       if(isLoading) {
          return;                 //  //如果正在请求数据，那这次点击什么都不做
  }

  ajax('/loadMore', {
  idx: curIndex,
  len: len
  }, function(data){
        appendData(data)
        isLoading = false   //数据到来之后 解锁
        curIndex = curIndex + len  //修改序号，下次要数据就从新序号开始要
        console.log(curIndex)
})
  isLoading = true   //发请求之前做个标记加锁

})

实现加载更多的功能，后端在本地使用server-mock来模拟数据

function ajax(opts) {
  var type = opts.type || 'get';
  type = type.toLowerCase() || 'get';
  var url = opts.url || '';
  var  date = opts.date || null;
  var success = opts.success || function(){};
  var error = opts.success || function(){};
  var xhr = window.XMLHttpRequest? new XMLHttpRequest():new     
    
  ActiveXObject('microsoft.XMLHTTP');
  var dateArry = [];
  for(var key in date){
    dateArry.push(key + '=' +date[key]);
  }
  var dateStr = dateArry.join('&');
  if(type === 'get'){
  xhr.open(type,url+'?'+dateStr,true);
  xhr.send();
  }else{
      xhr.open(type,url,true)
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-      诚
      urlencoded;charset=utf-8');
      xhr.send(dateStr)
  }

xhr.onreadystatechange = function(){
if(xhr.readyState === 4  && xhr.status === 200){
    success(xhr.responseText)
}else{
    error();
  }
 }
}

document.querySelector('#btn').addEventListener('click', function(){
ajax({
    url: '/login',   //接口地址
    type: 'get',               // 类型， post 或者 get,
    data: {
        username: 'xiaoming',
        password: 'abcd1234'
    },
     success: function(ret){
        console.log(ret);       // {status: 0}
    },
    error: function(){
       console.log('出错了')
    }
  })
});