作者erspicu (.)
看板Ajax
标题[心得] 半ajax风格设计方式
时间Fri Jul 20 02:36:51 2012
这种方式或许很多人已经知道了,知道的就当小弟野人献曝吧.
以前工作的关系有小摸过ajax方式的开发,
发现这种开发方式很多事情变得很乾净.很清楚.也很容易,
反正就是跟server api抓资料,回来生成一些item元素插回去html内.
不过一直觉得有什麽地方让我觉得比较不能适应的(以user角度而言),
大概就是无法像传统的页面用页面网址去记录状态,
也就是说常常我要读取某个页面的内容,过去的做法可能是 xxx.php?id=xxxxxx ,
下次要读取时一样从我的最爱中读出 这个网址,改用ajax後很抱歉...
你得进入页面後,用什麽连结或是按钮点一点才能call出你想要的那份网页资料,
非常讨厌.......
因为兴趣的关系,我把flickr部分功能重新开发了(copy flickr的样板移值),
很多地方重构成ajax的开发方式,但是我并不想牺牲原来flickr rest风格的网址,
就算做不到rest风格,也希望网址本身就能指定某种状态,後来折衷,
我的做法是 页面样板是静态的 .html 档 ,
.html里头的javascript会收 querystring ,因此我某个页面状态是以
xxx.html?page=23 这种方式在处理 ,当jquery收到page=23後再跟server api要资料,
比较麻烦的是说,就是不清楚加上querystring後,浏览器还会不会从cache读静态页面,
如果会的话跟原本纯ajax差异也不大了,基本上page载入後,
就不会从网路上重覆载相同的page,浪费网路频宽,
差异只是说会多一到从本机端电脑读cache的动作,
对网路资料流量或是对方主机负荷都跟原本用ajax一样,
不过前提是浏览器只判断页面挡是否更读cache而不会去考虑querystring,
这方面就不清楚了.
目前开发画面
http://dl.dropbox.com/u/61164954/homepage/temp/f1.png
(基本上目标是精简版单人用flickr 会先移除掉社群功能
社群讨论功能以後可能改用fb外挂去做,或是开放openid登入留言,
然後一些太酷炫或是我觉得比较没需要的功能也会拿掉,
另外flickr移值完後,也会把无名风格的介面viewer纳进来,
就是样的一堆照片,你可以选用flickr介面去看或是无名介面去看,
但是这种东西做出来我也不敢放出来...毕竟样板是人家的....
就算无名或是flickr我是付费会员,只是基於备份和想在自家SERVER跑,
非商用...但是以後东西在自己个人架的站PAGE出来後,还是有可能被告...
所以还是低调自用就好..至於法律问题再研究....
只是觉得我是付费会员,把你的功能和介面移植过来自家SERVER跑,
帮你减轻server负担还不好喔....)
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 111.184.192.195
※ 编辑: erspicu 来自: 111.184.192.195 (07/20 02:44)
1F：推 mrbigmouth:不太懂你page=xx的意思 07/20 05:05
2F：→ mrbigmouth:但只要网址相同而且有正确的response header 07/20 05:06
3F：→ mrbigmouth:浏览器是会先抓快取没错 07/20 05:06
4F：→ mrbigmouth:基本上 通常的作法是用time=xx 07/20 05:07
5F：→ mrbigmouth:或者直接生产出一个唯一的hash乱数值 07/20 05:07
6F：→ mrbigmouth:以该网页的最後修改时间为基准 这样只要网址是相同 07/20 05:08
7F：→ mrbigmouth:就代表该网页的内容一定是不变的 07/20 05:08
8F：→ mrbigmouth:这样Cache Control就可以设成永久快取甚至是public 07/20 05:09
9F：→ mrbigmouth:让proxy快取 07/20 05:09
10F：→ Canboo:网址问题有history可以解决，catch有我可以夹timer解决... 07/20 08:06
11F：→ Canboo:个人认为完善的作法是先纯HTML所有LINK都正常後，再用js读 07/20 08:07
12F：→ Canboo:取要使用的A来套AJAX，这样才会让没开JS的人也正常操作 07/20 08:08
13F：→ superpai:网址问题为何不用history api 07/20 08:47
http://ithelp.ithome.com.tw/question/10030581
简单来说就是jquery读取网页的querystring後再跟server发出api request
我个人是用这个方法 自己是觉得还满好用的
history api可以把某个页面状态加到我的最爱网址记录中吗?
※ 编辑: erspicu 来自: 60.248.56.181 (07/20 09:42)
14F：推 LPH66:要能留状态的话可以搜寻一下 ajax deeplinking 07/20 10:03
原理似乎都是来至於读取hash的做法
※ 编辑: erspicu 来自: 60.248.56.181 (07/20 10:10)
15F：推 mrbigmouth:请google html5 history.pushState 07/20 13:03
16F：→ mrbigmouth:不过这是html5的啦 07/20 13:04
17F：→ mrbigmouth:记得之前这个板有讨论过某个套件的样子 07/20 13:04
18F：→ mrbigmouth:嗯 叫pjax 07/20 13:04
19F：→ mrbigmouth:总之就是 Server端依据是否有额外的request header 07/20 13:05
20F：→ mrbigmouth:来决定吐出整页内容(给我的最爱or搜寻器)或者吐出ajax 07/20 13:05
21F：→ mrbigmouth:想取得的部份内容(给浏览者点下连结後的ajax) 07/20 13:06
22F：→ mrbigmouth:然後再用pushState记录换页状态，供上下页使用 07/20 13:06
23F：→ hermitwhite:这样的做法，是不是会有不能用搜寻引擎找到内容的问题 07/20 23:04
ajax吐出来的东西 搜寻引擎应该都抓不到吧?
※ 编辑: erspicu 来自: 111.184.192.195 (07/20 23:20)
24F：→ hermitwhite:哦好像是，你这个骨子里还是ajax...我脑袋打结了 07/20 23:24
25F：推 tomap41017:pjax可以看一下：Ｐ 07/21 00:46
26F：→ mrbigmouth:pjax就是为了兼顾让搜寻引擎抓资料跟ajax的解决方案 07/21 07:30
27F：→ hermitwhite:pjax好像一次解决了搜寻和纪录换页的问题。我个人之前 07/21 11:56
28F：→ hermitwhite:的做法比较原始，是用iframe代替ajax来传输资料；不过 07/21 11:57
29F：→ hermitwhite:就没有ajax能节省http request的优点。 07/21 11:59
30F：→ hermitwhite:不过it doesn't work in IE < 10... 07/22 00:03
31F：推 mrbigmouth:ajax啥时能节掉http request了?o_O 07/22 01:25
32F：→ mrbigmouth:WebSocket才能免掉http request吧 07/22 01:25
33F：→ hermitwhite:说http request也不太对，不过那是其中一部分（包含介 07/22 01:44
34F：→ hermitwhite:面的按钮还有header里面连结的档案等）。 07/22 01:44
35F：→ Canboo:请先了解history.pushState，再来回说可不可以 07/22 16:45
37F：→ Canboo:不支援HTML5的浏览器也是看的到 07/22 16:48