ajax实践

题目1： ajax 是什么？有什么作用？

• ajax即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术方案）。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。ajax与XMLHttpRequest的关系：使用XMLHttpRequest对象来发送一个Ajax请求。
• 可以和后端交换数据，不用刷新页面，提高用户体验

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

• 前后端联调是一种 真实业务数据 和 本地mock数据 之间来回切换以达到 前后端分离架构 下的不同开发速度时 数据交换 的一种方式方法。在前后端开发时，需要注意：
  • 确定要传输的数据以及数据类型。
  • 确定接口名称、请求和响应的类型格式以及请求的数据中参数的名称、响应的数据的格式。
  • 最后根据以上约定整理出接口文档。
• 后端接口完成之前，前端可以根据接口文档，模拟后端数据验证所写页面的响应和接口是否正常。可以使用server-mock，它能拦截ajax请求并根据请求中的内容来随机生成符合要求的假数据，模拟后端环境来完成对页面和接口的测试。

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

用外部变量锁定

function $(selector){
      return document.querySelectorAll(selector);
    }
var isDataArrive = true;
$('.btn').addEventListener('click', function(){
  if(!isDataArrive){return;}
  else{
    ajax({
       //todo...
       isDataArrive = true; 
    })
    isDataArrive = false;
  }
})

其他方法

题目4：实现加载更多的功能，效果范例374，后端在本地使用server-mock来模拟数据

客户端
服务端

初始页面

点击加载更多

不会直接跳到最后一条新闻