如何使用ajax實現無刷新改變頁面內容和地址欄URL

本篇內容主要講解“如何使用ajax實現無刷新改變頁面內容和地址欄URL”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何使用ajax實現無刷新改變頁面內容和地址欄URL”吧!

與傳統的AJAX的區別

傳統的ajax有如下的問題：

雖然ajax可以無刷新改變頁面內容，但無法改變頁面URL

其次為了更好的可訪問性，內容發生改變后，改變URL的hash。但是hash的方式不能很好的處理瀏覽器的前進、后退等問題

有的瀏覽器引入了onhashchange的接口，不支持的瀏覽器只能定時去判斷hash是否改變

再有，ajax的使用對搜索引擎很不友好，往往蜘蛛爬到的區域是空的

為了解決傳統ajax帶來的問題，HTML5里引入了新的API，即：history.pushState, history.replaceState

可以通過pushState和replaceState接口操作瀏覽器歷史，并且改變當前頁面的URL。

pushState是將指定的URL添加到瀏覽器歷史里，replaceState是將指定的URL替換當前的URL。

如何調用

復制代碼 代碼如下:

var state = {
 title: title,
 url: options.url,
 otherkey: othervalue
};
window.history.pushState(state, document.title, url);

state對象除了要title和url之外，也可以添加其他的數據，比如：還想將一些發送ajax的配置給保存起來。

replaceState和pushState是相似的，不需要多做解釋。

如何響應瀏覽器的前進、后退操作

window對象上提供了onpopstate事件，上面傳遞的state對象會成為event的子對象，這樣就可以拿到存儲的title和URL了。

復制代碼 代碼如下:

window.addEventListener('popstate', function(e){
  if (history.state){
 var state = e.state;
    //do something(state.url, state.title);
  }
}, false);

這樣就可以結合ajax和pushState完美的進行無刷新瀏覽了。

一些限制

1、無法跨域，這個是必然的。引用曾經在網上看到的一句經典的話：“如果javascript可以跨域的話，那他就可以逆天了！”

2、state對象雖然可以存儲很多自定義的屬性，但值不能是個對象。

對應后端的一些處理

這種模式下除了當前使用ajax可以無刷新瀏覽外，還要保證直接請求改變的URL后也可以正常瀏覽，所以后端要對這些處理下。

1、對結合pushState的ajax可以發送一個特殊的頭，如： setRequestHeader(‘PJAX', ‘true')。

2、后端獲取到有PJAX=true的header時，將頁面中通用的部分都不輸出。比如：PHP可以通過下面的判斷

復制代碼 代碼如下:

function is_pjax(){
 return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}

雖然接口上只有pushState、replaceState、onpopstate，但在使用的時候還是要做很多處理的。

到此，相信大家對“如何使用ajax實現無刷新改變頁面內容和地址欄URL”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！