JP:入門:10分間で覚えるxajax入門篇






JP:入門:10分間で覚えるxajax入門篇

インデックス

[edit] PHP+xajaxでajaxアプリを作ろう

xajaxは既存のWebアプリケーションでも新しいアプリケーションでも簡単にajax対応できるように設計されています。以下の7ステップだけでxajaxをあなたのPHPスクリプトに導入できます:

  1. xajaxクラスライブラリをインクルードする:
    require_once("xajax.inc.php");
  2. xajaxオブジェクトを作成:
    $xajax = new xajax();
  3. xajaxを通して利用したいPHP関数名を先ほど作成したxajaxオブジェクトに登録する:
    $xajax->registerFunction("myFunction");
  4. 登録した関数を実装する。関数の中にxajaxResponseオブジェクトを使用してXMLリスポンスを作成する: 
    function myFunction($arg)
{
    // ここでロジックを実装する。たとえば$arg引数に基づいてデータベースからデータを取り出し、
    // 結果を$newContent変数にセットする
    
    // xajaxResponseオブジェクトを生成する
    $objResponse = new xajaxResponse();
    
    // HTMLのタグ要素IDが持つ指定した属性に新しい値を設定する
    // 例：　要素ID--"SomeElementId"、属性--"innerHTML"、値--$newContent
    $objResponse->addAssign("SomeElementId","innerHTML", $newContent);
    
    // xajaxResponseオブジェクトのXMLリスポンス値をリータンする
    return $objResponse;
}
  5. PHPスクリプトがHTML文を出力する前に、HTTPリクエストをxajaxオブジェクトに渡すようにセットする:
    $xajax->processRequests();
  6. <head></head> タグの間に、xajaxが生成したjavascriptコードを入れる: 
    <html><head><title>xajax example</title>
<?php $xajax->printJavascript(); ?>
</head>
  7. アプリケーションの中にJavaScriptイベントが発生時の処理関数を定義する: 
    <div id="SomeElementId"></div>
<button onclick="xajax_myFunction(SomeArgument);">

以上です。xajaxがほとんどの処理をしてくれるので、あなたの仕事がPHP関数の実装とXMLリスポンスを組み立てるだけです-- xajaxResponseクラスあるので手軽に作れますね。

[edit] コンテンツが非同期通信で更新する方法はどうやって実装されますか?

おそらくxajaxの一番ユニックな特性といえば、やはり xajaxResponseクラスです。ほかのAjaxライブラリでしたら、あなた独自にJavascriptで非同期リクエストとリスポンスデータを処理する関数を実装しなければならないですが、xajaxがPHPから簡単にコンテンツをコントロールすることができます。xajaxResponseクラスによって、あなたのPHP関数だけで、非同期通信XMLデータをつくることができます。XMLはxajaxメッセージポンプにより解析され、そして、Webアプリケーションのコンテンツと状態を更新する方法がxajaxにより実装されます。

xajaxResponseクラスは現在いくつかの役に立つコマンドを提供します。例えばAssignがあなたのページの中の指定された要素のプロパティをセットします。Appendが指定した要素に新しいプロパティを追加します。Prependが指定した要素のプロパティの先頭にデータを付け加えます。Replaceが指定した要素のプロパティのデータをリプレースします。Scriptが提供されたJavaScriptコードを実行します。Alertが警告用のダイアログボックスを開き、提供したメッセージを表示します。

ひとつのXMLのリスポンスの中に複数なコマンドを含めることができます。これらのコマンドはリスポンスに書かれた順番で実行されます。たとえば、ユーザがあなたのWebページ上のボタンをクリックとします。ボタンのonclickイベントがPHP関数のJavascriptラッパー関数をトリガーします。このラッパー関数はXMLHttpRequestを通して非同期リクエストをサーバに送信します。 サーバ側はxajaxが該当PHP関数を呼び出します。このPHP関数はDBのルックアップやデータの操作を行います。あなたは、xajaxResponseクラスを使用して、複数の命令を含んでいるxajax XMLリスポンスをxajaxメッセージポンプへ送ります: 

$objResponse = new xajaxResponse();
$objResponse->addAssign("myInput1","value",$DataFromDatabase);
$objResponse->addAssign("myInput1","style.color","red");
$objResponse->addAppend("myDiv1","innerHTML",$DataFromDatabase2);
$objResponse->addPrepend("myDiv2","innerHTML",$DataFromDatabase3);
$objResponse->addReplace("myDiv3","innerHTML","xajax","<strong>xajax</strong>");
$objResponse->addScript("var x = prompt(\"Enter Your Name\");");
return $objResponse;

xajaxメッセージポンプはXMLメッセージをパースして、以下の動作が実行されます:

  • ID名myInput1の要素のvalueプロパティに$DataFromDatabaseをセットする
  • ID名myInput1の要素のcolorスタイルがredに換える
  • ID名myDiv1の要素のinnerHTMLプロパティに$DataFromDatabase2データを追加する
  • ID名myDiv2の要素のinnerHTMLプロパティのデータ先頭に$DataFromDatabase3を追加する
  • ID名myDiv3の要素のinnerHTMLプロパティにあるすべての"xajax"文字列を"xajax"に置き換え、"xajax"をboldにする
  • ユーザ名を聞かれるようなダイアログボックスをポップアップ、ユーザ名をx変数にセットするJavascriptを生成する

以上すべてはサーバサイドのPHP関数およびxajax XMLリスポンスの形で実装されています。

[edit] またまたありますよ!

xajaxでFormsを処理する

Retrieved from "http://www.xajaxproject.org/wiki/JP:%C3%A5%E2%80%A6%C2%A5%C3%A9%E2%80%93%E2%82%AC:10%C3%A5%CB%86%E2%80%A0%C3%A9%E2%80%93%E2%80%9C%C3%A3%C2%81%C2%A7%C3%A8%C2%A6%C5%A1%C3%A3%C2%81%CB%86%C3%A3%E2%80%9A%E2%80%B9xajax%C3%A5%E2%80%A6%C2%A5%C3%A9%E2%80%93%E2%82%AC%C3%A7%C2%AF%E2%80%A1"