进阶12作业

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

Ajax是 Asynchronous JavaScript and XML 的缩写，这一技术能够向服务器请求额外的数据而无需刷新整个页面,会带来良好的用户体验。
传统的HTTP请求流程大概是这样的:
(1)浏览器向服务器发送请求
(2)服务器根据浏览器传来数据生成response
(3) 服务器把response返回给浏览器
(4) 浏览器刷新整个页面显示最新数据
这个过程是同步的， 顺序执行
AJAX 在浏览器与Web服务器之间使用异步数据传输(HTTP请求)从服务器获取数据
这里的异步是指脱离当前浏览器页面的请求，加载等单独执行，这意味着可以在
不重新加载整个页面的情况下，通过JavaScript发送请求，接受服务器传来的数据，
然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了

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

前后端开发联调需要注意事项:
（1） 约定数据: 有哪些需要传输的数据，数据类型是什么;
（2） 约定接口: 确定接口名称及请求和响应的格式，请求的参数名称,响应的数据格式;
（3） 根据这些约定整理成接口文档
后端接口完成前mock数据:
（1） 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
（2）可以搭建php本地服务器用,php 写脚本提供临时数据;
（3）也可以使用Mock-server, 它能拦截ajax请求并根据请求中的内容来随机生成符合你要求的假数据，模拟后端环境让你完成对页面和接口的测试。

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

用状态锁

举伪代码说明
var isLoading = false;      // 状态锁， 用于判断是否在加载数据
btn.addEventListener('click', function {
    if(isLoading) {
    return              // 如果正在请求数据，那么这次点击什么都不做
    }
    ajax('/loadMore',{
       idx: curIndex,
       len: len
    }, function(data) {
    appendData(data);
    isLoading = false;  // 数据到来之后，解开锁
    curIndex = curIndex + len;
    console.log(curIndex);
    })
    isLoading = true;  // 发送请求之前做个标记加锁
})

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

加载更多.html
router.js