ajax|標準|程式|瀏覽器 使用片段標識符,我們可以建立一個“Ajax-URI”,其中的用戶端部分和伺服器端部分使用“#”隔開。
JavaScript提供了window.location()函數,以便通過URI更新瀏覽器的記錄和地址。此外,我們可以使用window.location.hash()直接存取片段標識符。
在下面的代碼片斷中,您可以看到如何通過對選擇框使用onchange事件處理常式來擴充我們的代碼,該處理常式使用一個“Ajax-URI”來更新瀏覽器記錄及地址欄。
<html> <head> <script language="JavaScript" type="text/JavaScript"> function makeHistory(newHash) { window.location.hash = newHash; } function reportOptionValue() { var myForm = document.make_history; var mySelect = myForm.change_year; return mySelect.options[mySelect.selectedIndex].value; } function setOptionValue(value) { var myForm = document.make_history; var mySelect = myForm.change_year; mySelect.options[value-1].selected = true; } </script> </head> <body> <form name=make_history> <select name=change_year onchange= "return makeHistory(reportOptionValue())"> <option value="year_1">Year 1</option> <option value="year_2">Year 2</option> </select> </form> </body> </html>
正如我們在圖2中所看到的,選擇框的每一次變動都將導致瀏覽器地址的更新。請注意,在需要使用隱藏幀以擷取正確的行為的Internet Explorer (IE)中會存在一些問題,詳細情況還是請參見Mike Stenhouse和Brad Neuberg的文章。
圖2.狀態變化時記錄堆棧被更新
我們現在有了一個在選擇框的值發生變化時建立新URI的事件處理常式。新URI使用片段標識符儲存重新建立先前狀態所需的資訊。現在我們可以著手實現下一個功能了。
在第一步中,我們通過window.location.hash()函數更新了用戶端的URI。這個調用並不會產生伺服器的往返,也不會導致頁面重新整理。因此,我們需要使用Ajax的方法(在用戶端)處理URI的改變。
首先需要增加一個輪詢函數,以定時檢查瀏覽器記錄中的URI。我將在頁面的onload事件中使用pollHash()函數,每隔1000毫秒它將重新執行一次。
這個輪詢函數將調用handleHistory()函數,後者檢查在上一次檢查之後URI是否改變了。我們將藉助一個名為expectedHash的全域變數來實現。
最後一部分是確定URI是否發生了改變,這種改變由選擇框中的事件處理常式引起,或者是因為終端使用者單擊了後退按鈕而造成。我們通過在選擇框的事件處理常式中設定expectedHash來達到此目的。
<html> <head> <script language="JavaScript" type="text/JavaScript"> var expectedHash = ""; function makeHistory(newHash) { window.location.hash = newHash; expectedHash = window.location.hash; return true; } function reportOptionValue() { var myForm = document.make_history; var mySelect = myForm.change_year; return mySelect.options[mySelect.selectedIndex].value; } function setOptionValue(value) { var myForm = document.make_history; var mySelect = myForm.change_year; mySelect.options[value-1].selected = true; return true; } function handleHistory() { if ( window.location.hash != expectedHash ) { expectedHash = window.location.hash; var newoption = expectedHash.substring(6); setOptionValue( newoption ); } return true; } function pollHash() { handleHistory(); window.setInterval("handleHistory()", 1000); return true; } </script> </head> <body language="JavaScript" > <form name=make_history> <select name=change_year > <option value="year_1">Year 1</option> <option value="year_2">Year 2</option> </select> </form> </body> </html>
到此,我們的樣本程式就完成了。在這個程式中,我們示範了如何在URI中選項組,如何將URI添加到瀏覽器的記錄堆棧中,如何從後退按鈕檢測地址變動,以及最終如何重新建立所需的狀態。
這個樣本程式還缺少以下功能:
- 對使用隱藏幀的IE的支援
- 更多的固定URI(這個樣本程式只用於選擇框選項少於10的情況)
- 在構造時註冊初始狀態
以一種相容所有瀏覽器的健壯方式實現對所有傳統的Web可用功能的處理不是一件容易的事。一種替代方法是使用對這些功能提供了內建支援的Ajax工具包。
- Ajax: 一個建立Web應用的新途徑
- Ajax的錯誤處理機制探討(2)
- Ajax的錯誤處理機制探討(1)
- 初次體驗.NET Ajax無重新整理技術
- Rails系統中的AJAX開發技術簡析(4)