Как сделать так, чтобы браузер не обновлял всю страницу при переходе по URL?

Question

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

Я хочу обрабатывать запросы GET, возвращающие только часть HTML (или специальные команды js), а не всю страницу, и обрабатывать их в стиле AJAX.

Answer 1

Вы можете изменить ваши ссылки через jquery.Примерно так:

$('a.ajax').click(function(ev){
    ev.preventDefault();
    var target=$(this).attr('data-target');
    var url=$(this).attr('href');
    $(target).load(url+' '+target);
}

Это можно использовать в сочетании со следующим HTML:

<div id="output">
 Hello <a href="world.html" class="ajax" data-target="#output">World</a>
<div>

и внутри world.html, которые вам понадобятся:

<div id="output">
  Foo bar baz boo
</div>

Теоретически это должно загрузить содержимое файла dif из "world" в div внутри первого файла, но я не пробовал.Я думаю, что это то, что вам нужно, потому что обычная ссылка все еще там, Google будет правильно индексировать это в обход ajax, и ваши пользователи будут рады видеть, как часть страницы меняется.

Answer 2

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

Однако, если вы пытаетесь преобразовать существующую страницу, которая не разработана таким образом, вам придется использовать JavaScript для изменения гиперссылок, чтобы они вызывали Ajax.Например:

var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {

    var oldUrl = links[i].getAttribute('href');
    links[i].setAttribute('href', 'javascript:void(0)');

    links[i].onclick = (function(url) {
        return function() {
            // Then you can do your AJAX code here
        }
    })(oldUrl);
}

Я рекомендую вам не делать что-то подобное, а скорее создать свою страницу с учетом дизайна AJAX.

Answer 3

Вы можете сделать это 'фальшивыми' ссылками, сделав что-то вроде этого:

<span style="cursor:pointer;" onclick="loadPage('mypagename');">My Link</span>

Функция тогда будет:

function loadPage(pageName){
    // do ajax call here using pageName var
}

Answer 4

Изменение URL без использования хэшей может быть достигнуто с помощью Html5 History API: http://html5demos.com/history

Хотя не поддерживается более старым браузером, поэтому у вас всегда должен быть запасной вариант.