Есть ли способ AJAX загрузить страницу и изменить URL в строке URL без хеширования?

Question

Это, вероятно, получит громкое "нет", но мне интересно, возможно ли динамическое изменение URl с использованием хеширования и без вызова http-запроса из браузера?

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

ОБНОВЛЕНИЕ: Возможно ли это, учитывая, что я хочу избежать перезагрузки страницы (причина в том, что она выглядит плохо), чтобы остановить перезагрузку, перехватывая хэш с PHP перед отправкой заголовков, и перенаправляя перед загрузка страницы. Таким образом, загружается только одна страница, и перенаправление практически невидимо для пользователя. Не знаете, как это сделать, но кажется, что это возможно?

Answer 1

Да, это возможно. Я часто делаю это, чтобы сохранить состояние в хэш-части URL. В результате страница не перезагружается, но если пользователь перезагружает , они перенаправляются на нужную страницу.

При использовании этого метода URL будет выглядеть следующим образом: "/ index # page = home" или "/ index # page = about"

Вам нужно написать функцию JavaScript, которая обрабатывает навигацию, и вам понадобится содержащий div, который переписывается с содержимым, полученным из AJAX.

<a href="javascript:void(0);" onClick="link('home')">Home</a>
<a href="javascript:void(0);" onClick="link('about')">About</a>
<a href="javascript:void(0);" onClick="link('questions')">Questions</a>
<div id="content"></div>

<script type="text/javascript">
   function link(page) {
      location.hash = "page="+page;
      loadPage(page);
   }

   // NOTE: This is using MooTools.  Use the AJAX method in whatever
   // JavaScript framework you're using.
   function loadPage(page) {
       new Request.HTML({
           url: "/ajax/"+page+".html",
           onSuccess: function(tree, elements, html) {
               document.id('content').setProperty('html', html);
           }
       }).get();
    }
</script>

Теперь вам также нужно иметь что-то, что проверяет хеш при загрузке страницы, чтобы изначально загрузить нужный контент. Опять же, это использует MooTools, но используйте любой метод onLoad, который предоставляет ваш JavaScript-фреймворк.

<script type="text/javascript">
    document.addEvent('domready', function() {
        parts = location.hash.split('=');
        loadPage(parts[1]);
    }
</script>

Answer 2

Хорошо, проблема в том, что открытие ссылки AJAX в форме http://example.com/#xyz приводит к загрузке в браузер полной страницы, а затем содержимое, измененное AJAX, изменяется после загрузки страницы и проверки хэш-частиего URL.Пользователь имеет опыт диктовки.

Вы можете значительно улучшить это, сделав страницу, которая просто содержит статические элементы - меню и т. Д. - и загрузку GIF в области содержимого.Эта страница проверяет свой URL при загрузке и динамически выбирает содержимое, указанное в хэш-части.Страница может иметь любой URL, который вы хотите;мы будем использовать http://example.com/a.Ссылки на эту страницу (http://example.com/a#xyz) теперь обеспечивают хороший пользовательский опыт для пользователей с включенными сценариями.

Однако новые пользователи не будут заходить на сайт при получении http://example.com/a;они принесут http://example.com.Это нормально - обслуживайте всю страницу, включая содержимое домашней страницы и ссылки, для работы которых не требуется сценарий (например, http://example.com/xyz).Скрипт, запускаемый при загрузке этой страницы, должен изменить ссылку AJAXable на их форму AJAX (http://example.com/a#xyz);таким образом, первая ссылка, по которой пользователь нажимает, приведет к полной загрузке страницы, а последующие - нет.

Единственная оставшаяся проблема заключается в том, что пользователь без сценария получает ссылку AJAX.Вы можете добавить блок noscript на страницу AJAX, которая содержит сообщение с объяснением проблемы и ссылку на домашнюю страницу;Вы можете включить инструкции о том, как включить сценарии или даже как изменить ссылку, удалив a# и нажав клавишу ввода.

Answer 3

Это не очень хороший ответ, но вы можете предложить другую ссылку на самой странице; например, если в адресной строке отображается /#xyz, вы включаете ссылку на /xyz где-то на странице. Вы также можете добавить ссылку или кнопку, которая использует скрипт для закладки страницы, которая снова будет использовать форму ссылки без AJAX.