バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
Framework/Ethna/HTML_AJAX/transition へ行く。
- 1 (2006-02-13 02:41:06 (月))
- 2 (2006-02-13 03:10:22 (月))
- 3 (2006-02-24 09:54:05 (金))
- 4 (2006-06-17 19:34:29 (土))
- 5 (2006-07-07 23:02:58 (金))
- 6 (2006-07-11 22:07:43 (火))
- 7 (2006-09-17 19:18:08 (日))
- 8 (2006-09-29 19:34:54 (金))
- 9 (2006-10-02 09:26:56 (月))
- 10 (2006-12-10 03:00:33 (日))

HTML_AjaxのreplaceとEthnaでAJAXを使った画面遷移 †

別にEthnaである必要はないけど。

(ノ・・)ン。。。。。。(((●コロコロッ

AJAX(JavaScript?)を使って画面遷移するシステムを作ろうとすると、
異常に面倒くさかったりするが、
PEAR::HTML_Ajaxなら非常に簡単。
発想を変えれば良いだけだね。

PEAR::HTML_Ajaxを使って、
画面を表示すると、
innerHTMLが使われる。
PHPerな人には分かり難いかもしれない。
特定のＩＤ属性を持っているタグの内側にねじ込むようにタグが入ってくる感じ。

で、そのinnerHTMLで表示されたものの中に、
画面遷移用のリンクをつけたjsvaScriptコードが入っていると、
画面遷移が成立するというわけ。
(￣- ￣ ) ウーン
言葉にするのは難しい。

サンプルはこんな感じ。
prev, nextをポチポチ押すと、
now:の数値が変わっていくシンプルなもの。
これをオフセット値と見立てると、
画面遷移のできあがりというわけ。

例によってファイルは三つ。

ajax.html
<html>
<body>
<script type="text/javascript" src="server.php?client=all"></script>
<span id="list">I'm the target</span>
<script type="text/javascript">
 HTML_AJAX.replace('list','output.php');
</script>
</body>
</html>

server.php
<?php
include 'HTML/AJAX/Server.php';
$server = new HTML_AJAX_Server();
$server->handleRequest();
?>

output.php
<?
$offset = $_GET["offset"];
$prev   = $offset - 1;
$next   = $offset + 1;
$html = <<<HTML
<a href="javascript:void(0)" onclick="return HTML_AJAX.replace('list','output.php?offset=$prev')">prev</a>
now: $offset
<a href="javascript:void(0)" onclick="return HTML_AJAX.replace('list','output.php?offset=$next')">next</a>
HTML;

echo $html;
?>

結果はこんな感じ

<HTML>
 <HEAD/>
 <BODY>
   <DIV id="HTML_AJAX_LOADING"> Loading...    </DIV>
   <SCRIPT src="server.php?client=all" type="text/javascript"/>
   <SPAN id="list">
     <A onclick="return HTML_AJAX.replace('list','output.php?offset=-1')" href="javascript:void(0)">prev</A>
now: 
     <A onclick="return HTML_AJAX.replace('list','output.php?offset=1')" href="javascript:void(0)">next</A>
   </SPAN>
   <SCRIPT type="text/javascript">
HTML_AJAX.replace('list','output.php');
   </SCRIPT>
 </BODY>
</HTML>

重要なのはid属性が"list"のSPANタグの中。
一般的なページャーの仕組みがこの中に入っていて、
onClickをトリガーにreplaceメソッドを動かす。

一般的なＰＣページでは、
一ページの中にたくさん情報を載せるが、
これを使えばその中の一部分だけ入れ替えることが出来る。

２２２２ -- １１１? 2006-07-07 23:02:47 (金)
３３３３３ -- ３３３３? 2006-07-07 23:02:58 (金)
４４４４ってオイ！？ -- dozo? 2006-07-11 22:07:43 (火)
sms oK!!! -- ss? 2006-09-17 19:18:08 (日)