AJAX中的Back Button/Bookmarking问题和Nikhil Kothari的Atlas解决方案

传统的web应用一般含有多个页面,用户在浏览时,浏览器地址框里的地址会随着页面的变动而更新。用户可以bookmark页面把网页地址收藏,之后通过收藏夹里的地址回到同个页面。用户在网站浏览时,也可以使用浏览器的向前/向后按钮来回访问多个网页。

然而,AJAX的web应用存在于单个页面中。用户在操作AJAX应用时,页面的内容会变,但浏览器地址框里的地址是不变的,用户也无法使用向前/向后按钮来往返于当前页面的各个状态。很明显,从表面上看,AJAX应用好像破坏了World Wide Web的规矩 ── 一个URL代表一个资源。虽然,从本质上来说,AJAX应用是个web应用,而不是普通的web文件系统,不支持bookmarking和向前/向后按钮也情有可原。但如果用户的期望有所不同,或者需要对这些中间状态bookmark或者需要能够在这些状态间往返,那么这就是个需要解决的问题。

很明显,要支持bookmarking中间状态,那么AJAX必须能改变这些中间状态对应的浏览器地址框里的地址的值,但又不能改变AJAX应用对应的页面的URL,解决方案是利用客户端的anchor hash ,即在URL上添加或改变#后面的东西。这样,

http://www.dogwood.com.cn#abc
http://www.dogwood.com.cn#english

从客户端来看,这是2个可以bookmark的不同的地址,但对服务器来说,却是同样的请求。#是个客户端的东西,在服务器端得不到#后面的值,因为浏览器是不把#后面这部分传回服务器的。

在FireFox里,用脚本改变#后面的值就会往浏览器的历史里添加一项,这样AJAX应用在用户做了什么操作改变页面状态时,如果同时改变这个#值的话,用户就能通过Back Button回到早先的#值。假如这个值足够详细,那么AJAX应用就能凭这个值返回对应这个值的页面状态。当然你需要一个机制来检测当前页面的#值是否改变了,常用的做法是用一个timer来做。可惜,在IE里,光是改变#值是无法生成新的历史项的,解决办法是在页面内嵌一个IFRAME,在用户做了什么操作改变页面状态时,改变这个IFRAME的src属性,这样就能生成一个新的历史项。用户按Back Button时,AJAX应用就可以通过查看这个src属性来返回对应的页面状态。

