`
liudaoru
  • 浏览: 1575896 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ajax实现“前进”和“后退”功能[z]

阅读更多
From: http://www.ibm.com/developerworks/cn/web/wa-aj-when/index.html?ca=drs-cn&ca=dkw-Ajax
如果站点使用 Ajax 更新的速率过快,用户可能会以为后退和前进按钮以及书签出现了问题。(Flash 站点与纯 Ajax 站点一样,也容易使人产生这种感觉。)用户希望可以单击后退按钮返回上一页或上一个视图。更加不利于用户体验的是,当用户再次单击前进按钮时,他们没有回到刚才查看的那个视图,而是回到了初始页面,就像刷新了 Ajax 站点一样。

如果用户临时加载了一个页面,然后返回到刚才查看的站点,结果发现页面已经变了,那么他们可能会很失望。不幸的是,浏览器很可能将页面加载为初始状态,经常丢失所有的更改。与此类似,如果用户希望与他人分享某个站点的特定视图或页面,或者将一个页面加入书签,他们认为并相信只需要从浏览器复制 URL 并使用即可(目前确实如此)。

如果页面的内容更改过多,使用户感觉像是一个新的页面,那么还不如直接向他们发送一个新页面。但是,如果开发人员确实需要使用 Ajax 更改页面内容,最好使用 Ajax History 工具存储后退和前进按钮以及书签功能。这些工具使用哈希值(例如,“#tab3”)改变 URL,而无需加载一个新页面。当用户单击后退或前进按钮,或者加载一个加入书签的 URL 时,JavaScript 代码查看哈希表并重新生成用户希望的视图。当然,这只对支持 JavaScript 语言的浏览器有用。

分享到:
评论
1 楼 liudaoru 2008-12-26  
解决IE6中history.back()无法返回的问题:
<a href="javascript:void(0)" onclick="history.back();return false;">back</a>
或<a href="javascript:history.back();">back2</a>

相关推荐

    对ajax前进后退的处理

    在Web开发中,AJAX(Asynchronous JavaScript and XML...在提供的`cyzshenzhen-jquery_history_demo-master`压缩包中,可能包含了使用jQuery实现的`hash`管理和AJAX前进后退功能的示例代码,可以作为学习和参考的资源。

    ajax 浏览器后退前进按钮功能实现

    总之,要实现在使用Ajax时保持浏览器的后退和前进功能,关键在于正确管理历史记录。通过结合`pushState`、`popstate`以及事件监听,我们可以确保用户的导航体验不受影响,同时保持页面的无刷新特性。在实际项目中,...

    dhtmlHistory.js实现ajax前进、后退

    dhtmlHistory.js在Firefox下应用是没有问题的,但在ie下会有问题,主要原因是它不能脱离一个服务器环境,需要布置到一个真实的服务器下才能使用: ... C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\...

    如何让浏览器支持jquery ajax load 前进、后退功能

    最后,对于前端开发者来说,理解和掌握浏览器的前进、后退功能与AJAX结合的实现方法,不仅可以提升网站用户体验,还可以在一些特定场景下,如单页应用(SPA),发挥出极大的作用。利用这种方法,即使是在单页应用中...

    AJAX实现分页功能

    通过研究和学习这些代码,初学者可以深入理解如何结合AJAX和GridView来实现高效且用户友好的分页功能。 总的来说,AJAX实现的分页功能使得Web应用能够更加动态和响应式,提高了用户的浏览效率,降低了服务器的压力...

    JS 获取链接(url)参数以及锚链接(anchor)结合富ajax的应用(ajax前进/后退的问题)

    富Ajax应用能够提供更加动态和交互式的用户体验,但同时也需要解决浏览器的前进/后退(History)问题。以下将详细讲解这些概念及其在实际应用中的实现。 首先,让我们了解如何使用JavaScript获取URL的查询参数。...

    ajax实现用户登录注册

    本教程将深入讲解如何使用AJAX实现用户登录和注册功能,这对于初学者来说是一个很好的起点。 首先,我们需要理解AJAX的基本结构。一个基本的AJAX调用通常涉及以下步骤: 1. 创建XMLHttpRequest对象:这是AJAX的...

    全静态html+ajax实现网站的顶和踩功能

    在构建Web应用时,"全静态html+ajax实现网站的顶和踩功能"是一个常见的需求,它可以提升用户体验,使得用户在浏览过程中无需刷新整个页面就能完成互动操作。在这个场景下,我们将深入探讨如何利用HTML、AJAX以及可能...

    Ajax实现自动补全和搜索功能(jsp)

    在提供的资源中,"Ajax实现自动补全和搜索功能步骤.doc"应该包含了上述步骤的详细说明,包括代码示例和实现细节。"自动补全和搜索项目实例.rar"可能是一个完整的项目源码,你可以下载后进行学习和调试。"自动补全....

    ajax+php实现了投票的功能

    在这个基于Ajax和PHP实现的投票功能中,我们探讨的关键知识点主要集中在前端的Ajax技术以及后端的PHP处理。Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术...

    AJAX实现的电子相册功能

    "AJAX实现的电子相册功能" AJAX(Asynchronous JavaScript and XML)...使用AJAX技术可以实现电子相册功能的异步加载,从而提高用户体验和网页的响应速度。同时,AJAX技术也可以减少服务器的负载,提高服务器的性能。

    AJax实现PPT播放

    5. **事件监听与控制**:通过监听用户的键盘、鼠标事件,可以实现前进、后退、暂停/继续等播放控制。 6. **兼容性考虑**:考虑到不同的浏览器对Ajax和CSS3的支持程度不同,开发时需要考虑跨浏览器兼容性问题。 7. ...

    jsp+ajax实现输入框自动搜索

    本文将详细介绍如何使用jsp和ajax技术实现输入框自动搜索功能,类似于百度搜索。 一、标题:jsp+ajax实现输入框自动搜索 该标题表明该技术使用jsp和ajax实现输入框自动搜索功能。 二、描述:类似于百度的搜索一样...

    Ajax实现在线聊天

    在实际项目中,文件名`AjaxChat`可能包含了实现这些功能的相关源代码文件,包括HTML、CSS、JavaScript(可能包含jQuery和Ajax的代码)、Java(Servlets)以及数据库配置和脚本。通过这些文件,开发者可以详细了解并...

    基于jQuery实现图片的前进与后退功能

    在本文中,我们将详细探讨如何利用jQuery库来实现网页中的图片浏览功能,具体包括前进和后退两个操作。这一功能在网页设计中十分常见,能够有效提升用户体验,使得用户能够更加方便快捷地浏览图片集。 首先,了解...

    简单Ajax聊天室 实现聊天功能

    本项目“简单Ajax聊天室 实现聊天功能”利用ASP.NET框架和Ajax技术,构建了一个实时、交互性强的在线聊天平台。在这个聊天室中,用户不仅能发送文字消息,还能调整字体样式、颜色,并发送QQ表情,极大地提升了用户...

    pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

    为了解决这一问题,我们可以通过HTML5提供的history对象的pushState、replaceState方法和onpopstate事件来实现页面的前进后退功能。 首先,pushState和replaceState方法属于history对象,它们允许我们修改浏览器的...

    Ajax实现实时登录验证

    【Ajax实现实时登录验证】是一种前端技术应用,它允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这个实例主要是为初学者提供一个基础的AJAX登录验证教程,通过正则表达式对用户输入的登录...

    dwr实现ajax功能ajax+dwr

    通过DWR,我们可以使用JavaScript直接调用服务器端的Java方法,实现Ajax(Asynchronous JavaScript and XML)的功能,即在后台与服务器交互数据并局部更新网页。 **Ajax**的核心是利用JavaScript进行异步数据请求,...

Global site tag (gtag.js) - Google Analytics