Modifique o URL da barra de endereços no aplicativo AJAX para corresponder ao estado atual

Question

Estou escrevendo um aplicativo AJAX, mas à medida que o usuário avança no aplicativo, gostaria que o URL na barra de endereço fosse atualizado, apesar da falta de recargas de página.Basicamente, gostaria que eles pudessem marcar os favoritos a qualquer momento e, assim, retornar ao estado atual.

Como as pessoas estão lidando com a manutenção do RESTfulness em aplicativos AJAX?

Answer 1

A maneira de fazer isso é manipular location.hash quando as atualizações do AJAX resultam em uma mudança de estado, você gostaria de ter um URL discreto.Por exemplo, se o URL da sua página for:

http://exemplo.com/

Se uma função do lado do cliente executou este código:

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

location.hash = 'foo';

Então, o URL exibido no navegador seria atualizado para:

http://example.com/#foo

Isso permite que os usuários marquem o estado “foo” da página e usem o histórico do navegador para navegar entre os estados.

Com esse mecanismo implementado, você precisará analisar a parte hash da URL no lado do cliente usando JavaScript para criar e exibir o estado inicial apropriado, já que os identificadores de fragmento (a parte após o #) não são enviados para o servidor.

Plugin hashchange de Ben Alman torna o último muito fácil se você estiver usando jQuery.

Answer 2

Veja sites como book.cakephp.org.Este site altera a URL sem usar hash e usar AJAX.Não tenho certeza de como isso acontece exatamente, mas tenho tentado descobrir.Se alguém souber, me avise.

Também github.com ao analisar a navegação em um determinado projeto.

Answer 3

É improvável que o escritor queira recarregar ou redirecionar seu visitante ao usar o Ajax.Mas por que não usar HTML5 pushState/replaceState?

Você poderá modificar a barra de endereços o quanto quiser. Obtenha URLs com aparência natural com AJAX.

Confira o código do meu projeto mais recente:http://iesus.se/

Answer 4

Isso é semelhante ao que Kevin disse.Você pode ter o estado do seu cliente como algum objeto javascript e, quando quiser salvar o estado, serialize o objeto (usando JSON e codificação base64).Você pode então definir o fragmento do href para esta string.

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

A primeira forma tratará o novo estado como um novo local (portanto, o botão Voltar os levará ao local anterior).Este último não.

Answer 5

SWFAddress funciona em projetos Flash e Javascript e permite criar URLs que podem ser marcados como favoritos (usando o método hash mencionado acima), além de oferecer suporte ao botão Voltar.

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

Answer 6

O método window.location.hash é a maneira preferida de fazer as coisas.Para uma explicação de como fazer isso,Padrões Ajax – URLs exclusivos.

YUI tem uma implementação desse padrão como um módulo, que inclui soluções alternativas específicas do IE para fazer o botão Voltar funcionar junto com a reescrita do endereço usando o hash. Gerenciador de histórico do navegador YUI.

Outras estruturas também têm implementações semelhantes.O ponto importante é que se você deseja que o histórico funcione junto com a reescrita do endereço, os diferentes navegadores precisam de maneiras diferentes de lidar com isso.(Isso é detalhado no primeiro artigo do link.)

O IE precisa de um hack baseado em iframe, onde o Firefox produzirá histórico duplo usando o mesmo método.

Answer 7

Se o OP ou outros ainda estiverem procurando uma maneira de modificar o histórico do navegador para ativar o estado, usar pushState e replaceState, conforme sugerido pelo IESUS, é a maneira 'certa' de fazer isso agora.Sua principal vantagem sobre location.hash parece ser que ele cria URLs reais, não apenas hashes.Se o histórico do navegador usando hashes for salvo e revisitado com o javascript desabilitado, o aplicativo não funcionará, pois os hashes não serão enviados ao servidor.No entanto, se pushState tiver sido usado, toda a rota será enviada ao servidor, que você poderá construir para responder adequadamente às rotas.Vi um exemplo em que os mesmos modelos de bigode eram usados ​​tanto no servidor quanto no cliente.Se o cliente tivesse o javascript habilitado, ele obteria respostas rápidas evitando a viagem de ida e volta ao servidor, mas o aplicativo funcionaria perfeitamente sem o javascript.Assim, o aplicativo pode ser degradado normalmente na ausência de javascript.

Além disso, acredito que exista algum framework por aí, com um nome como history.js.Para navegadores que suportam HTML5, ele usa pushState, mas se o navegador não suportar isso, ele automaticamente volta a usar hashes.

Answer 8

Verifique se o usuário está 'dentro' da página, quando você clica na barra de URL, o javascript diz que você está fora da página.Se você alterar a barra de URL e pressionar 'ENTER' com o símbolo '#' dentro dela, então você entrará na página novamente, sem clicar na página manualmente com o cursor do mouse, então um comando de evento keyboad (document.onkeypress) de javascript irá poder verificar se está enter e ativar o javascript para redirecionamento.Você pode verificar se o usuário está na página com window.onfocus e verificar se ele está fora com window.onblur.

Sim, é possível.

;)