pjaxの実装
pjaxの使用例を見てみましょう。ぽぽぽーんをクリックしてみてください。そのあと、URLは どうなるでしょうか？
ajaxで取得した内容と、遷移後の内容が異なってるのは意図としてます。
サーバ側は、pythonのflask
# 主要なところだけ @app.route('/pjax') #/flask/pjax def pjax(): if "X-PJAX" in request.headers: print "x-pjax" time.sleep(1.5) #1.5秒停止 spin.gifを見せたいため return """<pre> , ,― ､ ／/-― ヽ x-pjaxでゲソゲソ ヽ' ﾉﾉ､ﾉヽ） | (!|ﾟ ヮﾟﾉl / ⊂j Ｖiつ、 <,<, <_｡_｡> ､> tｂtb </pre>""" else: print "not x-pjax" return """<pre> , ,― ､ ／/-― ヽ not x-pjaxでゲソゲソ ヽ' ﾉﾉ､ﾉヽ） | (!|ﾟ ヮﾟﾉl / ⊂j Ｖiつ、 <,<, <_｡_｡> ､> tｂtb </p>"""
クライアント側
<div id="loader" style='display:none'><img src="/bf634817.spin.gif"></div> <a id="pjaxcontent" href="/flask/tech/pjax"/>ぽぽぽーん</a> <div id="foo"></div> <script type="text/javascript"> $('document').ready(function(){ // タイムアウトは、ミリ秒。 // タイムアウトを越えた場合、遷移する。 $("#pjaxcontent").pjax("#foo", {timeout: 3000}); // spin.gifの設定 $("#foo").bind('pjax:start', function(){ $("#loader").show()}) .bind('pjax:end', function(){ $("#loader").hide()}) }); </script>