刷新網(wǎng)站：用Ajax構(gòu)建更好的單頁面體驗(yàn)
譯文自從“Ajax”這個字眼在2005年嶄露頭角以來，它就改變了互聯(lián)網(wǎng)的面貌。應(yīng)用程序變得交互性更強(qiáng)了；桌面模式向Web遷移，而且在這個過程中不斷嬗變；Web作為一種平臺已開始流行開來。
這個改變并沒有影響網(wǎng)站的基本運(yùn)作方式。當(dāng)然，代碼模塊以異步方式裝入；一些網(wǎng)站使用Ajax來裝入通知；你在滾動瀏覽頁面時，F(xiàn)acebook Like按鈕神奇地出現(xiàn)。典型的博客網(wǎng)站或宣傳手冊式網(wǎng)站（brochure site）提供了基于頁面的體驗(yàn)；既然Web從本質(zhì)上來說是一種基于頁面的介質(zhì)，為什么將事情搞得過于復(fù)雜呢？
但是移動應(yīng)用程序的普及促使基于頁面的交互邁上了一個新的臺階。導(dǎo)航區(qū)域待在原地不動時，屏幕可以順暢地滑入滑出，不但提供令人愉悅的體驗(yàn)，還保留了上下文，進(jìn)一步證實(shí)用戶在信息層次體系中的位置。用戶看到的是裝入的動畫，而不是屏幕與屏幕之間的一片空白。
不刷新網(wǎng)站
也許現(xiàn)在我們是時候?yàn)樽烂鎃eb采用這種方法了：不刷新網(wǎng)站（no-fresh website）。哪怕裝入速度很快，整頁刷新還是會影響上下文。借助Ajax，我們可以在裝入新內(nèi)容的同時，讓導(dǎo)航元素待在原地。我們可以通過進(jìn)一步證實(shí)我們?nèi)绾卧诰W(wǎng)站的信息層次體系中穿梭的動畫，裝入新內(nèi)容。而即使有了動畫，這類操作也可能讓人覺得比較輕便，因而鼓勵訪客繼續(xù)導(dǎo)航——尤其是由于Back（返回）操作觸手可及。
誠然，這樣一種網(wǎng)站比傳統(tǒng)網(wǎng)站需要編寫多得多的代碼。但是這些代碼有許多已經(jīng)編好了：jQTouch和jQuery Mobile已經(jīng)可以拿來多個HTML頁面，創(chuàng)建動畫的、基于Ajax的體驗(yàn)——總的來說，沒有額外的JavaScript代碼。它們?yōu)閷ψ烂嬗押玫目蚣芴峁┝?**的基礎(chǔ)。
我們不妨稱之為page.js。請恕我保留pagejs.com（https://github.com/schvenk/page.js），將它指向全新的GitHub存儲庫，那樣我們可以馬上開始對它進(jìn)行改動了。下面是其工作機(jī)理：
你可以按今天的方式來編寫網(wǎng)站的HTML，為針對特定標(biāo)記的頁面元素另外添加一點(diǎn)信息。（jQuery Mobile使用HTML5數(shù)據(jù)屬性，如<div data-role="content">，以定義頁面上的不同區(qū)域。）
網(wǎng)站***裝入時，page.js讀取和修改你的HTML，使用可以移動的滾動元素，將隨時準(zhǔn)備滑出屏幕的那部分頁面內(nèi)容包裝起來，并且相應(yīng)調(diào)整你的內(nèi)部鏈接。（如果性能至關(guān)重要，這可能出現(xiàn)在服務(wù)器端，緩存起來。）
訪客點(diǎn)擊內(nèi)部鏈接時，裝入動畫在屏幕上顯示的同時，新頁面通過Ajax裝入。當(dāng)前頁面滑出屏幕，新頁面滑入屏幕。視情況而定，導(dǎo)航區(qū)域待在原地不動。
瀏覽器的Back/Forward（返回/前進(jìn)）歷史記錄使用URL的哈希部分（#后面的一切內(nèi)容）保留下來。 點(diǎn)擊Back按鈕，之前的頁面又滑入屏幕。你可以使用Ben Alman編寫的hashchange插件（http://benalman.com/projects/jquery-hashchange-plugin/），在我的網(wǎng)站（http://interfacethis.com/portfolio/）上看看這個非常簡單的例子。
新機(jī)遇
但這只不過是開了個頭。單頁面網(wǎng)站大有潛力。
當(dāng)訪客滾動瀏覽你的主頁時，何不在后臺裝入可能向下鉆取的頁面呢？結(jié)合你的Google Analytics數(shù)據(jù)，就可以確認(rèn)當(dāng)前頁面之后最有可能訪問的目的地。如果你喜歡，也可以按訪客的人口統(tǒng)計(jì)資料來加以細(xì)分。
新的導(dǎo)航模式因而成為了可能。之前的頁面不需要一路滑出屏幕，而是可以瀏覽旁邊的部分，以保留上下文，從而創(chuàng)建一種現(xiàn)代的面包屑（breadcrumb）導(dǎo)航方式：
另外，我們可以使用HTML5的離線功能，為無法全部緩存的頁面改進(jìn)性能：將導(dǎo)航元素及其他靜態(tài)元素保留在客戶端上，然后使用那些緩存的元素來動態(tài)組裝頁面。
挑戰(zhàn)
眼下，對大多數(shù)來說門檻過高，做不到這一點(diǎn)。唯有掌握豐富的專門知識，并且投入大量的努力，page.js才會成氣候。
***鏈接（Permalink）帶來了挑戰(zhàn)?；贏jax的導(dǎo)航依賴ULR的哈希部分（http://my-site.com/my-page#hash-component）。它包含在書簽里面，但是并不傳輸?shù)椒?wù)器端。所以，哈希部分是***鏈接的一部分，但是它離不開能夠支持JavaScript的客戶端的合作，又沒有被谷歌及其他搜索引擎編入索引。但愿有一個解決辦法：谷歌已開發(fā)了一項(xiàng)標(biāo)準(zhǔn)，好讓Ajax鏈接能搜索到；一旦使用了這項(xiàng)標(biāo)準(zhǔn)，你的不刷新網(wǎng)站就能搜索到。而解決辦法變得更好了：許多瀏覽器在開始實(shí)施HTML5 History API（應(yīng)用編程接口）；相比之下，這套API解決這個問題要漂亮得多。所以你現(xiàn)在只要用一點(diǎn)JavaScript代碼，就可以實(shí)現(xiàn)，將來可以大大減少JavaScript代碼。
從框架層面來看，這些挑戰(zhàn)可以應(yīng)對的，也是可以克服的。所以，***步是創(chuàng)建page.js，然后將它交到網(wǎng)站制作者的手里。之后就等著坐收其成了。
原文：http://operationproject.com/2011/rethink-the-website/
【編輯推薦】
