как изменить URL в адресной строке без перезагрузки страницы

Question

У меня есть http://mysite.com/index.php.

И подменю

• home => http://mysite.com/index.php
• о нас => http://mysite.com/about.us.php
• products => http://mysite.com/products.php

Но я хочу, чтобы http://mysite.com/index.php обрабатывал каждый запрос и просто изменял содержимое с помощью Ajax-запроса.Таким образом, сайт загружает только контентную часть, и с ним гораздо быстрее и проще ориентироваться.

Проблема здесь в SEO, потому что единственный URL, который увидит Google, это 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-адрес в адресной строке, не изменив страницу, потому что, чтобы иметь возможность сделать это, я могу посетить меня на http://www.imhackingyou.com/sucker, но изменить адресную строку на http://www.bankofamerica.com/login

Answer 2

Это проблема маршрутизации, а не проблема AJAX.

Если вы использовали другой инструмент ( кашель ASP.NET MVC кашель ), вы быпросто добавьте маршрут (и я надеюсь, что в PHP есть способ сделать это), который принимает URL-адреса, такие как

/home
/products
...

и перенаправляет их, скажем, на

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

Этообычно выполняется с помощью механизма перезаписи, когда используется вне хорошей системы URL-адресов MVC или RESTful.Я использую ISAPI Rewrite на IIS, но если вы работаете со стеком LAMP, я думаю, что Apache предоставляет модуль, который предоставляет те же возможности.(Google .htaccess)

ПРЕДУПРЕЖДЕНИЕ: СЛЕДУЮЩИЕ СЛУЧАИ

И, за сколько это стоит,

1. Избегайте попытокнаписать все ваше приложение на JavaScript.Сервер там по причине.Частью вашей работы в качестве веб-разработчика является поглощение как можно большей части работы на вашем сервере.Проблемы производительности и совместимости браузера приведут вас в бешенство, когда вы попытаетесь сделать все на клиенте.

2. Во многих случаях избегать постбэков имеет смысл, но это не серебряная пуля, которую вы должны пытаться применить к каждой странице.Обычно имеет смысл загружать новую страницу при нажатии на ссылку.Это то, что ожидает пользователь, он более стабилен (поскольку большая часть необходимой инфраструктуры находится на стороне сервера) и не медленнее, чем AJAX-запрос на получение того же самого.

Правила:

1. НИКОГДА не ломайте кнопку возврата.Без тщательного планирования большинство приложений AJAX нарушают это правило.
2. См. Правило № 1.

Answer 3

ЗДЕСЬ РЕШЕНИЕ:

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

Здесь Роб объясняет, как это работает, и у вас есть рабочий пример:

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

Answer 4

Звучит так, как будто это должно быть достигнуто с помощью движка перезаписи , но если у вас есть веская причина использовать AJAX, вы можете изменить URL-адреса с помощью JavaScript, изменив часть после хеша, или еще лучше Хэшбанг:

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

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

Для получения дополнительной информации о hashbang с точки зрения SEO, проверьте http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

Answer 5

Как Shopify делает это тогда?Перейдите на их веб-сайт, нажмите на ссылку Функции и вы увидите, что URL говорит:

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

Затем нажмите на любую из дополнительных ссылок, и вы увидите, что адресв URl изменяется без использования хэша, но нет переворота страницы.

Я не думаю, что они используют ajax для изменения содержимого, потому что все это кажется включенным в скрытые элементы div на странице, но независимоВы, очевидно, можете изменить URL, используя приемы на стороне клиента.