进阶任务12 ajax

1. 题目1： ajax 是什么？有什么作用？
   异步JavaScript和XML ,Asynchronous JavaScript + XML, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object。当使用结合了这些技术的AJAX模型以后， 网页程序能够快速地将渐步更新呈现在用户界面上，不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。
   尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。
2. 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
   前后端开发联调需要注意事项：
   约定数据：有哪些需要传输的数据，数据类型是什么；
   约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
   根据这些约定整理成接口文档

后端接口完成前mock数据：
可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
可以搭建php本地服务器用，php写脚本提供临时数据；
也可使用Mock.js，它能拦截ajax请求并根据请求中的内容来随机生成符合你要求的假数据，模拟后端环境让你完成对页面和接口的测试.

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

btn.addEventListener('click',function(e){
        var xhr = new XMLHttpRequest()
        e.preventDefault()
        if( !isDataArrive){
            return;
        }
            xhr.onload = function(){
            if(xhr.status === 200 || xhr.status === 304){
                var results = JSON.parse(xhr.responseText)
            
                console.log(results)
            var fragment = document.createDocumentFragment()

            for(var i = 0; i < results.length; i++){
                var node = document.createElement('li')
                node.innerText = results[i]
                fragment.appendChild(node)
            }
             ct.appendChild(fragment);
             pageIndex += 5
             
             }else{
                console.log("出错了")
             }
        }  
               isDataArrive = true
    xhr.open('GET','loadmore?index='+pageIndex+'&length=5')
    xhr.send()
    isDataArrive = false

设置一个状态锁，初始状态为false,数据没有到来之前，直接退出函数不执行。数据发送后，把状态改为false，因为这时数据发送还没有到来，当数据到来后，再把状态改过来为true ，继续下一次请求。

4. 实现加载更多的功能，效果范例。代码提交到 github，回复链接到这里
   https://github.com/niusz/loadmore/blob/master/loadmore.html