作者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