2013年2月27日 星期三

小練習:用PHP+MySQL+Ajax做模仿yahoo首頁的新聞Tab


用PHP+MySQL+Ajax做模仿yahoo首頁的新聞Tab 


Demo URL : http://yiying2.ueuo.com/news_board/
(免費空間還沒被砍之前應該都看得到)
My GitHub: https://github.com/winwu/AjaxPractive-NewsBoard_Tab.git  (有需要的話可以參考)


我今天試做了一個仿yahoo首頁(台灣版)的新聞消息Tab,我是說操作起來很像,但是實作方向有點不太一樣,因為我想要練習ajax...所以我用ajax去要資料,我後來發現yahoo好像是一開始就把資料load出來了,而我這個做法變成是會一直去做http request的請求,不是很符合前端優化的標準,我知錯了...但是我的本意只是想要知道到怎麼用ajax的到想要的資料,這只是一個練習(不要這麼嚴肅><)。


畫面上簡單來說就是,左邊欄我做了一個顯示新聞的區塊,並且依照category去分幾個Tab。
右欄是一個form,可以送一筆完整的新聞資料到database,而去觸發左邊欄位的Tab會更新最新的兩筆該category的資料。
每觸發一次Tab,就可以看到送出一筆請求。(如下圖)






並且可以看到成功要到的資料:




page speed檢查:

用page speed檢查一下,竟然還有86分,可能是資料量少吧xdd




心得與結論:
  • 滑鼠滑過tab的行為要用mouseover而不能用hover,因為hover會產生兩次request,而mouseover只會產生一次
  •  $.ajaxSetup({ cache: true });//其實這行有沒有寫都一樣,只是一個題外話,順便測試一下而已,基本上cache的值,本來就預設是true,設定false表示你不想讓瀏覽器去抓cache。
    這個畫面,是$.ajaxSetup({cache:false});時所產生的request:
    當cache是false時,送出去的request會自動產生_=[TIMESTAMP]的參數,取得最新的頁面結果。



沒有留言:

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...