进阶12 ajax实践

1. ajax 是什么？有什么作用？

Ajax（['eidʒæks]）是Asynchronous JavaScript and XML的缩写，从标题里就能看出，是异步的JS和XML，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。因为传统的HTTP 请求流程大概如下：

1. 浏览器向服务器发送请求
2. 服务器根据浏览器传来数据生成response
3. 服务器把response返回给浏览器
4. 浏览器刷新整个页面显示最新数据

这个过程是同步的，顺序执行。如果网络传输速率过慢或者其他情况导致，用户长时间等待请求结果，而浏览器是卡死状态，那么体验就很糟糕。

另外如果当前页面DOM结构特别复杂，内容繁多，而需要请求的仅仅是一小段数据，却要大费周章，数据到来后总是要重新渲染页面。

而使用AJAX技术，通过JavaScript操作浏览器提供的XMLHttpRequest 对象，去发送一个Ajax请求，并接收服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了。

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

• 前后端联调时需要沟通定义接口：

1. 约定好请求方法
2. 请求路径(URL)
3. 前端需要传递什么样的参数（入参）
4. 数据格式（回参，包括可能的状态码）

• mock数据：

在后端接口完成之前，前端通过mock数据，能够在不依赖后端环境的情况下进行开发，只要约定好接口。

常用的手段就是搭建本地mock server，如果装了nodejs，就可以用npm 下载安装了，然后只需要在本地的mock server中实现请求路由映射即可，如果使用js语言，也就是 router.js，可以按照约定在里面模拟假数据，以相应前端浏览器的请求。

除此之外，还可以使用线上的模拟数据生成服务，比如Easy Mock：
http://www.easy-mock.com 注册 打开任意一个项目 创建接口 使用接口（AJAX、JSONP都行，具体看文档）
xhr.open('get', 'http://www.easy-mock.com/mock/59b95cf3e0dc663341a8fa20/example/loadMore', true)

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

首先这样做的目的，是因为在真实的网络环境中，传输速率必然是没有用户鼠标双击按钮更快，在当前请求未到来之前，用户的习惯总爱再次点击按钮，这会导致浏览器重复发送请求，结果对于用户来说，占用更多带宽资源还好说，如果是网购付款按钮呢，另外对于服务器端来说，也会带来更大的运行压力。

一个典型的例子就是上大学的时候，到了选修课端口开放的时候，大家齐刷刷早起守着电脑，不停的刷新，结果平时很流畅的教务网站，到了选（抢）课的时候，变得异常卡顿，F5都磨烂了，也刷新不出来。其实这个时候服务器内心是崩溃的。

回到正题，阻止用户重复点击，一个简单的做法是，令用户的点击变得无效， 使用状态锁，请求未处理完成之前，拒绝再次请求，而请求到了并处理完之后，恢复到可请求状态。

具体的代码演示，在下文中，将会提到。

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

本地模拟成功：

代码地址，注意！想要看到效果，需要把 index.html 和 router.js 分别保存在同一个文件夹下，然后终端里使用server mock 开启mock。

5. 对AJAX进行封装，这是必须的(以get为例)

var btn = document.querySelector('#load-more')
    var ct = document.querySelector('#ct')
    var pageIndex = 0
    var isDataArrive = true //设计个状态锁

    btn.addEventListener('click', function(e){
      e.preventDefault() //防止点击 a 链接页面跳到顶部 或者href里 javascript:void(0)
      if(!isDataArrive){ // 1. 点击按钮后，一开始先判断，如果状态是false，数据还没到来，就直接忽略
        return;
      }
      loadData(function(news){  //loadData(renderPage) // 执行loadData时，数据到了，执行callback，也就是传入的函数 renderPage
        renderPage(news)
        pageIndex += 5
        isDataArrive = true
      })
      isDataArrive = false
    })

    function loadData(callback){
      ajax({
        type: 'get',
        url: 'loadMore',
        data: {
          index: pageIndex,
          length: 5 
        },
        onSuccess: callback,
        onError: function(){
          console.log('error')
        }
      })
    }

    function renderPage(news){
      var fragment = document.createDocumentFragment() 
      for( var i = 0; i < news.length; i++){
        var node = document.createElement('li')
        node.innerText = news[i]
        fragment.appendChild(node)
      }
      ct.appendChild(fragment)
    }

    function ajax(options){
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
          if(xhr.status === 200 || xhr.status === 304){
            var results = JSON.parse(xhr.responseText) 
            options.onSuccess(results) //相当于callback(results)
          }else{
          options.onError()
          }
        }
      }
      var query = '?'
      for(key in options.data){
        query += key + '=' + options.data[key] + '&'
      }
      query = query.substr(0, query.length-1) //舍去最后一个&，截取出来
      xhr.open(options.type, options.url + query, true)
      if(type === 'post'){
        xhr.send(dataStr)
      }else{
        xhr.send()
      }
  }