顯示廣告
隱藏 ✕
※ 本文為 angelplume.bbs. 轉寄自 ptt.cc 更新時間: 2012-05-23 11:53:29
看板 Ajax
作者 Luos (Soul)
標題 [問題] dropbox網頁的ajax怎麼辦到的...?
時間 Thu May 17 14:39:36 2012


自從dropbox改版成可以drap&drop之後 一直有個疑問

當我登入之後 網址列會變成 www.dropbox.com/home
點開Photos資料夾 網址列變成 www.dropbox.com/home/Photos
按瀏覽器的上一頁還會回到home

看起來並不是整個頁面刷新 而只是用ajax 刷新中間的 ol
這怎麼辦到的...?

我唯一想的到的方法是在server端寫一個module來擷取網址
可是這樣整個頁面都會重整說

請教一下 這種功能到底怎麼作?

謝謝

--
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 116.228.152.106
knuckles:HTML5 History API1F 05/17 14:49
Luos:這樣IE7 8 怎麼打的開=3=2F 05/17 14:56
xiphoid:不支援就普通的讀取新網頁3F 05/17 14:58
Luos:我手邊居然沒有IE7能試...4F 05/17 15:04
xiphoid:呃 剛剛測試 ie8用hash當fallback5F 05/17 15:05
Luos:我在網址列直接輸入www.dropbox.com/home/Photos也行6F 05/17 15:09
Luos:這不是History API 作的吧
xiphoid:html5 history api只是能不靠hash hack改網址不重讀網頁8F 05/17 15:17
xiphoid:跟有上/下一頁紀錄 網頁內容怎麼產生不是它的業務
Luos:html5demos.com/history 也能做到上下頁說10F 05/17 15:23
mesak:HTML5 history.pushState11F 05/17 20:57
Canboo:TML5 History無誤,請研究完再來質疑12F 05/17 22:02
Luos:研究中 希望能生出來13F 05/17 22:45
tomap41017:可以考慮pjax14F 05/17 23:22
Asual | jQuery Address Samples
Creates open source software and provides professional services for its integration. The home of SWFAddress and jQuery Address. ...
 