常见的解决方案都要求你写不少的Javascript,譬如在dojo工具包里 (参考 http://dojotoolkit.org/intro_to_dojo_io.html),

var sampleFormNode = document.getElementById("formToSubmit");

dojo.io.bind({
url: "http://foo.bar.com/sampleData.js",
load: function(type, evaldObj){
// hide the form when we hear back that it submitted successfully
sampleFormNode.style.display = "none"
},
backButton: function(){
//在这里,你处理用户点击Back Button后的情形
// ...and then when the user hits "back", re-show the form
sampleFormNode.style.display = ""
},
forwardButton: function(){
//在这里,你处理用户点击Forward Button后的情形
// and if they hit "forward" before making another request, this
// happens:
sampleFormNode.style.display = "none" // we don't re-submit
},
formNode: sampleFormNode
});

微软ASP.NET产品组的架构师Nikhil Kothari提供了一个服务器端的基于事件的Atlas原型,

Back Button Support for Atlas UpdatePanels
http://www.nikhilk.net/Entry.aspx?id=139

<script runat="server">
private void OnContentListSelectedIndexChanged(object sender, EventArgs e) {
.....
//状态改变,添加历史
history.AddEntry(contentList.SelectedIndex.ToString());
.....
}

private void OnHistoryNavigate(object sender, HistoryEventArgs e) {
//导航改变,调出数据对应数据
.....
//更新页面
mainUP.Update();
listUP.Update();
}
</script>

把客户端浏览器历史的管理封装在服务器端的API里,这样你作为开发人员需要做的是决定用什么信息做导航之用,然后在导航改变之后怎么根据这个信息来调出对应的状态,做法非常干净。

在ASP.NET 1.*的postback模型下,要允许bookmark很难,因为你bookmark的是页面的初始状态。但如果用Atlas以及Nikhil Kothari的思路(或者将来Atlas里的built-in支持)的话,这个问题解决起来就容易多了。

其他一些参考连接:

posted on 2006-09-13 09:41 海盗 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/Grisson/archive/2006/09/13/502773.html

AJAX中的Back Button/Bookmarking问题和Nikhil Kothari的Atlas解决方案相关推荐

  1. AJAX中的利用POST传送数据

    这里我只写关键语句,其它的就和GET方法一样的,如果不请楚,请看我前面的文章:Ajax的JSP示例以及相关知识介绍,适合于入门者 function doMyPost() {     //这里一定要加两 ...

  2. ASP.NET 2.0 AJAX中Webservice调用方法示例

    ASP.NET 2.0 AJAX中能够在客户端js中很方便地调用服务器Webservice,以下为一些调用的示例.笔者安装的ASP.NET 2.0 AJAX 版本为AJAX November CTP. ...

  3. 记得ajax中要带上AntiForgeryToken防止CSRF攻击

    经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击 在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可. Html.A ...

  4. 现存问题以及解决方案:在ASP.NET AJAX中从客户端向服务器端传送DataTable

    摘要 在<现存问题以及解决方案:在ASP.NET AJAX客户端得到服务器端的DataTable>这篇文章中,我给出了一个在ASP.NET AJAX中从服务器端得到客户端DataTable ...

  5. 深入剖析微软ASP.NET Ajax中的数据绑定构架下篇之二

    四.例2-数据库绑定 现在,我们来讨论更为复杂的数据库绑定的例子.根据我们前面的讨论,我们找到了使用DataSource的典型场所:在前面的例1中,我们使用了一种内存数据来模拟有状态的web服务.但是 ...

  6. ajax中加上AntiForgeryToken防止CSRF攻击

    经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击 在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可. Html.A ...

  7. AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序

    AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 测试代码: [c-sharp] view plaincopy 测试代码如下: <%@ Page Lang ...

  8. Ajax中的JSON

    Ajax中的JSON 构建JSON格式数据 <!DOCTYPE html> <html lang="en"><head><meta cha ...

  9. jquery ajax传递data,基于jquery ajax中的data传递参数与后台工作的流程

    基于jquery ajax中的data传递参数与后台工作的流程 2014-11-12    分类: php学习,前端资源,学习jquery基础 首先列出实例代码 js代码: $('button').c ...

最新文章

  1. 从39个kaggle竞赛中总结出来的图像分割的Tips和Tricks(附资源)
  2. java.net.SocketTimeoutException: Read timed out 异常排查
  3. 【机器学习基础】机器学习模型的度量选择(下)
  4. IO对象不可以复制或者赋值
  5. Java基本类型与运算
  6. spring cloud netflix
  7. mysql 记录所有操作_mysql 的一些记录的操作
  8. java 异常 抛 效率_一文带你理清Java异常体系,提高开发效率
  9. c# UDP(udpclient)客户端和服务端有何区别?
  10. (0.2.6)Mysql安装——编译安装
  11. Java 文件高效写入方法
  12. html5页面资源预加载(Link prefetch)
  13. python双向链表以及双向循环链表
  14. matlab已知热敏电阻数据,Matlab在热敏电阻特性测量实验中的应用
  15. 两万字详解自动驾驶开发工具链的现状与趋势
  16. 假设检验与常见的统计检验方法
  17. PHP实现手机号或身份证号中间几位变*
  18. 偏移出来的数据不准_cad偏移(cad偏移数据和输入的数据不准确)
  19. uniapp隐藏原生导航栏
  20. 学计算机的自述,计算机的自述作文范文

热门文章

  1. 【必看】Linux 系统的备份恢复
  2. 【分享】20道Oracle运维常见面试题
  3. KubeVela 正式开源:一个高可扩展的云原生应用平台与核心引擎
  4. Serverless 与容器决战在即?有了弹性伸缩就不一样了
  5. 阿里开源富容器引擎 PouchContainer 的 network 连接机制
  6. 手机html图片模糊,css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnose...
  7. 在浏览器中内嵌word_关于项目浏览器内核的选取解读
  8. java怎么给类中的私有变量赋值_Java学习笔记分享 如何理解接口抽象类和关键字...
  9. python 回声程序_一种回声消除系统及回音消除方法与流程
  10. jq 通过标签名称获取标签_怎样利用tag标签来获取长尾关键词排名