跳到主要內容

瀏覽器切換上下頁的行為以及 AJAX

記錄一下觀察到的東西, 可能有錯。

瀏覽器在切換 URL 時會存下對應的檔案 (HTML、CSS、etc), 在瀏覽器按上下頁時, 瀏覽器會重新 render 該頁, 不會重送 HTTP request 取得內容。這表示:
  • 會重新執行 javascript code 
  • 會另外觸發一些特定的 javascript event  (有改變 URL)
對 AJAX 來說, 這造成一個問題, 因為 AJAX 沒有改變 URL, 自然無法直覺地切換上下頁。但有個還不錯的偷吃步作法, 利用瀏覽器處理 URL 中「#」的行為做出切換頁面的效果。在 URL 中有「#」的情況下, 瀏覽器會記錄更改的 URL, 並且不會送出 HTTP request, 所以可以按上下頁切換。比較特別的是, 瀏覽器不會重新 render 該頁, 因為「#」原本的用意是跳到同一頁面內的不同位置, 重新 render 會拖慢速度。於是有人利用這點, 配合改變 URL 觸發的 javascript event, 包了函式庫, 用來管理 AJAX 切換頁面的效果。

以 jQuery Address 為例, 概念很簡單: 將 AJAX 的參數記在「#」後面, 註冊所有會換頁的事件, 在送出 AJAX 前先改變 URL, 改變「#」後的內容, 這樣會觸發事件, 接著再統一在改變 URL 觸發的事件內從「#」後取回參數, 看要做什麼事。由於改變「#」後的內容, 瀏覽器不會送 HTTP request, 不用擔心為了記錄 URL 而多送 HTTP request。看看範例程式碼和玩玩範例, 會比較快理解它的行為。

看起來相當完美, 唯一的小缺憾是, 切換上下頁時會觸發 URL 改變的事件, javascript 的對應行為就是執行我們原本寫的 handler, 於是會重送出 HTTP request (AJAX), 這違反我們原本對切換上下頁的認知, 它不該多送 HTTP request。若要克服這個缺點, 就得用 javascript 實作 cache 機制, 先查看看是否已取得這組參數對應的內容, 是否沒有過期的顧慮, 沒有的話就不用送 HTTP request。我想一般來說不會寫到那麼麻煩, 若回上頁要重送 HTTP request, 就讓它重送吧, 程式會比較好維護。

備註

2012-03-06 更新

javascript - Updating address bar with new URL without hash or reloading the page 提到 HTML5 的新 api: window.history.pushState(), 在 jQuery Address 裡也有用到它。若想自己另外實作這個功能不想套 library 的架構, 可考慮直接用它, 現今支援 HTML5 的瀏覽器又更多了。

留言

這個網誌中的熱門文章

(C/C++ ) 如何在 Linux 上使用自行編譯的第三方函式庫

以使用 LevelDB 為例。 抓好並編好相關檔案,編譯方式見第三方函式庫附的說明:$ ls include/ # header files leveldb/ $ ls out-shared/libleveldb.so* # shared library out-shared/libleveldb.so@ out-shared/libleveldb.so.1@ out-shared/libleveldb.so.1.20* 下面的例子用 clang++ 編譯,這裡用到的參數和 g++ 一樣。 問題一:找不到 header$ clang++ sample.cpp sample.cpp:5:10: fatal error: 'leveldb/db.h' file not found #include "leveldb/db.h" ^ 1 error generated. 解法:用 -I 指定 header 位置 問題二:找不到 shared library$ clang++ sample.cpp -I include/ /tmp/sample-2e7dd8.o: In function `main': sample.cpp:(.text+0x1e): undefined reference to `leveldb::Options::Options()' sample.cpp:(.text+0x6f): undefined reference to `leveldb::DB::Open(leveldb::Options const&, std::string const&, leveldb::DB**)' sample.cpp:(.text+0x10c): undefined reference to `leveldb::Status::ToString() const' sample.cpp:(.text+0x7d0): undefined reference to `leveldb::Status::ToString() const' clang: error: linker command failed with exit code 1 (u…

熟悉系統工具好處多多

記一下以前很困擾, 現在秒殺的小事。 更新這篇的時候, 忘了函式庫用的 man page 裝在那個 package。以前就會想辦法 google, 運氣好一下會找到, 運氣不好會多找一會兒。 這回我想到新作法:$ strace -e open man 3 printf > /dev/null # 發現是讀 /usr/share/man/man3/printf.3.gz $ dpkg --search /usr/share/man/man3/printf.3.gz # 找到套件名稱 manpages-dev $ aptitude show manpages-dev # 確認描述符合, 收工

virtualbox 使用 USB 裝置

2012-12-16 更新 現在 (4.x 版) 似乎無需做任何設定, 只要有裝 Oracle VM VirtualBox Extension Pack, 在 VirtualBox 視窗右下角按 USB 的圖示, 再點目標裝置, 即可加入或移除該裝置 同一時間只有 host 或 guest 可擁有該裝置, 所以從 guest OS 移除, 相當於接回 host OS 目前 VirtualBox 只支援 USB 2.0 的插槽, 若偵測不到時, 注意一下是否為這個問題 有時拔拔插插, VirtualBox 會進入奇怪的狀態, 接上去 guest OS 無法連接且跳出 device is busy 的錯誤訊息。試看看拔除該裝置, 重開 guest OS (續上則) 若重開 guest OS 無效, 並且 host OS 已移除該裝置, VirtualBox 的 USB 清單卻仍顯示 "captured", 試看看拔除該裝置, 重開 host OS原文網路上搜一下, 比較多是 Ubuntu 當 host 的解法, 我的情況是 Win7 當 host, Ubuntu 當 guest。 這兩篇說明很詳細《Learn How to Set Up USB and Networking Options in VirtualBox》《幻影千瞳的部落格: VirtualBox 使用筆記(二):使用 USB 裝置》 現在的版本圖形介面很好用了, 不用像第二篇說的那樣用指令操作。這裡記下我的操作步驟: 關掉 guest OS 在 VirtualBox 選單, 選擇 guest OS -> Settings -> USB -> Enable USB 2.0 會出現訊息框, 說明要安裝 Oracle VM VirtualBox Extension Pack。下載後安裝它 host OS 插入 USB 隨身碟 在 VirtualBox 選單, 選擇 guest OS -> Settings -> USB, 點右邊有綠色 "+" 的 USB 頭的圖示, 選擇該 USB 隨身碟, 加入它的 filter 從 host OS 移除 USB 隨身碟 開啟 guest OS 插入 USB 隨身碟, 於是 guest OS 會自動偵測…