Luos:Pjax看來不錯 來玩玩看16F 05/18 12:10
Luos:Popstate 之後怎麼history.state是null....
xiphoid:推pjax http://goo.gl/OZyOy 自己弄的靜態網頁+pjax18F 05/18 13:04
xiphoid:js http://goo.gl/74Cty
Luos:pjax 沒有fallback... 改完History.js 好了20F 05/18 14:53
Luos:眼花了 pjax 有fallback
Luos:我輸了 能不能推薦pjax的教學或sample...
Luos:xiphoid大的網站到底怎麼運作的? 完全看不出來Orz
Luos:找到的範例都只有一行 $('a').pjax('#main');為什麼能夠運行?
xiphoid:那個網站就一般靜態網頁而已 上面選單是Chosen快速搜尋用25F 05/21 12:48
xiphoid:沒用pjax的情況就很平常的一堆html連來連去
xiphoid:用pjax後變成由ajax讀html改內容+history api改網址
xiphoid:$('a').pjax('#main')是把網頁的'a'綁click事件
xiphoid:做上上個推文的行為 #main是放新網頁內容的dom
xiphoid:自己網站內部連結以/開頭 所以用$('#main a[href^="/"]')
xiphoid:不過剛發現pjax似乎會自己判斷 cross origin就跳過
Luos:謝謝xiphoid大詳細的解說 我想問的是 第一個網頁裡哪裡有pjax32F 05/21 13:09
Luos:是在requireJS裡?  我查的requireJS跟pjax 沒關係說=3=
Luos:$('a').pjax('#main') 讓我無法理解的部分是 a沒有preventDef
Luos:ault 不是會開啟網頁嗎 至少我自己做的會=3=
Luos:再來就是 哪裡定義URL? pjax會直接讀取a的href?
Luos:git上面寫得option裡面有url的定義 url寫在option裡面雖然成
Luos:功 但是所有的a都連到同一個網頁也沒意義就是了=w=
Luos:謝謝xiphoid大願意回文教我 <(_ _)>
xiphoid:不客氣._. requirejs跟這個無關 只是用來把js縮成一個檔案40F 05/21 13:35
xiphoid:js檔請看這個 http://goo.gl/74Cty 右邊
xiphoid:pjax url定義: 74行 http://goo.gl/C4iGn42F 05/21 13:36
xiphoid:preventDefault: 83行
Luos:我剛好也在看pjax的jquery 為什麼google這麼久都沒想到要去44F 05/21 13:38
Luos:檔案咧=3=   data-pjax這個attr一定要嗎?
xiphoid:有 source code 有真相46F 05/21 13:40
xiphoid:不用data-pjax就要用.pjax('#container')定義內容填哪
Luos:這就是說pjax是到href去把html撈出來 這跟我\要做的有點微妙48F 05/21 13:58
Luos:的不同 我是要從php把html撈出來 再把href裡的url push到網址
xiphoid:可以直接$.pjax({url: '/authors', container: '#main'})50F 05/21 14:04
xiphoid:不用透過<a>
Luos:列 還有個疑問 沒設定fragment不就會把整個html load回來嗎?52F 05/21 14:04
Luos:對吼... 只不過這樣就不能用href來存假網址了
xiphoid:"pjax on the server side" 能從header盼斷是不是pjax54F 05/21 14:15
Luos:那就是要在server判斷 如果是pjax就只傳部分的html?55F 05/21 14:20
Luos:這樣要跟三方的網頁兼容就很困難了
Luos:$.pjax 的話沒有href 怎麼pushState...?
xiphoid:直接傳新網址給$.pjax *url: '/authors'*58F 05/21 14:23
Luos:/authors 會被push到網址列?59F 05/21 14:35
xiphoid:對60F 05/21 14:48
tomap41017:pjax小弟已經愛上了XDDD61F 05/21 14:51
Luos:有沒有辦法push我指定的一段網址列上去?62F 05/21 14:54
Luos:打個比方 就像dropbox一樣 我點開Photos的folder
Luos:網址會加上/Home/Photos 但是實際上我是到別的php去把html lo
Luos:od回來?
xiphoid:試完 http://test.barepants.com/pjax/a.html 但失敗66F 05/21 16:32
xiphoid:上下一頁內容不會更新 而且重新整理也破功 放棄...
Luos:我已經在改他的source code了 不過上下頁兩曾就會失敗68F 05/21 16:41
Luos:重新整理 不會改....
xiphoid:重新整理沒辦法 網站上就是沒這個檔案或route70F 05/21 16:48
xiphoid:或許放棄pushState改用hash當history吧
Luos:這是個好想法 還是很好奇dropbox怎麼辦到的~72F 05/21 16:56
xiphoid:有什麼原因不能讓pjax直接讀網址?73F 05/21 17:08
Luos:其實比較重要的是希望能像db一樣能用上一頁來回到上一層74F 05/21 17:12
Luos:網址列變成只是路徑 實際上檔案放置是我自己定義的
xiphoid:網址不需要直接對應檔案 /index.php/abc76F 05/21 18:20
xiphoid:/index.php/abc/def 這些網址都能用index.php來處理
xiphoid:(用$_SERVER['REQUEST_URI']判斷)
xiphoid:配合mod_rewrite能再把網址的index.php去掉
xiphoid:pjax.heroku.com/ 也不是真的有dinosaurs.html
xiphoid:aliens.html 而是http://goo.gl/RTTwQ
Luos:Heruku那個不是用pjax嗎?82F 05/21 23:39
Luos:RequestURI原來可以這樣用 明天試試
Luos:說起來amazon ec2 跟openstack 好像也是類似的方法說
xiphoid:heroku那個是pjax 但實際上沒有那些html檔案85F 05/22 09:13
xiphoid:多數網站網址應該都不是對應檔案 web framework都有
xiphoid:router可以用或者說只能這樣用
Luos:不太想改server端的部分...88F 05/22 09:47
Luos:這種做法有沒有麼關鍵字=3=  我想查查..
xiphoid:Front Controller90F 05/22 10:15
Luos:我倒是看到很多用explode來弄....91F 05/22 10:21

--
※ 看板: layzer 文章推薦值: 0 目前人氣: 0 累積人氣: 628 
※ 文章分類: JavaScript / AJAX
分享網址: 複製 已複製
r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