這系列文章主要是學習Html5相關的知識點,以學習API知識點為入口,由淺入深的引入實例,讓大家一步一步的體會h5能夠做什麼,以及在實際項目中如何去合理的運用達到使用自如,完美駕馭O(∩_∩)O~,
一,開篇分析
好了,廢話不多說,直接進入今天的主題,今天主要講的是History API及在單頁應用中的作用,並且會引入一個實際的例子做為講解的原型範例,先來看看History API:
為了提高Web頁面的響應速度,越來越多的開發者開始採用單頁面結構(single-page application)的解決方案。所謂的單頁面結構就是指多個頁面間切換時,不刷新當前整個頁面,更新頁面展示數據,並且相應地改變地址欄中的url,以使用戶可以分享這個url。
如果你使用chrome或者firefox等瀏覽器訪問github.com、plus.google.com等網站時,細心的你會發現頁面之間的點擊是通過ajax異步請求的,
同時頁面的URL發生了了改變。並且能夠很好的支持瀏覽器前進和後退。是什麼有這麼強大的功能呢?恩,這就會說到今天的主角,HTML5裡引用了新的API:
history.pushState和history.replaceState,就是通過這個接口做到無刷新改變頁面URL的。先來看看history接口的詳細方法:
複製代碼