基于H5的历史改进了Ajax列表请求体验
更多信息网站往往显示在分页。此时，许多站点都使用动态请求来避免页面刷新。尽管每个人都是Ajax，但它可以与一些小细节区别开来。一个小细节是它是否能支持浏览器的后退和前进键。本文讨论了两种允许浏览器向后移动和向前移动的方法，或者使Ajax像重定向到新页面一样。数据分页显示的实现，最简单的方法是在URL添加页面时数，当让网页重定向到网页1的新地址。例如，这是Sina的新闻网络，通过改变网址：index_1，index_2，index_3…但是如果这个列表是不是网页的主要部分，或其他部分的页面有很多图片等丰富的元素，如导航是一个滑块，然后用这种方式，整个页面会闪烁得厉害，和大量的资源加载。所以使用Ajax请求来动态改变DOM。
但请求并不是普通的动态变化。因此，用户或前几页要返回到上一页，返回键可能指向浏览器，以便返回时间不返回原始视图页面，而是在Web站点上。例如，这是CCTV的新闻网络。让我们从Ajax请求开始，并在完整的案例中分析它。
做一个演示
首先，写一个请求：
当前页
var属性页索引= 0；
请求/函数
功能makerequest（PageIndex）{
无功要求=新的XMLHttpRequest（）；
request.onreadystatechange =状态变化；
来自两个参数的请求，一个是当前页面，一个是页面号数据。
Request.open（
Request.send（空）；
功能状态变化（）{
一个状态码为4，表示加载，请求完成。
如果（request.readystate！= 4）{
返回；
}
请求/成功
如果（request.status request.status request.status | | < 300 > = 200 = = = 304）{
VAR的书= JSON.parse（请求。responseText）；
RenderPage（书）；
}
}
}
获取数据并呈现它：
功能renderpage（书）{
无功bookhtml =
+
+
图书名称+
作者+
版本+
；
为（图书中的var I）{
= bookhtml
+
+书{我}。book_name +++
++书籍{作者} +++
++{ +++
；
}
= bookhtml ；
= bookhtml
+
；
无功部分= document.createelement（节）；
section.innerhtml = bookhtml；
document.getelementbyid（书），AppendChild（部分）；
}
这是一个基本的Ajax请求，然后是响应按钮：
功能：（）{
1页索引
页索引+ +；
重新发出请求和页面加载
MakeRequest（页索引）；
}
在这种情况下，如果您不做任何事情，就不能发挥浏览器返回和转发按钮的作用。
如果你可以检查用户的前进和后退按钮，你可以做一些articles.h5是这样一个事件window.onpopstate此外，触发事件，当用户点击两个按钮，但它是不够的光检测到这一事件。它还需要传递一些参数，也就是说，当我们返回到该页之前，我们需要知道那页的页索引。通过历史的pushstate方法，可以达到这一目的。pushstate（PageIndex）保存当前页的页索引，然后再回到这个页面来获得当前页的索引，pushstate参数如下：
复制代码代码如下所示：
window.history.pushstate（状态、标题、URL）；
其中，状态是一个对象{ }，用于存储当前页的数据。职称很少影响。URL是当前页的URL。一旦URL被改变，浏览器地址栏的地址也会改变。
所以，在里面的小功能请求的数据，加上一步操作：
功能：（）{
页索引+ +；
MakeRequest（页索引）；
当前页数据存储
window.history.pushstate（{页：PageIndex }，null，窗口位置。href）；
}
然后听popstate事件：
如果用户单击后退/前进按钮或
Window.addEventListener（popstate
var页面= 0；
第一页/没有pushstate，所以当你返回到第一页并不是数据，所以做判断
如果（event.state！= NULL）{
页= event.state.page；
}
makerequest（页）；
一页页索引=；
}）；
状态数据通过事件，可以获得当前页的索引。
但是，在第二页刷新页面时，如果出现无序，仍然存在问题：第一，指向第二页，然后刷新页面，第一页，然后，第二页，问题返回，显示或第二页，第一页不需要。当它再次返回到第一页时：
从工具栏上的权利，你可以发现，第一回获得当前页的索引仍然是1。在这种情况下，我们需要对历史进行分析的模型，如下图所示：
为了理解历史的运行，浏览器有一个队列来存储访问记录，包括每个访问的URL和状态数据。当这一点被执行，pushstate插入，和一个元素插入到队列。同时，该元素的URL和状态数据通过pushstate操作记录，可以在这里看到，pushstate运行最重要的功能是将元素插入到历史队列，这样浏览器的后退按钮不是灰库的状态，第二存储的数据。当点回来，队头指针回到页面= 0的位置，和点了点页面= 1的位置。
如果页面在页面= 1的位置刷新，则该模型如下所示：
当第二步刷新，页面的页索引恢复为默认值0，所以为0页，第一页上的数据显示，但使用的历史队列没有改变。然后，当我再次点击发送，我推一个元素到队列。有两页索引1元素在队列中，所以它回去两次回到页面= 0，这是障碍以上。
根据上述分析，这种实现是有问题的。一旦用户在页面= 0的位置刷新页面，则需要返回一个多返回按钮才能返回原始页面。
所以我们需要更新当前页面的状态数据刷新时，更换队列头指针与replacestate，即数据、当前页的数据。方法是替换页时，初始化。
window.history.replacestate（{页：页索引 / * 0 *这里