Ajax改變了瀏覽器的默認(rèn)規(guī)則，在使用Ajax應(yīng)用時(shí)，后退往往會(huì)得不到我們還要的結(jié)果。那么如何來(lái)處理這種方式，使之更適合我們的習(xí)慣呢。
? Brad Neuberg的開(kāi)源Really Simple History (RSH)框架是一個(gè)簡(jiǎn)單的解決這個(gè)問(wèn)題的方案。其實(shí)現(xiàn)的方式如下：用隱藏的iFrame,Timer和隱藏的Form來(lái)檢測(cè)歷史瀏覽的變化，其中隱藏的Form用來(lái)保存頁(yè)面的數(shù)據(jù)信息。
? 當(dāng)然其他還有如Backbase 和 Dojo還可以解決這種問(wèn)題，但復(fù)雜度就高了些。
? 下面就以先前的樣例程序來(lái)看一下如何使用RSH框架，其實(shí)很容易的：
包含RSH框架的JS腳本： <script src="/oblog312/dhtmlHistory.js"></script>
初始化框架并定義后退時(shí)的回調(diào)函數(shù)：
<script language="JavaScript">
? function initialize() {
? ? // 初始化框架
? ? dhtmlHistory.initialize();
? ? // 加入回調(diào)函數(shù)
? ? dhtmlHistory.addListener(historyChange);
? }
? /** Our callback to receive history
? ? ? change events. */
? function historyChange(newLocation, historyData) {
? ? //更新數(shù)據(jù)
? ? DWRUtil.removeAllRows("goodsbody");
? ? var arrayUrl = newLocation.split(":");
? ? if (arrayUrl.length == 2) {
? ? ? ? document.getElementById("type").value = arrayUrl[0];
? ? ? ? document.rentalForm.select.checked = false;
? ? ? ? document.getElementById("totalRecords").innerHTML = historyData.length;
? ? ? ? DWRUtil.addRows("goodsbody", historyData, [ addCheckbox, getName, getPrice, getCount]);
? ? ? }
? }
</script>
在數(shù)據(jù)更新時(shí)保留之前的地址： ?
function fillTable(goods) {
? ? dhtmlHistory.add(document.getElementById("type").value+":"+new Date().getTime(), goods);
? ?
? document.rentalForm.select.checked = false;
? document.getElementById("totalRecords").innerHTML = goods.length;
? DWRUtil.addRows("goodsbody", goods, [ addCheckbox, getName, getPrice, getCount]);
}
當(dāng)然還在頁(yè)面初始化加入上面的初始化函數(shù)：
<body onload="initialize();">
? OK，大功告成，簡(jiǎn)單吧^_^
posted on 2006-07-15 09:58
無(wú)聲 閱讀(964)
評(píng)論(0) 編輯 收藏 所屬分類(lèi):
職場(chǎng)生活