前言
Web2.0发展的迅猛，个人觉得很大程度依托于Ajax的出现。然而，我们分享一个网页给好友一般都是直接把URL复制给他，但是Ajax的特点导致了同样一个URL，有可能你跟你的好友看到的内容是完全不一样的，这个真的很头疼。
于是我发现了如果从URL的HASH入手（也就是URL后边#的部分）可以跟踪这个浏览记录的历史，在此记录一下。
Ajax
既然出现了Ajax这个词，我想就稍微解释一下。
Ajax:“Asynchronous JavaScript and XML”（异步JavaScript和XML)。
有点抽象！
想想一般访问一个网站是通过什么方式，输入地址，浏览器向服务器请求页面，浏览器返回“整个”页面内容渲染，结束。
注意哦，上边强调的是整个页面内容！
然后往往，一个交互性强的Web应用，如果采用上述做法那每次操作都要等待整个页面的更新，交互性大大下降，为了模拟桌面程序那样的无缝交互，我们需要用到js，而为了去服务器获取新的数据，我们需要背后偷偷地去请求数据，这里就是“异步”！
这样的方式获得数据之后，可以通过回调函数来更新页面信息，从而达到了局部刷新！给用户一种无缝跳转的感觉。
为什么Ajax无法跟踪浏览历史？
我们假设，仅仅是假设：输入一个URL访问某网站时，浏览器背后就会记录你当前访问的URL，紧接着从当前页面点击一个链接跳转到新页面，浏览器就会把刚刚访问的那个URL记录在历史里边，这样你点“后退”按钮时，它就知道要回到刚刚那个页面。想必这样的过程应该是挺容易理解的。
那么Ajax为什么不能跟踪呢？
Ajax请求往往是你页面的某个按钮触发了点击事件（可以是其他事件！）而发送的。
如果你在当前页面点击了某个按钮触发了Ajax请求发送，然后看到了一副风景画，突然觉得很有feel，把地址复制给好友叫他去看。这时，他访问了这个地址，发现看到的不是你看到的内容，因为他没有去点击那个按钮，导致Ajax请求没有被发送。
所以我们需要寻求一种方法去跟踪历史。
Iframe跟踪历史
想必大家都知道iframe就是页面上一个新的小页面，在iframe上跳转是可以记录到当前页面的浏览历史的。
大家可以去看看QQ邮箱里边的结构。用户在做任意操作，均为局部刷新（只刷新iframe内容），并且用户可以使用后退按钮回到上个操作！
从URL入手
回到主题，那我就是喜欢Ajax的话应该怎么做？
既然我想要复制URL分享当前看到的东西，那我肯定要从URL去入手，如果说我将location.href（也就是当前的url）改变了，当前页面就会跳转到改变后的URL。
那么URL怎么改变，当前页才不会刷新呢？
有用过锚的人就知道，URL后边的#部分就是hash部分，改变这段值页面是不会跳转到新页面也不会刷新。
如果说我们发送一个Ajax请求后，自动改变当前的URL的hash部分。
这样把地址复制给他人的时候，页面可以拿到该hash然后根据其值发送对应的Ajax请求并做同样地处理，这样就可以跟踪浏览历史了。
修改hash以及响应hash改变的事件
除了IE8以下的IE系列外，其他浏览器均支持window.onhashchange
来监听URL的hash变化，至于如何修改hash一会给代码就知道。
那么为了兼容IE8以下版本的IE，需要用定时器来监听URL上的hash变化，当然会消耗性能了，没办法，天朝底下到处都用万恶的IE，你得为他们考虑可用性。
下边贴个代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta charset="gbk">
</head>
<body>
<button onclick="changeHash()">Click Me</button>
<script language="javascript" src="hashchange.js"></script>
</body>
</html>
/**
* hashchange.js
* @author raphealguo(raphealguo@qq.com)
* @date 2011/08/09
*/
var nextHash = 0, //下一个hash值，每次会递增
curHash = '';//记录当前hash
if ("onhashchange" in window) {//IE8以下版本的浏览器不支持此属性
alert("The browser supports the hashchange event!");
}
function getHash(){//获取hash
var h = location.hash;
if (!h){
return '';
}else{
return location.hash;
}
}
function changeHash(){//修改hash 每次点击按钮触发hash变化
/*
发送Ajax请求时，可以修改相应的hash值，
只要在页面load完之后获取hash值并发送对应的Ajax请求并更新页面，
这样就可以达到用Ajax也能跟踪浏览历史的目的
*/
location.hash = "#" + nextHash++;
}
function changeHashCallBack(){//hash变化之后，回调函数会被触发
var hash = getHash();
if (curHash != hash){
curHash = hash;
alert("哈希更改 :" + hash);
}
}
if (document.all && //辨别IE
!document.documentMode//IE8才有documentMode
){
/* 低于IE8的IE系列采用定时器监听 */
setInterval(changeHashCallBack, 100);
alert('<IE8');
}else{
window.onhashchange = changeHashCallBack;
}
可以看到，当按钮点击时， 仅仅触发的是getHash函数，而changeHashCallBack是通过监听/window.onhashchange
的机制来触发的。
另外jQuery的一个插件：jQuery HashChange
也是可以支持hashChange，但它没有使用原生态的window.onhashchange
，火狐等浏览器底下也是采用定时器监听的办法去监控hash是否改变，这点个人认为不好，并且此插件还得依托jQuery，真的还不如模仿上边的代码，自己写一下。
本篇总结
身处在Web前端，就应该让用户体验更强更好的交互，当然了这里边包括了很多很多方面：
可用性、方便性（本文写的就是我认为的其中一种方便性）、性能（不至于搞垮浏览器崩溃）、安全性、人性化（考虑残疾人群）……
身为Web前端开发的你是否经常考虑这些问题！？
分享到：
相关推荐
本文将详细介绍如何使用JavaScript来实现AJAX支持的浏览器后退和前进功能，以提供更流畅的导航体验。 首先，理解浏览器的后退和前进机制是关键。浏览器使用历史记录栈来跟踪用户的浏览历史，每次用户访问新页面或...
然而，由于AJAX请求不会触发浏览器的前进和后退按钮（历史记录）更新，用户在使用这些功能时可能会遇到问题。本文将深入探讨如何处理AJAX前进后退的问题，主要涉及`hash`技术的应用。 `hash`是URL中的井号(#)后面的...
总之，要实现在使用Ajax时保持浏览器的后退和前进功能，关键在于正确管理历史记录。通过结合`pushState`、`popstate`以及事件监听，我们可以确保用户的导航体验不受影响，同时保持页面的无刷新特性。在实际项目中，...
然而，这也会带来一个问题，即使用Ajax操作后，浏览器的历史记录无法正确处理后退和前进操作。本文将详细介绍如何利用JavaScript中的`history`对象API解决这个问题。 `history`对象提供了`pushState()`和`...
然而，也需要注意处理浏览器的前进后退功能，以及更新SEO友好的页面内容。 ### 8. 同步与异步 同步Ajax会导致浏览器阻塞，直到请求完成，因此通常使用异步模式。但某些情况下，如初始化数据加载，同步可能更有利。...
然而，传统的浏览器历史记录机制并不支持AJAX请求导致的局部页面更新，这使得用户在使用前进和后退按钮时可能会遇到问题。为了解决这个问题，开发人员引入了“保存浏览器历史记录”的概念，如“RSH（Replace State ...
当使用Ajax加载新内容时，浏览器的历史记录不会自动更新，导致前进/后退功能失效。为此，可以使用`pushState`和`replaceState`方法来自定义历史记录： ```javascript // 添加新的历史记录 history.pushState({ data...
在这个给定的文件信息中，主要介绍了如何使用HTML5的History API来解决使用AJAX进行页面动态数据加载时遇到的浏览器不支持“前进”和“后退”按钮操作的问题。AJAX技术虽然能够提供无刷新的数据交换和页面更新，但其...
3. **历史记录管理复杂**：传统的浏览器前进后退功能可能受到影响。 #### 发展历程 AJAX技术的起源可以追溯到1998年左右，当时微软的Outlook Web Access团队开发出了XMLHttpRequest组件，该组件后来被集成到了...
然而，使用AJAX进行页面更新时，用户通常会遇到无法正常使用浏览器的前进和后退按钮的问题。为了改善用户体验，HTML5引入了一个新的API——History API，它包括`history.pushState`和`history.replaceState`两个方法...
3. **前进/后退按钮**：如果处理不当，用户可能无法正确使用浏览器的历史记录功能。 在实际应用中，为了简化Ajax的开发，我们可以使用jQuery、axios、fetch等库或API。例如，jQuery的$.ajax()或$.getJSON()方法提供...
本例将介绍如何在使用jQuery进行AJAX内容加载时，让浏览器的前进和后退按钮能够正常使用。 首先需要了解的是，在传统页面跳转中，浏览器会保存浏览历史记录，用户可以通过前进或后退按钮返回到先前访问的页面。当...
- **不更新浏览器历史**：页面不会随着Ajax请求更新，无法通过前进/后退按钮导航。 ### 6. 使用jQuery简化Ajax jQuery提供了更加简洁的Ajax方法，如`$.ajax()`、`$.get()`和`$.post()`： ```javascript $.ajax({ ...
但在使用AJAX的网页中，由于页面内容是动态加载的，URL可能不会随着用户交互而改变，导致前进和后退功能可能无法正确反映用户在页面内的实际浏览历史。 为了解决这个问题，我们可以利用URI中的片段标识符（fragment...
5. 如此一来，用户点击浏览器的前进或后退按钮时，浏览器能够从历史记录中获取到带hash值的URL，并触发对应的事件处理函数，进而调用AJAX请求，并更新页面内容。 通过上述方法，可以使得浏览器能够记住AJAX请求，并...
3. 用户历史记录和前进/后退功能：Ajax页面的导航可能会影响浏览器的前进和后退按钮功能，需要特殊处理。 4. 首次加载问题：首次访问页面的用户可能需要等待所有内容加载完毕，才能看到完整的页面。 【使用建议】 ...
因为Ajax请求不会导致整个页面刷新，所以传统的前进/后退按钮可能无法正常工作。开发者需要通过编程方式管理浏览器的历史状态，例如使用`history.pushState()`或`history.replaceState()`方法。 2. **相关技术点** ...
3. **历史记录和前进后退**：默认情况下，使用Ajax加载的内容不会出现在浏览器的历史记录中，影响前进后退功能。 **五、Ajax进阶** 1. **jQuery和Ajax库**：jQuery简化了Ajax的使用，提供了一系列易于使用的API。...