開發保留標準瀏覽器功能的AJAX應用程式(3)

來源:互聯網
上載者:User
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使用片段標識符儲存重新建立先前狀態所需的資訊。現在我們可以著手實現下一個功能了。
  • 恢複記錄
    • 檢測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)


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.