細談可刷新Ajax無刷新應用的構建及原理打賞

想必看標題就有一大部分朋友懵了,其實這個標題完全沒有錯,我要說的就是目前流行的ajax應用的構建。眾所周知,ajax應用的核心就是使用javascript異步調用XmlHttp發送請求并接收數據,然后在前臺進行局部刷新,從而達到無刷新改變頁面內容的效果。但在很多場合,如果使用大量的ajax,雖然可以使應用使用體驗更佳,卻避免不了用戶因為各種因素而進行的全局刷新。

舉個例子,有個文章管理頁面,完全是由ajax實現的,在默認情況下顯示文章列表,點擊某按鈕或鏈接的情況下異步加載了文章添加的界面,此時如果用戶刷新了頁面,先不說已經寫下的內容,頁面是不是又回到了列表狀態呢?沒錯,這就是我要說的問題。

其實之前就有過此類困擾,后來為了兼顧各方面靈活性,就采用了多頁面的方式,部分地方還使用了iframe。最近又做項目使用了大量ajax,同理,遇到同樣的問題。因為之前一直在做rtc的擴展開發,朋友建議我采用rtc的方式,就是ajax點擊異步請求的同時,在地址欄加上#xxx形式的參數,隨便看了看,以為rtc在這些地方采用了同步的請求,還搜了搜為什么rtc加參數的地方不是?卻是#。苦于rtc的中文文檔不多,沒找到答案。

昨天將應用又改回服務器端處理了,改動的同時忽然想到了#號的作用,其實熟悉html的朋友應該知道,#xxx形式的不是參數,而是指定的頁內鏈接(又稱錨點),這下問題全解決了。可能很多朋友用過最簡單的返回頂部方式就是錨點鏈接了,指定一個頭部的錨點或者沒有定義的錨點,點擊后就會跳回頁面頂部,這樣的功能剛好滿足了我們做ajax的需求,今天又著手按照自己的想法并參考rtc的實現方式,基本上實現了可刷新的無刷新頁面,這才發現,原來rtc整個站點依然是ajax異步請求處理的。

說到這里,不得不介紹一下rtc,而說到rtc又不得不提一下dojo以及dojo的widget,沒錯,rtc的底層實現大部分是以dojo widget形式編寫的,dojo widget是dojo提供的圖形界面組件庫,并且可以自己定義組件,使用方式很靈活,可以完全編程實現,也可以再html標簽中指定type供解析并展現,具體dojo widget內容請參見《dojo widget生命周期及使用詳解》,這里不多做介紹了。關于rtc,我只知道是ibm的大型項目,涵蓋了軟件工程各個階段的管理等功能,這里不多做功能上的介紹,朋友們想了解的可以自己查看相關資料。總之,rtc就是結合dojo widget實現的全異步ajax應用,它的展現方式是無刷新的,但在網絡阻塞等情況下,用戶刷新后還在原先的頁面。在某些區域,用戶正在編輯的內容也依然存在,當然,這要用到一些本地存儲的功能,也不在本篇介紹范圍。

rtc的實現是采用了大量的widget,由于本人對于widget的編寫不是很熟悉,所以采用了xhrGet的方式異步請求事先定義好的頁面組件,同樣實現了ajax頁面構建。總體來說,只需多做兩步。

第一:異步請求的同時在地址欄url中保留請求參數(之前之后均可),方法可以選中定義a鏈接的href="#action=xxx",也可以定義document.location='#action=xxx'或者window.location='#action=xxx'。至于真正的請求,隨便你想怎么做都可以。

第二:定義一個全局的入口,當頁面重新載入時,都通過這個入口函數判斷location里面是否包含#,是否包含之前所定義的相關參數,并解析出相關參數進行查詢、構建頁面,其實這個過程只是等于將原有的請求參數全數保留到了地址欄,刷新時再拿來用而已。我的方法是將除了前臺組裝頁面的函數意外的其他請求參數也逐一添加到地址欄,如'#action=xxx&id=1&name=2&age=3',這樣截取后面內容替換#為?,就可以直接拿來做異步Get請求了。

這樣,通過錨點鏈接就實現了可刷新的無刷新應用。其實這個我自己是剛剛琢磨出來,也許看到這篇文章的你早就這么用過,那么還請多多指教,畢竟我隨便搜索了一下,發現還是有此類文章的,而且發布日期早在2005年。自愧不如啊。但我的方法畢竟是在沒有參考別人文章、教程的情況下自己想到的,還是挺開心,又學會了點新技巧,開心之余還是拿出來給大家分享下吧,高手勿噴。

細談可刷新Ajax無刷新應用的構建及原理
文章《細談可刷新Ajax無刷新應用的構建及原理》二維碼
  • 微信打賞
  • 支付寶打賞

已有12條評論

  1. 電子點菜系統

    真是受益匪淺啊

    2013-01-07 17:47 回復
  2. 垃圾站

    哎,看不懂,提前祝你元旦快樂啦!

    2012-12-30 17:28 回復
  3. 潤初顏

    這個不太懂呀,圣誕快樂!

    2012-12-25 10:23 回復
  4. 向日葵媒體設計

    面試問我懂Ajax嗎,我回答沒接觸過多少。蠻好隨便吹吹的

    2012-12-24 11:21 回復
  5. 籃球比分

    看了內容還是不懂

    2012-12-23 14:10 回復
    • 窮小子

      可以理解為本地存儲的一種方式吧

      2012-12-23 17:41 回復
  6. 43度

    弄明白這些的,已經算是高手了,還這么謙虛啊

    2012-12-22 23:18 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