ajax实践

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

• ajax（异步的 javaScript and XML）其中XML是一种数据格式，现在基本采用JSON，采取异步方式进行JS与服务器的数据传输技术。实现在页面不刷新的情况下，前后端数据进行交换。

• 作用：模仿浏览器发出的请求，实现网页的异步加载，局部刷新网页，当在向服务器获取新数据时不需要刷新整个网页，提高用户体验。

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

前后端开发联调需要注意的事项：

• 约定数据：提前和后端约定好数据的类型。
• 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；

后端接口完成前如何 mock 数据：

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

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

var isDataArrive=true;//状态锁  默认现在是有响应数据

if(!isDataArrive){   //在用户点击时，或者做出其他状态时候，判断是不是响应了，没响应，退出
     return;
 }

isDataArrive = true   //当前表示是响应数据状态

isDataArrive = false //发出请求以后，相应了数据以后恢复到默认状态

//例子：
isDataArrive = false  //做完数据处理，响应数据后，恢复到没有响应数据状态
var isDataArrive=true;//状态锁  默认现在是有响应数据
var btn=document.querySelector('#btn')
var pageIndex=3;

 btn.addEventListener('click', function(e){
  e.preventDefault()
if(!isDataArrive){   //判断是不是响应了，没响应，退出
  return;
 }
 var xhr = new XMLHttpRequest()
 xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
       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)
         }
         content.appendChild(fragment)
         pageIndex = pageIndex + 5
     }else{
         console.log('出错了')
     }
     isDataArrive = true   //当前表示是响应数据状态
   }
}
  xhr.open('get', '/loadMore?index='+pageIndex+'&length=5', true)
  xhr.send()
  isDataArrive = false  //做完数据处理，响应数据后，恢复到没有响应数据状态
  })

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

（。。。。。。。。。。。。。。。。 我做是做好了，为什么有的同学可以上传到github上并且能用到加载功能，我就弄不懂了。。。 很多同学都是发出了代码）
题目四 代码链接