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解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。