AJAX 网页保留浏览器前进后退等功能

在一些AJAX被大量使用的页面，有时都不太敢刷新，因为刷新以后可能看到的是和原来有很大不同的页面。暂不讨论在某些页面内容大量更新的情况下是否该使用AJAX的问题，本文简单说一下保留浏览器前进、后退、刷新等功能。
这里假设一个有两个Tabs的页面，每个Tab中含有大量文字，可能还有图片。如果现在觉得Tab2的内容很好，把它加入收藏夹或发送给朋友。下次通过收藏夹打开或者朋友点开这个链接的时候很有可能看到的是Tab1的内容，然后需要鼠标再次点击Tab2才看到想要看的内容。如果页面逻辑更为复杂，则可能要进行多步操作才能回到希望看的内容，这样的体验不太好。
要使刷新、加入收藏夹等功能正常使用，需要让当前的操作在URI上有所体现。但是改变URI的同时又不能引起页面的刷新，因此可以通过改变URI中的片段(fragment)来实现。例如，点击Tab1后将URI改为http://www.example.com/example.html#tab1，点击Tab2则将URI改为http://www.example.com/example.html#tab2。


代码如下:

function ShowTab1() {
$("#tab2").hide();
$("#tab1").show();
window.location.hash = "#tab1";
};
function ShowTab2() {
$("#tab1").hide();
$("#tab2").show();
window.location.hash = "#tab2";
};

这样做已经使得URI产生了变化，但是无论通过http://www.example.com/example.html#tab1还是http://www.example.com/example.html#tab2访问页面都是显示Tab1的内容，所以还需要在页面载入时读取#后的内容。


代码如下:

$(document).ready(ShowTab());
function ShowTab() {
if (window.location.hash == "#tab2")
ShowTab2();
else
ShowTab1();
}

这样，刷新和加入收藏夹等功能都已经可以使用了，不过前进和后退还是会有麻烦。虽然这两个按钮已经变得可用，但是点击时网页的内容并没有发生变化。我们需要用到body的onhashchange事件。onhashchange事件并不是所有浏览器都支持的，如果要使不支持该事件的浏览器也检测#后内容的变化，可能需要写一个函数定期检测window.location.hash的变化或者自己实现onhashchange事件。
示例代码打包下载 (Visual Studio 2010)

赞 (0)

相关推荐

  • AJAX 常用函数创建XMLHTTP对象，区别IE，Mozilla浏览器

    AJAX 常用函数创建XMLHTTP对象,区别IE,Mozilla浏览器的函数,网上有很多创建XMLHTTP对象,区别IE,Mozilla浏览器的函数,这个比较不错,大家可以直接拿用了 复制代码 代码如下: function getRequest() {          http_request = false;          if (window.XMLHttpRequest) {               //对于Mozilla﹑Netscape﹑Safari等浏览器,创建XMLHt

  • 基于Jquery 解决Ajax请求的页面 浏览器后退前进功能，页面刷新功能实效问题

    需要使用的 jquery.history.js插件 在巨人的肩膀之上,以下前进后退工作基于插件完成! 做了几个兼职,上天帮人完成页面的时候顺便做了一个ajax的请求.发现浏览器的刷新,后退,前进按钮失效.于是乎google了一下.发现了一些解决方法.其中一个jquery.hashchange.js的插件有的时候会失效,有的时候会造成页面多次请求. 换另外一个插件测试下,完美达到我的要求. 总的思路,在url上加上参数,一切工作基于这个参数完成. 复制代码 代码如下: //截取传入字符串中第一次出

  • ajax处理服务器返回的三种数据类型方法

    其原理很简单,结构上基本不变,只是改变处理返回数据的方式. 1.Text/HTML格式 这种返回类型处理很简单,直接就当作字符串用就行了.为了方便使用,封装成如下函数: /** * @function 利用ajax动态交换数据(Text/HTML格式) * @param url 要提交请求的页面 * @param jsonData 要提交的数据,利用Json传递 * @param getMsg 这个函数可以获取到处理后的数据 */ function ajaxText(url,jsonData,g

  • 用Ajax读取XML格式的数据

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html>  <head>  <title>Ajax Hello World</title>  <script type="text/ja

  • AJAX使用post发送数据xml格式接受数据

    注意点: 1. 用POST发送数据,在2号线函数(也是ajax发送数据的函数:ajaxCall)必须加上一句:xmlObject.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 接着使用xmlObject.send(data);发送 2.3号线函数要注意: 1.禁用缓存(建议,不必要):header("Cache-Control:no-cache"); 2

  • JQuery的ajax获取数据后的处理总结(html,xml,json)

    1.html处理比较简单,直接输出即可.一般用$("jb51div").innerHTML等即可 2.json格式数据调用 复制代码 代码如下: $.ajax({ url : "/trundle/RawContentAction.getAjaxContent.act", data : "param1=22", dataType : "json",//这里的dataType就是返回回来的数据格式了html,xml,json ca

  • Jquery Ajax学习实例 向页面发出请求，返回XML格式数据

    Jquery Ajax学习实例 向页面发出请求，返回XML格式数据

    一.AjaxSample.aspx 处理业务数据,产生XML数据,供JqueryRequest.aspx调用,代码如下: 复制代码 代码如下: protected void Page_Load(object sender, EventArgs e) { string uid = Request.QueryString["username"]; string pwd = Request.QueryString["password"]; Response.Content

  • jquery $.ajax()取xml数据的小问题解决方法

    开始的代码如下: 复制代码 代码如下: $.ajax({ type: "get", url: "Database/App_all.xml", dataType: "xml", timeout: 2000, beforeSend: function () {}, success: function (xml) { $(xml).find("app[id='id-1']").find("auther").app

  • 关于jquery ajax 调用带参数的webservice返回XML数据一个小细节

    后来在一个不起眼的小站找到一个帖子,某个人的一个建议提醒了我. 我原来的代码是这样写的: 错误代码 复制代码 代码如下: $.ajax({ type: "post", url: "_service.asmx/getDataFromATable", data:" { tablename: temp }", dataType: "XML" ... WS是这样写的: webservice 复制代码 代码如下: [WebMethod]

  • Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因

    看到别人写的JS,ajax请求地址后加随机参数,比如XXXX?t= + new Date().getTime(). 一开始搞不懂为什么,网上查了资料,原因是防止浏览器缓存. 浏览器为了提高用户访问同一页面的速度,会对页面数据进行缓存.当url请求地址不变时, 有时候会导致浏览器不发送请求,直接从缓存中读取之前的数据. 如果数据改变了,而没加随机数,读取的数据会跟之前一样. 加上随机数,就是欺骗浏览器url改变了,会每次都向服务器发送请求而不去读缓存

随机推荐