基于h5的history改善ajax列表请求体验

信息比较丰富的网站通常会以分页显示，在点“下一页”时，很多网站都采用了动态请求的方式，避免页面刷新。虽然大家都是ajax，但是从一些小的细节还是 可以区分优劣。一个小的细节是能否支持浏览器“后退”和“前进“键。本文讨论两种方法，让浏览器可以后退和前进，或者说让ajax就像重定向到新页面一样 拥有能够返回到上一页或者前进到下一页。

      数据实现分页显示，最简单的做法是在网址后面加多个page的当数，点“下一页”时，让网页重定向到page+1的新地址。例如新浪的新闻网就 是这么做的，通过改变网址实现：index_1、index_2、index_3……。但是如果这个列表并不是页面的主体部分，或者页面的其它部分有很多 图片等丰富元素，例如导航是一个很大的slider，再使用这样的方式，整个页面会闪烁得厉害，并且很多资源得重新加载。所以使用ajax请求，动态改变 DOM。

      但是普通的动态的请求不会使网址发生变化，用户点了下一页，或者点了第几页，想要返回到上一个页面时，可能会去点浏览器的返回键，这样就导致返回的时候不是返回到原先查看的页面了，而是上一个网址了。例如央视的新闻网就是这样的。下面从ajax请求开始说起，以一个完整的案例进行分析。

      做了一个demo

   首先，写一个请求：

 //当前第几页  var pageIndex = 0;  //请求函数  function makeRequest(pageIndex){    var request = new XMLHttpRequest();    request.onreadystatechange = stateChange;    //请求传两个参数，一个是当前第几页，另一个是每页的数据条数    request.open("GET", "/getBook?page=" + pageIndex + "&limit=4", true);    request.send(null);    function stateChange(){      //状态码为4，表示loaded，请求完成      if(request.readyState !== 4 ){        return;      }      //请求成功      if(request.status >= 200 && request.status < 300 || request.status === 304){        var books = JSON.parse(request.responseText);        renderPage(books);       }    }  }

     拿到数据后进行渲染：

  function renderPage(books){    var bookHtml =       "<table>" +      "  <tr>" +      "    <th>书名</th>" +      "    <th>作者</th>" +      "    <th>版本</th>" +      "  </tr>";    for(var i in books){      bookHtml +=         "<tr>" +        "  <td>" + books[i].book_name + "</td>" +        "  <td>" + books[i].author + "</td>" +        "  <td>" + books[i].edition + "</td>" +        "</tr>";    }    bookHtml += "</table>";    bookHtml +=       "<button>上一页</button>" +       "<button onclick='nextPage();'>下一页</button>";    var section = document.createElement("section");    section.innerHtml = bookHtml;    document.getElementById("book").appendChild(section);   }