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支持)的话,这个问题解决起来就容易多了。
其他一些参考连接:
转载于:https://www.cnblogs.com/Grisson/archive/2006/09/13/502773.html
AJAX中的Back Button/Bookmarking问题和Nikhil Kothari的Atlas解决方案相关推荐
- AJAX中的利用POST传送数据
这里我只写关键语句,其它的就和GET方法一样的,如果不请楚,请看我前面的文章:Ajax的JSP示例以及相关知识介绍,适合于入门者 function doMyPost() { //这里一定要加两 ...
- ASP.NET 2.0 AJAX中Webservice调用方法示例
ASP.NET 2.0 AJAX中能够在客户端js中很方便地调用服务器Webservice,以下为一些调用的示例.笔者安装的ASP.NET 2.0 AJAX 版本为AJAX November CTP. ...
- 记得ajax中要带上AntiForgeryToken防止CSRF攻击
经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击 在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可. Html.A ...
- 现存问题以及解决方案:在ASP.NET AJAX中从客户端向服务器端传送DataTable
摘要 在<现存问题以及解决方案:在ASP.NET AJAX客户端得到服务器端的DataTable>这篇文章中,我给出了一个在ASP.NET AJAX中从服务器端得到客户端DataTable ...
- 深入剖析微软ASP.NET Ajax中的数据绑定构架下篇之二
四.例2-数据库绑定 现在,我们来讨论更为复杂的数据库绑定的例子.根据我们前面的讨论,我们找到了使用DataSource的典型场所:在前面的例1中,我们使用了一种内存数据来模拟有状态的web服务.但是 ...
- ajax中加上AntiForgeryToken防止CSRF攻击
经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击 在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可. Html.A ...
- AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序
AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 测试代码: [c-sharp] view plaincopy 测试代码如下: <%@ Page Lang ...
- Ajax中的JSON
Ajax中的JSON 构建JSON格式数据 <!DOCTYPE html> <html lang="en"><head><meta cha ...
- jquery ajax传递data,基于jquery ajax中的data传递参数与后台工作的流程
基于jquery ajax中的data传递参数与后台工作的流程 2014-11-12 分类: php学习,前端资源,学习jquery基础 首先列出实例代码 js代码: $('button').c ...
最新文章
- 从39个kaggle竞赛中总结出来的图像分割的Tips和Tricks(附资源)
- java.net.SocketTimeoutException: Read timed out 异常排查
- 【机器学习基础】机器学习模型的度量选择(下)
- IO对象不可以复制或者赋值
- Java基本类型与运算
- spring cloud netflix
- mysql 记录所有操作_mysql 的一些记录的操作
- java 异常 抛 效率_一文带你理清Java异常体系,提高开发效率
- c# UDP(udpclient)客户端和服务端有何区别?
- (0.2.6)Mysql安装——编译安装
- Java 文件高效写入方法
- html5页面资源预加载(Link prefetch)
- python双向链表以及双向循环链表
- matlab已知热敏电阻数据,Matlab在热敏电阻特性测量实验中的应用
- 两万字详解自动驾驶开发工具链的现状与趋势
- 假设检验与常见的统计检验方法
- PHP实现手机号或身份证号中间几位变*
- 偏移出来的数据不准_cad偏移(cad偏移数据和输入的数据不准确)
- uniapp隐藏原生导航栏
- 学计算机的自述,计算机的自述作文范文
热门文章
- 【必看】Linux 系统的备份恢复
- 【分享】20道Oracle运维常见面试题
- KubeVela 正式开源:一个高可扩展的云原生应用平台与核心引擎
- Serverless 与容器决战在即?有了弹性伸缩就不一样了
- 阿里开源富容器引擎 PouchContainer 的 network 连接机制
- 手机html图片模糊,css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnose...
- 在浏览器中内嵌word_关于项目浏览器内核的选取解读
- java怎么给类中的私有变量赋值_Java学习笔记分享 如何理解接口抽象类和关键字...
- python 回声程序_一种回声消除系统及回音消除方法与流程
- jq 通过标签名称获取标签_怎样利用tag标签来获取长尾关键词排名