PTT數位生活區 / Ajax

[問題] dropbox網頁的ajax怎麼辦到的...?

看板Ajax作者 (Soul)時間12年前 (2012/05/17 14:39), 編輯推噓5(5推 0噓 86→)
留言91則, 7人參與, 最新討論串1/1
自從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
推
05/17 14:49, , 1F
HTML5 History API
05/17 14:49, 1F
→
05/17 14:56, , 2F
這樣IE7 8 怎麼打的開=3=
05/17 14:56, 2F
→
05/17 14:58, , 3F
不支援就普通的讀取新網頁
05/17 14:58, 3F
→
05/17 15:04, , 4F
我手邊居然沒有IE7能試...
05/17 15:04, 4F
→
05/17 15:05, , 5F
呃 剛剛測試 ie8用hash當fallback
05/17 15:05, 5F
→
05/17 15:09, , 6F
我在網址列直接輸入www.dropbox.com/home/Photos也行
05/17 15:09, 6F
→
05/17 15:10, , 7F
這不是History API 作的吧
05/17 15:10, 7F
→
05/17 15:17, , 8F
html5 history api只是能不靠hash hack改網址不重讀網頁
05/17 15:17, 8F
→
05/17 15:17, , 9F
跟有上/下一頁紀錄 網頁內容怎麼產生不是它的業務
05/17 15:17, 9F
→
05/17 15:23, , 10F
html5demos.com/history 也能做到上下頁說
05/17 15:23, 10F
推
05/17 20:57, , 11F
HTML5 history.pushState
05/17 20:57, 11F
推
05/17 22:02, , 12F
TML5 History無誤，請研究完再來質疑
05/17 22:02, 12F
→
05/17 22:45, , 13F
研究中 希望能生出來
05/17 22:45, 13F
推
05/17 23:22, , 14F
可以考慮pjax
05/17 23:22, 14F
→
05/18 02:19, , 15F
05/18 02:19, 15F
→
05/18 12:10, , 16F
Pjax看來不錯 來玩玩看
05/18 12:10, 16F
→
05/18 12:11, , 17F
Popstate 之後怎麼history.state是null....
05/18 12:11, 17F
→
05/18 13:04, , 18F
推pjax http://goo.gl/OZyOy 自己弄的靜態網頁+pjax
05/18 13:04, 18F
→
05/18 13:05, , 19F
05/18 13:05, 19F
→
05/18 14:53, , 20F
pjax 沒有fallback... 改完History.js 好了
05/18 14:53, 20F
→
05/18 17:20, , 21F
眼花了 pjax 有fallback
05/18 17:20, 21F
→
05/21 12:00, , 22F
我輸了 能不能推薦pjax的教學或sample...
05/21 12:00, 22F
→
05/21 12:03, , 23F
xiphoid大的網站到底怎麼運作的? 完全看不出來Orz
05/21 12:03, 23F
→
05/21 12:06, , 24F
找到的範例都只有一行 $('a').pjax('#main');為什麼能夠運行?
05/21 12:06, 24F
→
05/21 12:48, , 25F
那個網站就一般靜態網頁而已 上面選單是Chosen快速搜尋用
05/21 12:48, 25F
→
05/21 12:48, , 26F
沒用pjax的情況就很平常的一堆html連來連去
05/21 12:48, 26F
→
05/21 12:49, , 27F
用pjax後變成由ajax讀html改內容+history api改網址
05/21 12:49, 27F
→
05/21 12:49, , 28F
$('a').pjax('#main')是把網頁的'a'綁click事件
05/21 12:49, 28F
→
05/21 12:49, , 29F
做上上個推文的行為 #main是放新網頁內容的dom
05/21 12:49, 29F
→
05/21 12:50, , 30F
自己網站內部連結以/開頭 所以用$('#main a[href^="/"]')
05/21 12:50, 30F
→
05/21 12:50, , 31F
不過剛發現pjax似乎會自己判斷 cross origin就跳過
05/21 12:50, 31F
→
05/21 13:09, , 32F
謝謝xiphoid大詳細的解說 我想問的是 第一個網頁裡哪裡有pjax
05/21 13:09, 32F
→
05/21 13:11, , 33F
是在requireJS裡? 我查的requireJS跟pjax 沒關係說=3=
05/21 13:11, 33F
→
05/21 13:12, , 34F
$('a').pjax('#main') 讓我無法理解的部分是 a沒有preventDef
05/21 13:12, 34F
→
05/21 13:13, , 35F
ault 不是會開啟網頁嗎 至少我自己做的會=3=
05/21 13:13, 35F
→
05/21 13:14, , 36F
再來就是 哪裡定義URL? pjax會直接讀取a的href?
05/21 13:14, 36F
→
05/21 13:16, , 37F
git上面寫得option裡面有url的定義 url寫在option裡面雖然成
05/21 13:16, 37F
→
05/21 13:17, , 38F
功 但是所有的a都連到同一個網頁也沒意義就是了=w=
05/21 13:17, 38F
→
05/21 13:19, , 39F
謝謝xiphoid大願意回文教我 <(_ _)>
05/21 13:19, 39F
→
05/21 13:35, , 40F
不客氣._. requirejs跟這個無關 只是用來把js縮成一個檔案
05/21 13:35, 40F
→
05/21 13:35, , 41F
js檔請看這個 http://goo.gl/74Cty 右邊
05/21 13:35, 41F
→
05/21 13:36, , 42F
pjax url定義: 74行 http://goo.gl/C4iGn
05/21 13:36, 42F
→
05/21 13:36, , 43F
preventDefault: 83行
05/21 13:36, 43F
→
05/21 13:38, , 44F
我剛好也在看pjax的jquery 為什麼google這麼久都沒想到要去
05/21 13:38, 44F
→
05/21 13:40, , 45F
檔案咧=3= data-pjax這個attr一定要嗎?
05/21 13:40, 45F
→
05/21 13:40, , 46F
有 source code 有真相
05/21 13:40, 46F
→
05/21 13:42, , 47F
不用data-pjax就要用.pjax('#container')定義內容填哪
05/21 13:42, 47F
→
05/21 13:58, , 48F
這就是說pjax是到href去把html撈出來 這跟我\要做的有點微妙
05/21 13:58, 48F
→
05/21 14:00, , 49F
的不同 我是要從php把html撈出來 再把href裡的url push到網址
05/21 14:00, 49F
→
05/21 14:04, , 50F
可以直接$.pjax({url: '/authors', container: '#main'})
05/21 14:04, 50F
→
05/21 14:04, , 51F
不用透過<a>
05/21 14:04, 51F
→
05/21 14:04, , 52F
列 還有個疑問 沒設定fragment不就會把整個html load回來嗎?
05/21 14:04, 52F
→
05/21 14:08, , 53F
對吼... 只不過這樣就不能用href來存假網址了
05/21 14:08, 53F
→
05/21 14:15, , 54F
"pjax on the server side" 能從header盼斷是不是pjax
05/21 14:15, 54F
→
05/21 14:20, , 55F
那就是要在server判斷 如果是pjax就只傳部分的html?
05/21 14:20, 55F
→
05/21 14:20, , 56F
這樣要跟三方的網頁兼容就很困難了
05/21 14:20, 56F
→
05/21 14:21, , 57F
$.pjax 的話沒有href 怎麼pushState...?
05/21 14:21, 57F
→
05/21 14:23, , 58F
直接傳新網址給$.pjax *url: '/authors'*
05/21 14:23, 58F
→
05/21 14:35, , 59F
/authors 會被push到網址列?
05/21 14:35, 59F
→
05/21 14:48, , 60F
對
05/21 14:48, 60F
推
05/21 14:51, , 61F
pjax小弟已經愛上了XDDD
05/21 14:51, 61F
→
05/21 14:54, , 62F
有沒有辦法push我指定的一段網址列上去?
05/21 14:54, 62F
→
05/21 14:56, , 63F
打個比方 就像dropbox一樣 我點開Photos的folder
05/21 14:56, 63F
→
05/21 14:57, , 64F
網址會加上/Home/Photos 但是實際上我是到別的php去把html lo
05/21 14:57, 64F
→
05/21 14:57, , 65F
od回來?
05/21 14:57, 65F
→
05/21 16:32, , 66F
05/21 16:32, 66F
→
05/21 16:33, , 67F
上下一頁內容不會更新 而且重新整理也破功 放棄...
05/21 16:33, 67F
→
05/21 16:41, , 68F
我已經在改他的source code了 不過上下頁兩曾就會失敗
05/21 16:41, 68F
→
05/21 16:41, , 69F
重新整理 不會改....
05/21 16:41, 69F
→
05/21 16:48, , 70F
重新整理沒辦法 網站上就是沒這個檔案或route
05/21 16:48, 70F
→
05/21 16:48, , 71F
或許放棄pushState改用hash當history吧
05/21 16:48, 71F
→
05/21 16:56, , 72F
這是個好想法 還是很好奇dropbox怎麼辦到的~
05/21 16:56, 72F
→
05/21 17:08, , 73F
有什麼原因不能讓pjax直接讀網址?
05/21 17:08, 73F
→
05/21 17:12, , 74F
其實比較重要的是希望能像db一樣能用上一頁來回到上一層
05/21 17:12, 74F
→
05/21 17:14, , 75F
網址列變成只是路徑 實際上檔案放置是我自己定義的
05/21 17:14, 75F
→
05/21 18:20, , 76F
網址不需要直接對應檔案 /index.php/abc
05/21 18:20, 76F
→
05/21 18:20, , 77F
/index.php/abc/def 這些網址都能用index.php來處理
05/21 18:20, 77F
→
05/21 18:20, , 78F
(用$_SERVER['REQUEST_URI']判斷)
05/21 18:20, 78F
→
05/21 18:20, , 79F
配合mod_rewrite能再把網址的index.php去掉
05/21 18:20, 79F
→
05/21 18:25, , 80F
pjax.heroku.com/ 也不是真的有dinosaurs.html
05/21 18:25, 80F
→
05/21 18:26, , 81F
aliens.html 而是http://goo.gl/RTTwQ
05/21 18:26, 81F
→
05/21 23:39, , 82F
Heruku那個不是用pjax嗎？
05/21 23:39, 82F
→
05/21 23:42, , 83F
RequestURI原來可以這樣用 明天試試
05/21 23:42, 83F
→
05/21 23:44, , 84F
說起來amazon ec2 跟openstack 好像也是類似的方法說
05/21 23:44, 84F
→
05/22 09:13, , 85F
heroku那個是pjax 但實際上沒有那些html檔案
05/22 09:13, 85F
→
05/22 09:13, , 86F
多數網站網址應該都不是對應檔案 web framework都有
05/22 09:13, 86F
→
05/22 09:13, , 87F
router可以用或者說只能這樣用
05/22 09:13, 87F
→
05/22 09:47, , 88F
不太想改server端的部分...
05/22 09:47, 88F
→
05/22 10:07, , 89F
這種做法有沒有麼關鍵字=3= 我想查查..
05/22 10:07, 89F
→
05/22 10:15, , 90F
Front Controller
05/22 10:15, 90F
→
05/22 10:21, , 91F
我倒是看到很多用explode來弄....
05/22 10:21, 91F
‣ 更多 Luos 的文章
文章代碼(AID): #1Fj9qh3s (Ajax)
Ajax 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 Luos 的文章
文章代碼(AID): #1Fj9qh3s (Ajax)