信息比較豐富的網站通常會以分頁顯示，在點“下一頁”時，很多網站都采用了動態請求的方式，避免頁面刷新。雖然大家都是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);   }