AJAXコールのURLを更新しますか？

Question

今私がAJAXを使用している最大の問題は、ページ上でAJAXを使用すると別のページに移動し、ブラウザの戻るボタンを使用してAJAXで変更されたものをすべて取り消すという事実です。

私はこの問題を解決するためにjQuery Addresssプラグインを使用することを考えましたが、完全に変更するのではなく、「＃whatever.html」でURLを修正する方法が気に入らないのです。

理想的には、関連するAJAXコールを作成するときにURLを「www.example.com/p:2/」から「www.example.com/p:3/」にすることが理想的です。

これはすべて可能ですか？

Answer 1

いいえ、これはできません。 更新：HTML5履歴API経由で可能になりました。razbakov's answerを参照してください。

非常に難しい問題に対処しようとしていることをご理解いただきたいと思います。

あなたは

http://example/mypage/1/ 

に、プログラムウィンドウの位置を変更した場合、ブラウザが引き継ぐと、そのページに移動しようとします

http://example.com/mypage/ 

のように見える、あなたの空想のAjaxコードがそこに行くのは、あなたのURLを言ってみましょう！

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

ブラウザは最初http://example.com/anotherpage/をロードし、「セクション」という名前のアンカーを見つけて、その場所にスクロールしようとします

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

、あなたがこのようなURLがあるとしましょう。この動作は 'Addresses'プラグインによって悪用されます。これは、それらの「スクロール・トゥ・トップ」リンクがどのように機能するかに似ています。

ページ上にあるのであれば

http://example.com/mypage/ 

と

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

にURLを変更するブラウザで新しいページをロードするのではなく名前のアンカーを探してみてください「1」とそれにスクロールしません。アンカー。

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

Answer 2

HTML5でも可能です。あなたはGitHubやVkontakteサイトの例としてテストすることができます。

最良の答えはここにある：Change the URL in the browser without loading the new page using JavaScript

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

Answer 3

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

Answer 4

pjax現代的なブラウザでこれを正常に処理します。

Answer 5

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

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

例：

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