如何在地址欄中更改網址而不重新加載頁面

Question

我有http://mysite.com/index.php。

和子菜單

• 首頁=>http://mysite.com/index.php
• 關於我們=>http://mysite.com/about.us.php
• 產品=>http://mysite.com/products.php

但我想http://mysite.com/index.php處理每一個請求，只是使用Ajax請求更改內容。這樣，該網站只加載內容部分，並且更快，更容易導航。這裏

問題是SEO，因爲只有網址谷歌將看到的是http://mysite.com/index.php，我想http://mysite.com/about-us關聯到關於我們內容，http://mysite.com/product到產品內容等

我知道我可以用PHP來完成這項工作，只需讀取URL並即時編寫Ajax，但是這樣做整個頁面將每次都重新加載。 有沒有辦法做到這一點，而無需重新加載整個頁面？ 我想我需要的是在子菜單中有一個常規錨點，檢查指向「http://mysite.com/contact-us」，但點擊時不是打開此頁面，而是處理Ajax請求。

如果這是可能的，Google可能會將此視爲黑帽大概，對吧？

問候 亞歷

Answer 1

你不能更改地址欄中的URL不會更改網頁，因爲要能做到這一點我couldlet你看我在http://www.imhackingyou.com/sucker但改變地址欄閱讀http://www.bankofamerica.com/login

Answer 2

這是一個路由問題，而不是AJAX問題。

如果您正在使用另一種工具（咳嗽 ASP.NET MVC 咳嗽），你只需要添加一個路由（和我希望有辦法在PHP中做到這一點），其接受的網址像

/home 
/products 
... 

和路由他們，說，

/index.php?area=home 
/index.php?area=products 

這是一個良好的MVC或REST風格的URL系統之外使用時通常與重寫引擎來實現的。我在IIS上使用ISAPI Rewrite，但是如果你在LAMP堆棧上工作，我認爲Apache提供了一個提供相同功能的模塊。 （谷歌.htaccess）

警告：RANT FOLLOWS

而且，對於它的價值，

1. 避免試圖使用JavaScript編寫整個應用程序。服務器在那裏是有原因的。作爲Web開發人員的一部分工作是儘可能地將大量工作吸收到服務器上。當您嘗試在客戶端上執行所有操作時，瀏覽器性能和兼容性問題會讓您生氣。

2. 在很多情況下避免回傳是有道理的，但這不是你應該嘗試應用到每個頁面的銀彈。通常，點擊鏈接時加載新頁面是有意義的。這是用戶期望的，它更穩定（因爲大部分基礎設施都是服務器端的），並且不會比AJAX請求檢索相同的東西慢。

規則：

1. 永不斷線的後退按鈕。如果不仔細計劃，大多數AJAX應用程序都會違反此規則
2. 參見規則＃1。

Answer 3

這聽起來像它應該有一個rewrite engine來完成，但假設你有一個很好的理由使用AJAX，可以通過哈希後修改部分改變與JavaScript網址，或者更好的是，該hashbang：

window.location.hash = "#!about-us"; 

• http://mysite.com/
• http://mysite.com/#!about-us
• http://mysite.com/#!products

有關從SEO的角度來看的hashbang更多信息，請http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

Answer 4

如何Shopify做到這一點呢？去他們的網站，點擊功能鏈接，你會看到URL說：

http://www.shopify.com/tour/sell-online

然後在任意的子鏈接的點擊，你會看到，在不使用的URL的地址發生變化一個哈希，但沒有頁面翻轉。

我不認爲他們使用ajax來更改內容，因爲它似乎都包含在頁面上的隱藏div中，但無論如何，您都可以使用客戶端技巧顯然更改URL。

Answer 5

這裏有一個解決方案：

window.history.pushState(data, title, url) 

這裏羅布解釋它是如何工作的，你有一個工作的例子：

http://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate