Змініть URL-адресу адресного рядка в додатку AJAX, щоб відповідати поточному стану

Я пишу програму AJAX, але коли користувач рухається через додаток, я хотів би, щоб URL-адреса в адресному рядку оновлювалася, незважаючи на відсутність перезавантаження сторінок. В основному, я хотів би, щоб вони змогли зробити закладку в будь-який момент і тим самим повернутися до поточного стану.

Як люди звертаються за підтримкою RESTfulness в додатках AJAX?

Спосіб зробити це - маніпулювати, location.hashколи оновлення AJAX призводять до зміни стану, у якому ви хочете мати дискретний URL. Наприклад, якщо URL-адреса вашої сторінки:

http://example.com/

Якщо функція клієнтської сторони виконала цей код:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

Потім URL-адресу, відображену в браузері, буде оновлено до:

http://example.com/#foo

Це дозволяє користувачам робити закладки на стан "foo" сторінки та використовувати історію браузера для навігації між станами.

За допомогою цього механізму вам потрібно буде проаналізувати хеш-частину URL-адреси на стороні клієнта за допомогою JavaScript для створення та відображення відповідного початкового стану, оскільки ідентифікатори фрагментів (частина після #) не надсилаються сервер.

Плагін hashchange Бен Альмана робить останній легким вітром, якщо ви використовуєте jQuery.

Подивіться на сайти, як book.cakephp.org. Цей сайт змінює URL-адресу, не використовуючи хеш і не використовуючи AJAX. Я не впевнений, як це робиться саме так, але я намагався це зрозуміти. Якщо хтось знає, дайте мені знати.

Також github.com, дивлячись на навігацію в рамках певного проекту.

Навряд чи письменник хоче перезавантажити або перенаправити свого відвідувача під час використання Ajax. Але чому б не використовувати HTML5 pushState/ replaceState?

Ви зможете змінювати адресну панель скільки завгодно. Отримайте природні URL-адреси за допомогою AJAX.

Перевірте код мого останнього проекту: http://iesus.se/

Це схоже на те, що сказав Кевін. Ви можете мати стан свого клієнта як деякий об’єкт javascript, і коли ви хочете зберегти стан, ви серіалізуєте об'єкт (використовуючи кодування JSON та base64). Потім ви можете встановити фрагмент href до цього рядка.

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

Перший спосіб буде розглядати новий стан як нове місце (тому кнопка "назад" перенесе їх до попереднього місця розташування). Останнього немає.

SWFAddress працює в проектах Flash & Javascript і дозволяє створювати URL-адреси, що відмічаються за допомогою закладу (використовуючи вказаний вище хеш-метод), а також надає вам підтримку за допомогою кнопок.

http://www.asual.com/swfaddress/

Метод window.location.hash є кращим способом робити речі. Для пояснення того, як це зробити, Ajax Patterns - унікальні URL-адреси .

YUI має реалізацію цього шаблону як модуля, який включає конкретні робочі місця для IE для отримання кнопки "назад", яка працює разом із перезаписом адреси за допомогою хеша. Менеджер історії браузерів YUI .

Інші рамки також мають подібну реалізацію. Важливим моментом є те, що якщо ви хочете, щоб історія працювала разом із перезаписом адреси, різним браузерам потрібні різні способи обробки. (Про це докладно в першій статті посилання.)

IE потребує злому на базі iframe, де Firefox виробляє подвійну історію за допомогою того ж методу.

Якщо ОП чи інші люди все ще шукають спосіб змінити історію браузера, щоб увімкнути стан, використовуючи pushState та substituState, як пропонує IESUS, це "правильний" спосіб зробити це зараз. Головною перевагою порівняно з location.hash є те, що він створює фактичні URL-адреси, а не просто хеші. Якщо історія веб-переглядача з використанням хешів збережена, а потім переглянута з відключеним JavaScript, додаток не працюватиме, оскільки хеші не надсилаються на сервер. Однак якщо pushState було використано, весь маршрут буде відправлений на сервер, який ви зможете побудувати так, щоб відповідати відповідним чином на маршрути. Я бачив приклад, коли однакові шаблони вусів використовувались як на сервері, так і на стороні клієнта. Якщо у клієнта був увімкнутий JavaScript, він отримає швидкі відповіді, уникаючи переходу на сервер, але додаток буде працювати чудово без JavaScript. Таким чином, додаток може виразно погіршитись за відсутності javascript.

Крім того, я вважаю, що там є якась рамка з такою назвою, як history.js. Для браузерів, які підтримують HTML5, він використовує pushState, але якщо браузер цього не підтримує, він автоматично переходить до використання хешей.

Перевірте, чи користувач перебуває на сторінці "in", коли ви клацаєте на панелі URL, javascript каже, що ви поза сторінкою. Якщо ви зміните рядок URL-адреси і натисніть "ВВЕДЕННЯ" із символом "#" всередині нього, ви перейдете на сторінку знову, не натискаючи на сторінку вручну за допомогою курсору миші, тоді команда події клавіатури (document.onkeypress) з javascript буде мати можливість перевірити, чи вводиться він, і активувати javascript для перенаправлення. Ви можете перевірити, чи користувач перебуває на сторінці з window.onfocus та перевірити, чи немає в ньому вікна window.onblur.

Так, це можливо.

;)