Как использовать API истории JavaScript - PullRequest
Новая
       32

Как использовать API истории JavaScript

1 голос
/ 21 мая 2011

В блоге github о том, как они создали новый ползунок дерева, они сообщают следующее: 

$('#slider a').click(function() {
  history.pushState({ path: this.path }, '', this.href)
  $.get(this.href, function(data) {
    $('#slider').slideTo(data)      
  })
  return false  
})

Однако я не понимаю, как это работает? Они AJAX запрашивают всю новую страницу, так что от <html> до </html> включительно, затем, казалось бы (используя метод slideTo ??), помещают эти данные в элемент слайдера? Конечно, тогда у вас будет страница на странице (вероятно, с глюками CSS).

Как при использовании AJAX и History API вы получаете только определенный раздел, который изменился? Или HTML-код заменен (но в приведенном выше примере это не так)?

Где на самом деле используется Gavub Javascript? И прав ли я, что приведенный пример не может быть тем, что используется, поскольку он не будет работать должным образом?

Ответы [ 2 ]

3 голосов
/ 21 мая 2011

Код на стороне сервера может проверить заголовок X-Requested-With и убедиться, что он равен XMLHttpRequest (jQuery устанавливает этот заголовок по умолчанию) и отправлять только внутреннее представление, если запрошено с помощью XHR.

Пример Firebug

FireBug Example

Как видите, возвращаемый HTML сильно отличается от того, что было бы, если бы запрос не был с XHR.

Пример PHP-кода

С помощью самоочевидных функций. 

$xhr = (isset($_SERVER['X-Requested-With')
    AND $_SERVER['X-Requested-With'] === 'XMLHttpRequest');

$view = View::factory('inner/something');

if ( ! $xhr) {
    $view = View::factory('template')
        ->set('innerView', $view);
}

echo $view;
2 голосов
/ 21 мая 2011

Прежде всего, я предполагаю, что вы знаете, как pushState() и onpopstate оба работают.

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

Как загрузить часть страницы?Предположим, что на каждой странице есть такая структура HTML: 

<div id="contentContainer">
    <div id="content">
    ...
    </div>
</div>

Если вы затем сделаете правильный запрос, используя уравнение.jQuery .load(), тогда это может выглядеть так: 

$('#contentContainer').load('index.php #content', function(){
    // some fancy animation here
});

Что это делает?Он загружает часть страницы index.php (фактически часть с id="content") в загруженную в данный момент страницу (фактически часть с id="contentContainer"), фактически изменяя только часть #contentContainer, так как она будет загружена при перезагрузке страницы.

Если вы дополнительно измените URL с помощью pushState, вы достигнете эффекта, так как страница будет перезагружена.Используя событие onpopstate, вы можете разрешить переход назад и вперед по динамически генерируемым страницам.

Достаточно ли ясно?

Используя эту функцию, вы также можете добиться поведения, подобного Flash.(плавные переходы).

...