PTT數位生活區 / Ajax

[心得] 半ajax風格設計方式

看板Ajax作者 (.)時間13年前 (2012/07/20 02:36), 編輯推噓5(5推 0噓 32→)
留言37則, 6人參與, 最新討論串1/1
這種方式或許很多人已經知道了,知道的就當小弟野人獻曝吧. 以前工作的關係有小摸過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)
推
07/20 05:05, , 1F
不太懂你page=xx的意思
07/20 05:05, 1F
→
07/20 05:06, , 2F
但只要網址相同而且有正確的response header
07/20 05:06, 2F
→
07/20 05:06, , 3F
瀏覽器是會先抓快取沒錯
07/20 05:06, 3F
→
07/20 05:07, , 4F
基本上　通常的作法是用time=xx
07/20 05:07, 4F
→
07/20 05:07, , 5F
或者直接生產出一個唯一的hash亂數值
07/20 05:07, 5F
→
07/20 05:08, , 6F
以該網頁的最後修改時間為基準　這樣只要網址是相同
07/20 05:08, 6F
→
07/20 05:08, , 7F
就代表該網頁的內容一定是不變的
07/20 05:08, 7F
→
07/20 05:09, , 8F
這樣Cache Control就可以設成永久快取甚至是public
07/20 05:09, 8F
→
07/20 05:09, , 9F
讓proxy快取
07/20 05:09, 9F
→
07/20 08:06, , 10F
網址問題有history可以解決，catch有我可以夾timer解決...
07/20 08:06, 10F
→
07/20 08:07, , 11F
個人認為完善的作法是先純HTML所有LINK都正常後，再用js讀
07/20 08:07, 11F
→
07/20 08:08, , 12F
取要使用的A來套AJAX，這樣才會讓沒開JS的人也正常操作
07/20 08:08, 12F
→
07/20 08:47, , 13F
網址問題為何不用history api
07/20 08:47, 13F
http://ithelp.ithome.com.tw/question/10030581 簡單來說就是jquery讀取網頁的querystring後再跟server發出api request 我個人是用這個方法 自己是覺得還滿好用的 history api可以把某個頁面狀態加到我的最愛網址記錄中嗎? ※ 編輯: erspicu 來自: 60.248.56.181 (07/20 09:42)
推
07/20 10:03, , 14F
要能留狀態的話可以搜尋一下 ajax deeplinking
07/20 10:03, 14F
原理似乎都是來至於讀取hash的做法 ※ 編輯: erspicu 來自: 60.248.56.181 (07/20 10:10)
推
07/20 13:03, , 15F
請google html5 history.pushState
07/20 13:03, 15F
→
07/20 13:04, , 16F
不過這是html5的啦
07/20 13:04, 16F
→
07/20 13:04, , 17F
記得之前這個板有討論過某個套件的樣子
07/20 13:04, 17F
→
07/20 13:04, , 18F
嗯 叫pjax
07/20 13:04, 18F
→
07/20 13:05, , 19F
總之就是　Server端依據是否有額外的request header
07/20 13:05, 19F
→
07/20 13:05, , 20F
來決定吐出整頁內容(給我的最愛or搜尋器)或者吐出ajax
07/20 13:05, 20F
→
07/20 13:06, , 21F
想取得的部份內容(給瀏覽者點下連結後的ajax)
07/20 13:06, 21F
→
07/20 13:06, , 22F
然後再用pushState記錄換頁狀態，供上下頁使用
07/20 13:06, 22F
→
07/20 23:04, , 23F
這樣的做法，是不是會有不能用搜尋引擎找到內容的問題
07/20 23:04, 23F
ajax吐出來的東西 搜尋引擎應該都抓不到吧? ※ 編輯: erspicu 來自: 111.184.192.195 (07/20 23:20)
→
07/20 23:24, , 24F
哦好像是，你這個骨子裡還是ajax...我腦袋打結了
07/20 23:24, 24F
推
07/21 00:46, , 25F
pjax可以看一下：Ｐ
07/21 00:46, 25F
→
07/21 07:30, , 26F
pjax就是為了兼顧讓搜尋引擎抓資料跟ajax的解決方案
07/21 07:30, 26F
→
07/21 11:56, , 27F
pjax好像一次解決了搜尋和紀錄換頁的問題。我個人之前
07/21 11:56, 27F
→
07/21 11:57, , 28F
的做法比較原始，是用iframe代替ajax來傳輸資料；不過
07/21 11:57, 28F
→
07/21 11:59, , 29F
就沒有ajax能節省http request的優點。
07/21 11:59, 29F
→
07/22 00:03, , 30F
不過it doesn't work in IE < 10...
07/22 00:03, 30F
推
07/22 01:25, , 31F
ajax啥時能節掉http request了?o_O
07/22 01:25, 31F
→
07/22 01:25, , 32F
WebSocket才能免掉http request吧
07/22 01:25, 32F
→
07/22 01:44, , 33F
說http request也不太對，不過那是其中一部分（包含介
07/22 01:44, 33F
→
07/22 01:44, , 34F
面的按鈕還有header裡面連結的檔案等）。
07/22 01:44, 34F
→
07/22 16:45, , 35F
請先瞭解history.pushState，再來回說可不可以
07/22 16:45, 35F
→
07/22 16:47, , 36F
http://deloin.victo.com.tw/ 內頁有用history
07/22 16:47, 36F
→
07/22 16:48, , 37F
不支援HTML5的瀏覽器也是看的到
07/22 16:48, 37F
‣ 更多 erspicu 的文章
文章代碼(AID): #1G25F6XF (Ajax)
Ajax 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 erspicu 的文章
文章代碼(AID): #1G25F6XF (Ajax)