自從“Ajax”這個(gè)字眼在2005年嶄露頭角以來(lái)，它就改變了互聯(lián)網(wǎng)的面貌。應(yīng)用程序變得交互性更強(qiáng)了；桌面模式向Web遷移，而且在這個(gè)過程中不斷嬗變；Web作為一種平臺(tái)已開始流行開來(lái)。

這個(gè)改變并沒有影響網(wǎng)站的基本運(yùn)作方式。當(dāng)然，代碼模塊以異步方式裝入；一些網(wǎng)站使用Ajax來(lái)裝入通知；你在滾動(dòng)瀏覽頁(yè)面時(shí)，F(xiàn)acebook Like按鈕神奇地出現(xiàn)。典型的博客網(wǎng)站或宣傳手冊(cè)式網(wǎng)站（brochure site）提供了基于頁(yè)面的體驗(yàn)；既然Web從本質(zhì)上來(lái)說(shuō)是一種基于頁(yè)面的介質(zhì)，為什么將事情搞得過于復(fù)雜呢？

但是移動(dòng)應(yīng)用程序的普及促使基于頁(yè)面的交互邁上了一個(gè)新的臺(tái)階。導(dǎo)航區(qū)域待在原地不動(dòng)時(shí)，屏幕可以順暢地滑入滑出，不但提供令人愉悅的體驗(yàn)，還保留了上下文，進(jìn)一步證實(shí)用戶在信息層次體系中的位置。用戶看到的是裝入的動(dòng)畫，而不是屏幕與屏幕之間的一片空白。

不刷新網(wǎng)站

也許現(xiàn)在我們是時(shí)候?yàn)樽烂鎃eb采用這種方法了：不刷新網(wǎng)站（no-fresh website）。哪怕裝入速度很快，整頁(yè)刷新還是會(huì)影響上下文。借助Ajax，我們可以在裝入新內(nèi)容的同時(shí)，讓導(dǎo)航元素待在原地。我們可以通過進(jìn)一步證實(shí)我們?nèi)绾卧诰W(wǎng)站的信息層次體系中穿梭的動(dòng)畫，裝入新內(nèi)容。而即使有了動(dòng)畫，這類操作也可能讓人覺得比較輕便，因而鼓勵(lì)訪客繼續(xù)導(dǎo)航——尤其是由于Back（返回）操作觸手可及。

誠(chéng)然，這樣一種網(wǎng)站比傳統(tǒng)網(wǎng)站需要編寫多得多的代碼。但是這些代碼有許多已經(jīng)編好了：jQTouch和jQuery Mobile已經(jīng)可以拿來(lái)多個(gè)HTML頁(yè)面，創(chuàng)建動(dòng)畫的、基于Ajax的體驗(yàn)——總的來(lái)說(shuō)，沒有額外的JavaScript代碼。它們?yōu)閷?duì)桌面友好的框架提供了***的基礎(chǔ)。

我們不妨稱之為page.js。請(qǐng)恕我保留pagejs.com（https://github.com/schvenk/page.js），將它指向全新的GitHub存儲(chǔ)庫(kù)，那樣我們可以馬上開始對(duì)它進(jìn)行改動(dòng)了。下面是其工作機(jī)理：

你可以按今天的方式來(lái)編寫網(wǎng)站的HTML，為針對(duì)特定標(biāo)記的頁(yè)面元素另外添加一點(diǎn)信息。（jQuery Mobile使用HTML5數(shù)據(jù)屬性，如<div data-role="content">，以定義頁(yè)面上的不同區(qū)域。）

網(wǎng)站***裝入時(shí)，page.js讀取和修改你的HTML，使用可以移動(dòng)的滾動(dòng)元素，將隨時(shí)準(zhǔn)備滑出屏幕的那部分頁(yè)面內(nèi)容包裝起來(lái)，并且相應(yīng)調(diào)整你的內(nèi)部鏈接。（如果性能至關(guān)重要，這可能出現(xiàn)在服務(wù)器端，緩存起來(lái)。）

