如何使用 ajax 无刷新既改变网页地址(url)又能实现前进后退改变内容？

Question

假设现在有一个网页如下：

<div class="nav">

    <ul>

        <li data-page-name="a-page" data-page-href="a-page.html">

         //当点击这个 li 标签时，div#a-page 显示，并在他的子 div.ajax-load-             a-page当中载入 a-page.html。同时 url 改变为 example.com/a-page.html，并且前进后退可用。下同。

        <li data-page-name="b-page" data-page-href="b-page.html">

        //....

    </ul>

</div>

<div id="a-page">

    <div class="ajax-load-a-page">

        //....

    </div>

</div>

<div id="b-page">

    <div class="ajax-load-b-page">

        //....

    </div>

</div>

现在我试用了 pushstate，但是只能改变地址的 url，前进后退也只改变 url 地址，内容没有改变。可能是没有绑定 popstate 的缘故，但不知道这部分的绑定代码应该怎么写？

补充一下，不必考虑IE