Ajax与HTML5 history pushState/replaceState实例

╰+哭是因爲堅強的太久メ 2022-08-09 00:56 100阅读 0赞

### 一、本文就是个实例展示 ###

三点：

1.  我就TM想找个例子，知道如何个使用，使用语法什么的滚粗
2.  跟搜索引擎搞基
3.  自己备忘

精力总是有限的，昨天一冲动，在上海浦东外环之外订了个90米的房子，要借钱筹首付、贷款和领证什么的。HTML5 history相关知识点啪啦啪啦讲起来也是一条又臭又长的裹脚布，精气神实在不够用，这里，直接一个实例。

### 二、ajax载入与浏览器历史的前进与后退 ###

众所周知，Ajax可以实现页面的无刷新操作——优点；但是，也会造成另外的问题，无法前进与后退！曾几何时，Gmail似乎借助iframe搞定，如今，HTML5让事情变得如同过家家般简单。

当执行Ajax操作的时候，往浏览器`history`中塞入一个地址（使用`pushState`）（这是无刷新的）；于是，返回的时候，通过URL或其他传参，我们就可以还原到Ajax之前的模样。

本demo所展示的就是ajax的内容载入与地址栏的前进与后退，典型应用，对于熟悉相关知识点很有帮助。

### 三、demo实例 ###

您可以狠狠地点击这里：[HTML5 history API与ajax分页实例][HTML5 history API_ajax]

demo结构大致如下：左边导航菜单，右侧详细内容。  
![demo页面大致结构][demo]

如果我们想偷懒，导航直接URL地址，点击刷新得了。但头尾内容都是一样的，刷新总显得浪费。从体验上讲，点击导航，右侧Ajax局部刷新是更优的策略。

Ajax局部刷新小菜，稍有经验都能轻松应对。现在如果提出如下需求：每次ajax刷新就如果页面刷新一样，可以后退查看之前内容，怎么破？

我的策略如下：

*  每次**手动**点击左侧的菜单，我将Ajax地址的查询内容(`?`后面的)附在demo HTML页面地址后面，使用`history.pushState`塞到浏览器历史中。
 *  浏览器的前进与后退，会触发`window.onpopstate`事件，通过绑定`popstate`事件，就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入，实现Ajax的前进与后退效果。
 *  页面首次载入的时候，如果没有查询地址、或查询地址不匹配，则使用第一个菜单的Ajax地址的查询内容，并使用`history.replaceState`更改当前的浏览器历史，然后触发Ajax操作。

于是，你会看到：

*  页面首次载入，虽然我们访问的URL的后缀是光秃秃的`.html`，但是，实际URL最后是：  
    ![首次载入页面的URL][URL]
    
    因为被`history.replaceState`摆了一道。
 *  鼠标点击左边的任意一个菜单，会发现，右侧内容虽然是Ajax载入，但是，页面的URL地址却变了，例如，点击宝山区：  
    ![点击宝山区URL地址变化][URL 1]
    
    因为历史记录被`history.pushState`插了一刀。
 *  此时，我们点击地址栏的后退按钮，就是这个：  
    ![点击后退、查看历史记录][2013-06-19_202121.png]
    
    奇迹般的，页面无刷新的，又回到了浦东菜单：  
    ![回到了浦东，同时出现了历史前进按钮][2013-06-19_202359.png]
    
    因为`window.onpopstate`让菊花刀又拔了出来。

### 四、其它点什么 ###

*  **history.pushState**  
    菊花插一刀之意，用法举例：
    
        history.pushState({}, "页面标题", "xxx.html");
 *  **history.pushStatehistory.replaceState**  
    换把菊花刀之意，用法举例：
    
        history.replaceState(null, "页面标题", "xxx.html");
 *  **window.onpopstate**  
    在菊花刀拔插的时候……，用法举例：
    
        window.addEventListener("popstate", function() {
            var currentState = history.state;
            /*
             * 该干嘛干嘛
            */											
        });

浏览器兼容性表：

<table style="font-size:12px; color:rgb(51,51,51); font-family:'Lucida Grande',Verdana,Arial,sans-serif; text-align:justify; background:rgb(160,179,214)"> 
 <tbody> 
  <tr> 
   <th style="border:3px solid rgb(255,255,255); text-align:center; background:rgb(240,243,249)"> Feature</th> 
   <th style="border:3px solid rgb(255,255,255); text-align:center; background:rgb(240,243,249)"> Chrome</th> 
   <th style="border:3px solid rgb(255,255,255); text-align:center; background:rgb(240,243,249)"> Firefox (Gecko)</th> 
   <th style="border:3px solid rgb(255,255,255); text-align:center; background:rgb(240,243,249)"> Internet Explorer</th> 
   <th style="border:3px solid rgb(255,255,255); text-align:center; background:rgb(240,243,249)"> Opera</th> 
   <th style="border:3px solid rgb(255,255,255); text-align:center; background:rgb(240,243,249)"> Safari</th> 
  </tr> 
  <tr> 
   <td style="padding:2px 4px; border:3px solid rgb(255,255,255); background:rgb(249,249,249)"> replaceState, pushState</td> 
   <td style="padding:2px 4px; border:3px solid rgb(255,255,255); background:rgb(249,249,249)"> 5</td> 
   <td style="padding:2px 4px; border:3px solid rgb(255,255,255); background:rgb(249,249,249)"> 4.0 (2.0)</td> 
   <td style="padding:2px 4px; border:3px solid rgb(255,255,255); background:rgb(249,249,249)"> 10</td> 
   <td style="padding:2px 4px; border:3px solid rgb(255,255,255); background:rgb(249,249,249)"> 11.50</td> 
   <td style="padding:2px 4px; border:3px solid rgb(255,255,255); background:rgb(249,249,249)"> 5.0</td> 
  </tr> 
  <tr> 
   <td style="padding:2px 4px; border:3px solid rgb(255,255,255); background:rgb(249,249,249)"> history.state</td> 
   <td style="padding:2px 4px; border:3px solid rgb(255,255,255); background:rgb(249,249,249)"> 18</td> 
   <td style="padding:2px 4px; border:3px solid rgb(255,255,255); background:rgb(249,249,249)"> 4.0 (2.0)</td> 
   <td style="padding:2px 4px; border:3px solid rgb(255,255,255); background:rgb(249,249,249)"> 10</td> 
   <td style="padding:2px 4px; border:3px solid rgb(255,255,255); background:rgb(249,249,249)"> 11.50</td> 
   <td style="padding:2px 4px; border:3px solid rgb(255,255,255); background:rgb(249,249,249)"> 6.0</td> 
  </tr> 
 </tbody> 
</table>

源引：[http://www.zhangxinxu.com/wordpress/?p=3432][http_www.zhangxinxu.com_wordpress_p_3432]

[HTML5 history API_ajax]: http://www.zhangxinxu.com/study/201306/ajax-page-html5-history-api.html
[demo]: /images/20220731/d840a2b16ca94db1b6e069b2d414c5bf.png
[URL]: /images/20220731/bc02b3a5de674f93b4f55dd9e1778d07.png
[URL 1]: /images/20220731/285c40dd33d74a7499413a70a2724961.png
[2013-06-19_202121.png]: /images/20220731/d9a61f7a1caf4f76b777dd2aaf46c8f2.png
[2013-06-19_202359.png]: /images/20220731/1a2d1e300da74c52a92d778f81efd824.png
[http_www.zhangxinxu.com_wordpress_p_3432]: http://www.zhangxinxu.com/wordpress/?p=3432