前言：
一直以來都只專心在Html、Css、Jquery的撰寫，第一次看到網站不跳頁轉場的時候還以為是不是先跑了離場動畫，跳頁再加開場動畫.....，後來聽到朋友說那是Ajax才知道，好吧，我知道的太少了。
初探：
一開始測試的時候遇到極大的問題，因為測試了半天都沒效果，就是抓不到json檔，後來才發現一定要丟到伺服器！！ 本機是什麼鬼都不會出現的...
知道正確環境後，先是開始抓取資料顯示圖片，當然你的json檔必須是正確的(json檔Hen龜毛)，檢查Json檔
然後我是用Jquery來使用Ajax呼叫json檔，下圖就是測試的程式碼。
主要是將json檔中各data對應的title和images以item.title和item.images抓出來，這個是複製書上的範例，所以它是宣告一個陣列，把抓出來的值丟進去，再加到.content裡面。
進階：
知道如何抓資料後，就開始進行切換頁面了，先測試置換標題跟圖片，然後加了換場效果。
設置了header來切換頁面，轉場動畫隨便用4個div來重疊，然後判斷點擊的li的id來知道要抓哪個data的title和images。
成果如下：
最終：
開始有點Fu了，要真的切換頁面了，以我的大腦只能想到....我該不會要把各頁面的資料都塞到json裡面吧？
嗯，我也只能這樣做啊(苦笑，雖然覺得哪裡怪怪，但還是硬著頭皮做了。
塞進去後，恩，真的可以欸，就是把內容整個替換掉的概念，這邊直接把ajax換頁抓取json寫成function，
因為在測試的時候發現一個問題，那就是按上一頁就GG了欸，所以就用到了history API的用法
網路上有許多介紹：http://l7960261.blogspot.tw/2014/08/ajax-url-f5.html
也有提供History.js的用法，但我用不起來(哈，所以就用我能理解的，一開始進入頁面replaceState，click連結時pushState，這樣每個頁面都有state可以呼叫，之後就是用event.state.page來判斷是哪一頁，若等於0就是回到首頁。成果如下，可以看看上方的url變更情況：
後記：
其實還有一個嚴重的問題沒解決(汗，那就是假設我直接網址打內頁的網址，例如XXX/company，是會出現錯誤的，但我目前的認知是應該要靠PHP幫忙拉，所以只能先做到這樣，除非我哪天開竅再來解決這個Bug。
另外就是維護問題，畢竟把所有div、li、span什麼的都塞在json檔裏頭，怎麼想都怪，後人要維護應該也頭很大吧(看隆沒，就等我爾後知道是否有更好的方法囉。
留言列表
