惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Engineering at Meta
Engineering at Meta
博客园_首页
H
Help Net Security
WordPress大学
WordPress大学
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
罗磊的独立博客
博客园 - 三生石上(FineUI控件)
B
Blog
I
InfoQ
SecWiki News
SecWiki News
T
Tailwind CSS Blog
Spread Privacy
Spread Privacy
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
V
Vulnerabilities – Threatpost
N
Netflix TechBlog - Medium
P
Palo Alto Networks Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Vercel News
Vercel News
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
K
Kaspersky official blog
M
MIT News - Artificial intelligence
S
Schneier on Security
T
Threat Research - Cisco Blogs
F
Fortinet All Blogs
Cyberwarzone
Cyberwarzone
Scott Helme
Scott Helme
aimingoo的专栏
aimingoo的专栏
Martin Fowler
Martin Fowler
MyScale Blog
MyScale Blog
The Cloudflare Blog
Recent Announcements
Recent Announcements
Security Latest
Security Latest
G
GRAHAM CLULEY
IT之家
IT之家
Y
Y Combinator Blog
The Last Watchdog
The Last Watchdog
腾讯CDC
Google DeepMind News
Google DeepMind News
V
V2EX
S
Securelist
TaoSecurity Blog
TaoSecurity Blog
B
Blog RSS Feed
S
SegmentFault 最新的问题
博客园 - 叶小钗
P
Proofpoint News Feed
云风的 BLOG
云风的 BLOG
Project Zero
Project Zero
G
Google Developers Blog
Google DeepMind News
Google DeepMind News
F
Full Disclosure

博客园 - 海盗

How to point your package manager to US server How to install Java in Ubuntu [Linux]Variable and Parameters in Bash - 海盗 HOWTO: Install chinese input One series article of Linux file system Reading notes of &lt;&gt; -- I <> - 海盗 - 博客园 Got two days' break New keyboard - 海盗 - 博客园 Some questions before learning ASP.net MVC framework Back again! JavaScript MD5 Encryption - 海盗 My 50 favorite design resources 复杂域环境下通过.Net操作Active Directory经验点滴 IE ToolBar 关于C#中字段的初始化 关于namespace - 海盗 - 博客园 好久没来了! C#播放音乐
AJAX中的Back Button/Bookmarking问题和Nikhil Kothari的Atlas解决方案
海盗 · 2006-09-13 · via 博客园 - 海盗

传统的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支持)的话,这个问题解决起来就容易多了。

其他一些参考连接: