作者Luos (Soul)
看板Ajax
标题[问题] 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
1F：推 knuckles:HTML5 History API 05/17 14:49
2F：→ Luos:这样IE7 8 怎麽打的开=3= 05/17 14:56
3F：→ xiphoid:不支援就普通的读取新网页 05/17 14:58
4F：→ Luos:我手边居然没有IE7能试... 05/17 15:04
5F：→ xiphoid:呃 刚刚测试 ie8用hash当fallback 05/17 15:05
6F：→ Luos:我在网址列直接输入www.dropbox.com/home/Photos也行 05/17 15:09
7F：→ Luos:这不是History API 作的吧 05/17 15:10
8F：→ xiphoid:html5 history api只是能不靠hash hack改网址不重读网页 05/17 15:17
9F：→ xiphoid:跟有上/下一页纪录 网页内容怎麽产生不是它的业务 05/17 15:17
10F：→ Luos:html5demos.com/history 也能做到上下页说 05/17 15:23
11F：推 mesak:HTML5 history.pushState 05/17 20:57
12F：推 Canboo:TML5 History无误，请研究完再来质疑 05/17 22:02
13F：→ Luos:研究中 希望能生出来 05/17 22:45
14F：推 tomap41017:可以考虑pjax 05/17 23:22
16F：→ Luos:Pjax看来不错 来玩玩看 05/18 12:10
17F：→ Luos:Popstate 之後怎麽history.state是null.... 05/18 12:11
20F：→ Luos:pjax 没有fallback... 改完History.js 好了 05/18 14:53
21F：→ Luos:眼花了 pjax 有fallback 05/18 17:20
22F：→ Luos:我输了 能不能推荐pjax的教学或sample... 05/21 12:00
23F：→ Luos:xiphoid大的网站到底怎麽运作的? 完全看不出来Orz 05/21 12:03
24F：→ Luos:找到的范例都只有一行 $('a').pjax('#main');为什麽能够运行? 05/21 12:06
25F：→ xiphoid:那个网站就一般静态网页而已 上面选单是Chosen快速搜寻用 05/21 12:48
26F：→ xiphoid:没用pjax的情况就很平常的一堆html连来连去 05/21 12:48
27F：→ xiphoid:用pjax後变成由ajax读html改内容+history api改网址 05/21 12:49
28F：→ xiphoid:$('a').pjax('#main')是把网页的'a'绑click事件 05/21 12:49
29F：→ xiphoid:做上上个推文的行为 #main是放新网页内容的dom 05/21 12:49
30F：→ xiphoid:自己网站内部连结以/开头 所以用$('#main a[href^="/"]') 05/21 12:50
31F：→ xiphoid:不过刚发现pjax似乎会自己判断 cross origin就跳过 05/21 12:50
32F：→ Luos:谢谢xiphoid大详细的解说 我想问的是 第一个网页里哪里有pjax 05/21 13:09
33F：→ Luos:是在requireJS里? 我查的requireJS跟pjax 没关系说=3= 05/21 13:11
34F：→ Luos:$('a').pjax('#main') 让我无法理解的部分是 a没有preventDef 05/21 13:12
35F：→ Luos:ault 不是会开启网页吗 至少我自己做的会=3= 05/21 13:13
36F：→ Luos:再来就是 哪里定义URL? pjax会直接读取a的href? 05/21 13:14
37F：→ Luos:git上面写得option里面有url的定义 url写在option里面虽然成 05/21 13:16
38F：→ Luos:功 但是所有的a都连到同一个网页也没意义就是了=w= 05/21 13:17
39F：→ Luos:谢谢xiphoid大愿意回文教我 <(_ _)> 05/21 13:19
40F：→ xiphoid:不客气._. requirejs跟这个无关 只是用来把js缩成一个档案 05/21 13:35
43F：→ xiphoid:preventDefault: 83行 05/21 13:36
44F：→ Luos:我刚好也在看pjax的jquery 为什麽google这麽久都没想到要去 05/21 13:38
45F：→ Luos:档案咧=3= data-pjax这个attr一定要吗? 05/21 13:40
46F：→ xiphoid:有 source code 有真相 05/21 13:40
47F：→ xiphoid:不用data-pjax就要用.pjax('#container')定义内容填哪 05/21 13:42
48F：→ Luos:这就是说pjax是到href去把html捞出来 这跟我\要做的有点微妙 05/21 13:58
49F：→ Luos:的不同 我是要从php把html捞出来 再把href里的url push到网址 05/21 14:00
50F：→ xiphoid:可以直接$.pjax({url: '/authors', container: '#main'}) 05/21 14:04
51F：→ xiphoid:不用透过<a> 05/21 14:04
52F：→ Luos:列 还有个疑问 没设定fragment不就会把整个html load回来吗? 05/21 14:04
53F：→ Luos:对吼... 只不过这样就不能用href来存假网址了 05/21 14:08
54F：→ xiphoid:"pjax on the server side" 能从header盼断是不是pjax 05/21 14:15
55F：→ Luos:那就是要在server判断 如果是pjax就只传部分的html? 05/21 14:20
56F：→ Luos:这样要跟三方的网页兼容就很困难了 05/21 14:20
57F：→ Luos:$.pjax 的话没有href 怎麽pushState...? 05/21 14:21
58F：→ xiphoid:直接传新网址给$.pjax *url: '/authors'* 05/21 14:23
59F：→ Luos:/authors 会被push到网址列? 05/21 14:35
60F：→ xiphoid:对 05/21 14:48
61F：推 tomap41017:pjax小弟已经爱上了XDDD 05/21 14:51
62F：→ Luos:有没有办法push我指定的一段网址列上去? 05/21 14:54
63F：→ Luos:打个比方 就像dropbox一样 我点开Photos的folder 05/21 14:56
64F：→ Luos:网址会加上/Home/Photos 但是实际上我是到别的php去把html lo 05/21 14:57
65F：→ Luos:od回来? 05/21 14:57
67F：→ xiphoid:上下一页内容不会更新 而且重新整理也破功 放弃... 05/21 16:33
68F：→ Luos:我已经在改他的source code了 不过上下页两曾就会失败 05/21 16:41
69F：→ Luos:重新整理 不会改.... 05/21 16:41
70F：→ xiphoid:重新整理没办法 网站上就是没这个档案或route 05/21 16:48
71F：→ xiphoid:或许放弃pushState改用hash当history吧 05/21 16:48
72F：→ Luos:这是个好想法 还是很好奇dropbox怎麽办到的~ 05/21 16:56
73F：→ xiphoid:有什麽原因不能让pjax直接读网址? 05/21 17:08
74F：→ Luos:其实比较重要的是希望能像db一样能用上一页来回到上一层 05/21 17:12
75F：→ Luos:网址列变成只是路径 实际上档案放置是我自己定义的 05/21 17:14
76F：→ xiphoid:网址不需要直接对应档案 /index.php/abc 05/21 18:20
77F：→ xiphoid:/index.php/abc/def 这些网址都能用index.php来处理 05/21 18:20
78F：→ xiphoid:(用$_SERVER['REQUEST_URI']判断) 05/21 18:20
79F：→ xiphoid:配合mod_rewrite能再把网址的index.php去掉 05/21 18:20
80F：→ xiphoid:pjax.heroku.com/ 也不是真的有dinosaurs.html 05/21 18:25
82F：→ Luos:Heruku那个不是用pjax吗？ 05/21 23:39
83F：→ Luos:RequestURI原来可以这样用 明天试试 05/21 23:42
84F：→ Luos:说起来amazon ec2 跟openstack 好像也是类似的方法说 05/21 23:44
85F：→ xiphoid:heroku那个是pjax 但实际上没有那些html档案 05/22 09:13
86F：→ xiphoid:多数网站网址应该都不是对应档案 web framework都有 05/22 09:13
87F：→ xiphoid:router可以用或者说只能这样用 05/22 09:13
88F：→ Luos:不太想改server端的部分... 05/22 09:47
89F：→ Luos:这种做法有没有麽关键字=3= 我想查查.. 05/22 10:07
90F：→ xiphoid:Front Controller 05/22 10:15
91F：→ Luos:我倒是看到很多用explode来弄.... 05/22 10:21