用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]的參數，取得最新的頁面結果。
- 其實我最不懂的地方是不知道怎麼從php丟資料回來給index.php，結論: google搜尋關鍵字 "json_encode" ，可以參考這篇文章 PHP 讓 json_encode() 指定回傳格式
沒有留言:
張貼留言
若你看的文章，時間太久遠的問題就別問了，因為我應該也忘了... XD