#freeze
#setlinebreak(on)
* HTML_AjaxのreplaceとEthnaでAJAXを使った画面遷移 [#s6a6c2cb]
#htmlinsert(googleAdsense.html)
#ref(http://dozo.rgr.jp/img/img20_file.png,right,nolink,around,PHP::PEAR)

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

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

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

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


で、その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メソッドを動かす。



一般的なPCページでは、
一ページの中にたくさん情報を載せるが、
これを使えばその中の一部分だけ入れ替えることが出来る。
-2222 -- [[111]] &new{2006-07-07 23:02:47 (金)};
-33333 -- [[3333]] &new{2006-07-07 23:02:58 (金)};
-4444 ってオイ!? -- [[dozo]] &new{2006-07-11 22:07:43 (火)};

#comment


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Third Project
証券会社ランキング比較