Mais conteúdo relacionado
Mais de Kindai University (20)
Pjax1
- 9. Pjax 魔法のしくみ1
jQuery で、ブラウザの機能を抑制/入替
HTML5 のpushState でhistoryスタックに履歴をプッシュ
Webブラウザ
クリック http GET などをしたつもり
エンティティ
マネージャ XjQuery
preventDefault(
)
historyスタック HTML5
pushState
表示
レンダラ DOM
- 10. ブラウザの機能を抑制/入替え
preventDefault()
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>preventDefalut()のテスト</title>
<script type="text/javascript" src='jquery-1.7.js'></script>
</head>
<body>
<h1>preventDefault()のテスト</h1>
<p>
<a id="enable" href="http://www.cacanet.org">このリンク</a>は有効にされています。
<a id="disable" href="http://www.cacanet.org">このリンク</a>は無効にされています。
</p>
<p id="message"></p>
<script type="text/javascript">
$("#disable").click(function (e) {
e.preventDefault();
$("#message").html("ほら、ページ遷移しないでしょ?");
});
</script>
</body>
</html>
- 11. HTML5 の history.pushState
history.pushState(historyオブジェクト, タイトル, URL);
ブラウザの閲覧履歴スタックに強引にタイトルやURLを強引にプッシュ
→ とりあえずブックマークできる。
<html><head><meta charset="UTF-8">
<title>最初のページ</title>
<script>
function ps() {history.pushState(null,null,"http://rubyist.org/");}
</script>
</head>
<body>
<h1>pushSateのテスト</h1>
<form>
<input type="button" value="URLに注目" onclick="ps()" />
</form>
</body></html>
- 12. Pjax = jQueryの jquery.pjax.js
これがPjaxのオリジナル
pushState + Ajax = Pjax
https://github.com/defunkt/jquery-pjax 直接URLを入れても
同じページが表示される
デモページ:http://pjax.heroku.com/
- 13. jquery.pjax.js
リクエストヘッダに HTTP_X_PJAX を含める
サーバ側は、HTTP_X_PJAXのときはAjax的にデータだけ送る
そうでなければ、レイアウト付きのHTMLを返す
Webブラウザ
クリック
エンティティ
マネージャ X HTTP_X_PJAX
jQuery
jquery.pjax.js
サーバ
historyスタック HTML5 データ
pushState だけ
表示
レンダラ DOM
- 14. jquery.pjax.jsの使用例
sinatraの場合
# -*- coding: utf-8 -*-
require 'sinatra'
get '/' do
erb "<h1>トップページです</h1>", :layout => !env['HTTP_X_PJAX']
end
get '/hello' do
erb "<h1>こんにちは!<%=Time.now%></h1>", :layout => !env['HTTP_X_PJAX']
end
__END__
@@layout
<!doctype html><html><head>
<title><%= @title %></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://pjax.heroku.com/jquery.pjax.js"></script>
<script type="text/javascript">$("a.pjax").pjax("#main");</script>
</head>
<body>
<ul>
<li><a href="/" class="pjax">ホーム</a></li>
<li><a href="/hello" class="pjax">あいさつ</a></li>
</ul>
<div id="main"><%= yield %></div>
</body></html>
- 15. サーバ側の魔法の種明かし
リクエストヘッダのHTTP_X_PJAXの有無チェックとレイアウ
トの抑制判定
get '/' do
erb "<h1>トップページ</h1>", :layout => !env['HTTP_X_PJAX']
end
Ajax的にDOM要素を更新する部分の指定(divでyieldを囲む)
<div id="main"><%= yield %></div>
a タグ(pjaxクラスの)に対するpjaxの適用
<li><a href="/" class="pjax">ホーム</a></li>
<li><a href="/hello" class="pjax">あいさつ</a></li>
<script type="text/javascript">$("a.pjax").pjax("#main");</script>
- 18. Rubyistの目線からの妄想
historyへのプッシュは、クロージャによるメモ化に似ている
理論的なかっこいいアプローチもあるかも
クロージャによるメモ化
関数の入力と出力の視点からの意味は変わらない
既存の計算結果のキャッシュを使うか、関数の処理を実際に計算するか
Pjax
同じURLにアクセスしたときのページの姿は変わらない
ブラウザ側でページ要素のみを構成するか、サーバからページ全体を
持ってくるか
Haskellの人は、「それはxxモナドだよ」とか言うかも...