web-dev-qa-db-ja.com

AJAX呼び出しのURLを更新しますか？

現在、AJAX=を使用して発生している最大の問題は、あるページでAJAXを使用する場合、別のページに移動してからAJAXで変更されたものをすべて戻すためのブラウザの[戻る]ボタン。

jQuery Addresss プラグインを使用してその問題を解決することを考えましたが、URLを完全に変更するのではなく、「＃whatever.html」でURLを修正する方法だけは好きではありません。

理想的には、関連するAJAX呼び出し。

これはまったく可能ですか？

jqueryajaxurl-rewriting
22
dougoftheabaci

いいえ、これは不可能です。 更新：HTML5 History APIを介して可能になりました-参照 razbakovの答え 。

非常に難しい問題に取り組んでいることをご理解いただければ幸いです。

あなたのURLが次のようであるとしましょう

http://example.com/mypage/

プログラムでウィンドウの場所を変更した場合

http://example/mypage/1/

ブラウザが引き継ぎ、そのページに移動しようとすると、豪華なajaxコードが表示されます。

だから代替手段は何ですか？ URLフラグメントを使用します。

次のようなURLがあるとします。

http://example.com/anotherpage/#section

ブラウザはまず http://example.com/anotherpage/ をロードし、「section」という名前のアンカーを見つけてその場所までスクロールします。この動作は、「アドレス」プラグインによって悪用されます。これは、「トップにスクロール」リンクが機能する方法に似ています。

だからあなたがページにいるなら

http://example.com/mypage/

uRLを次のように変更します

http://example.com/mypage/#1

ブラウザは新しいページをロードしませんが、「1」という名前のアンカーを見つけてそのアンカーまでスクロールしようとします。

フラグメントをURLに追加できたとしても、作業が完了したとは限りません。ユーザーが戻るボタンを押すと、DOMがリセットされ、これらのフラグメントを解析してDOMを再作成する必要があります。それは間違いなく重要なことです。

20
SolutionYogi

HTML5で可能です。 GitHubまたはVkontakteサイトの例としてテストできます。

最良の答えはここにあります： JavaScriptを使用して新しいページをロードせずにブラウザーでURLを変更します

これらの目的のためにhistory.pushState関数を使用できると書かれています。ただし、このソリューションはHTML5互換ブラウザでのみ機能します。それ以外の場合は、ハッシュ方式を使用する必要があります。

22
Aleksey Razbakov

この問題は、history.jsを使用して解決できます。 https://github.com/browserstate/history.js

5
v4r

pjax は、最新のブラウザでこれを適切に処理します。

2
duckegg

AJAXを呼び出した後、history.pushStateを使用してクライアントURLを更新できます。以下の構文と例を見つけてください

構文：history.pushState（obj、obj.Title、obj.Url）;

例：

var url = "http://example.com/mypage/" + "newParameter=newValue"
history.pushState(undefined, '', url);
0
Syed Shahjahan