這兩個方法讓 AJAX 技術又多了一些新的進階應用。
AJAX 的無刷新頁面更動頁面內容是不錯, jQuery的出現後我想一般人都可以輕鬆無壓力的使用， 但是這種作法對於 "上一頁" 和 "下一頁" 的功能 以及 SEO 並不友善 , 然而 HTML5 history API 的 pushState( ) 和 replaceState( ) 這兩種方法可以有效解決上述問題 , ( SEO老實說不確定 ) , 以下是範例程式碼:
大家在開啟範例後，應該可以發現兩個方法其實大同小異。
唯一區別是 pushState( ) 會 "新增" 一個歷史實體 ( history entry ), 而 replaceState( ) 則是 "更新" 目前的歷史實體, 我們可以看情況決定如何應用 。
當然 ， 這個範例僅只是讓大家體會一下這兩個方法的基本操作, 要像 GitHub 和 Facebook 如變魔術般的調換頁面還需要輔以各種動畫特效及透過 AJAX 與後端程式做搭配 ，有機會的話也許會在下個案子中實際套用看看吧~
AJAX 的無刷新頁面更動頁面內容是不錯, jQuery的出現後我想一般人都可以輕鬆無壓力的使用， 但是這種作法對於 "上一頁" 和 "下一頁" 的功能 以及 SEO 並不友善 , 然而 HTML5 history API 的 pushState( ) 和 replaceState( ) 這兩種方法可以有效解決上述問題 , ( SEO老實說不確定 ) , 以下是範例程式碼:
prState.html
music.html ( 這邊當然只是因為示範才這們作, 實際情況的設計當然不是如此 )
大家在開啟範例後，應該可以發現兩個方法其實大同小異。
唯一區別是 pushState( ) 會 "新增" 一個歷史實體 ( history entry ), 而 replaceState( ) 則是 "更新" 目前的歷史實體, 我們可以看情況決定如何應用 。
當然 ， 這個範例僅只是讓大家體會一下這兩個方法的基本操作, 要像 GitHub 和 Facebook 如變魔術般的調換頁面還需要輔以各種動畫特效及透過 AJAX 與後端程式做搭配 ，有機會的話也許會在下個案子中實際套用看看吧~
0 意見:
張貼留言