訪客點(diǎn)擊內(nèi)部鏈接時(shí)，裝入動(dòng)畫在屏幕上顯示的同時(shí)，新頁(yè)面通過Ajax裝入。當(dāng)前頁(yè)面滑出屏幕，新頁(yè)面滑入屏幕。視情況而定，導(dǎo)航區(qū)域待在原地不動(dòng)。

瀏覽器的Back/Forward（返回/前進(jìn)）歷史記錄使用URL的哈希部分（#后面的一切內(nèi)容）保留下來(lái)。 點(diǎn)擊Back按鈕，之前的頁(yè)面又滑入屏幕。你可以使用Ben Alman編寫的hashchange插件（http://benalman.com/projects/jquery-hashchange-plugin/），在我的網(wǎng)站（http://interfacethis.com/portfolio/）上看看這個(gè)非常簡(jiǎn)單的例子。

新機(jī)遇

但這只不過是開了個(gè)頭。單頁(yè)面網(wǎng)站大有潛力。

當(dāng)訪客滾動(dòng)瀏覽你的主頁(yè)時(shí)，何不在后臺(tái)裝入可能向下鉆取的頁(yè)面呢？結(jié)合你的Google Analytics數(shù)據(jù)，就可以確認(rèn)當(dāng)前頁(yè)面之后最有可能訪問的目的地。如果你喜歡，也可以按訪客的人口統(tǒng)計(jì)資料來(lái)加以細(xì)分。

新的導(dǎo)航模式因而成為了可能。之前的頁(yè)面不需要一路滑出屏幕，而是可以瀏覽旁邊的部分，以保留上下文，從而創(chuàng)建一種現(xiàn)代的面包屑（breadcrumb）導(dǎo)航方式：

另外，我們可以使用HTML5的離線功能，為無(wú)法全部緩存的頁(yè)面改進(jìn)性能：將導(dǎo)航元素及其他靜態(tài)元素保留在客戶端上，然后使用那些緩存的元素來(lái)動(dòng)態(tài)組裝頁(yè)面。
 

挑戰(zhàn)

眼下，對(duì)大多數(shù)來(lái)說(shuō)門檻過高，做不到這一點(diǎn)。唯有掌握豐富的專門知識(shí)，并且投入大量的努力，page.js才會(huì)成氣候。

***鏈接（Permalink）帶來(lái)了挑戰(zhàn)?；贏jax的導(dǎo)航依賴ULR的哈希部分（http://my-site.com/my-page#hash-component）。它包含在書簽里面，但是并不傳輸?shù)椒?wù)器端。所以，哈希部分是***鏈接的一部分，但是它離不開能夠支持JavaScript的客戶端的合作，又沒有被谷歌及其他搜索引擎編入索引。但愿有一個(gè)解決辦法：谷歌已開發(fā)了一項(xiàng)標(biāo)準(zhǔn)，好讓Ajax鏈接能搜索到；一旦使用了這項(xiàng)標(biāo)準(zhǔn)，你的不刷新網(wǎng)站就能搜索到。而解決辦法變得更好了：許多瀏覽器在開始實(shí)施HTML5 History API（應(yīng)用編程接口）；相比之下，這套API解決這個(gè)問題要漂亮得多。所以你現(xiàn)在只要用一點(diǎn)JavaScript代碼，就可以實(shí)現(xiàn)，將來(lái)可以大大減少JavaScript代碼。

從框架層面來(lái)看，這些挑戰(zhàn)可以應(yīng)對(duì)的，也是可以克服的。所以，***步是創(chuàng)建page.js，然后將它交到網(wǎng)站制作者的手里。之后就等著坐收其成了。

原文：http://operationproject.com/2011/rethink-the-website/

【編輯推薦】

1. 使用jQuery設(shè)計(jì)數(shù)據(jù)表格之實(shí)現(xiàn)Ajax功能
2. Ajax應(yīng)用：使用jQuery和PHP實(shí)現(xiàn)功能開關(guān)效果
3. 通過五個(gè)Ajax***實(shí)踐編寫更強(qiáng)壯的代碼
4. 初析Struts2中的Ajax開發(fā)實(shí)例
5. 介紹Ajax優(yōu)于JSF的原因