5月 11, 2011
ライブラリ「AJASON」で非同期通信をやってみる
ZendFrameworkでアプリケーションをゴリゴリ作ってると、ページ間のデータやりとりが面倒くさい。Flashなら何の問題もないが、時代は脱Flashだし、何かシームレスでアプリケーションを作れないかといろいろ調べた見たけど、辿り着いたのはやっばりAjax。
JavaScript、PHP、MySQLの非同期通信、ゼロから書くとかそもそも無理。きっと素敵な誰かが楽ちんなライブラリをすでに作ったに違いない。と、いろいろ探して見つけたのはこのページ。どれかいいのはまったく分からず、勘でAJASONを使うことにした。付属のサンプルを参考にやってみる。
DEMOをアップしたけど使ってるロリポップがなぜか動作しない(おいおい)?
なのでファイル一式をどうぞ。
index_1.php = 化け化け。index_2.php = 対策済み。
<?php require_once( './php/Ajax.php' ); class MyClass { public function getResult( $target ) { /* * * ここは普通に引数を返すが、 * もとの目的は引数でMySQLクリエを発行すること。 * Ext: "SELECT * FROM HogeTabke WHERE xxx LIKE '".$target."%'" * 取得した結果はそのままreturnして大丈夫みたい(文字化けしない)。 * */ return $target; } } $ajax = new Ajax(); // 使用するクラス、メソッドを記入 $ajax->registerMethod( 'MyClass', 'getResult' ); $ajaxServer = $ajax->getServer(); if ( $ajaxServer->isRequest() ) { echo $ajaxServer->handleRequest(); exit(); } $ajaxClient = $ajax->getClient(); ?> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>AJAX example</title> <script type="text/javascript" src="./js/json.js"></script> <script type="text/javascript" src="./js/ajax.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> <?php echo $ajaxClient->getJavaScript(); ?> function reWrite_cb( response ) { // jQueryでPタグの内容を書き換える。 $("p").text(response); } </script> </head> <body> <p>返り値</p> <br/> <!-- x_ + クラス名でメソッドを読み出す --> <!-- クラスを使わず、functionを直に記述もできる。詳細はAJASON付属のサンプルを参照 --> <div><a href="javascript:void(0)" onclick="x_MyClass.getResult('こんにちわ',reWrite_cb );">送信</a></div> </body> </html>
AタグでJSを呼びたし → PHPへ送信 → JSにreturn → JSで受け取った値をゴリゴリ
仕組みは問題なく動いてるが、やはりAjaxでよく見かける文字化け問題が発生している。ファイルは全部UTF-8で書いてるのに…。いろいろ調べた結果、どうやら化ける化けないかはサーバー設定に関係あるようだ。Apacheの設定(mbstringあたりとあ)を変えてみたけどだめ。一晩苦悩した結果、送信前にエンコード処理するという方法で解決!
詳細の解決策は次のエントリーで。
[…] 前記事のAjax文字化けの続き。ググってみたら、使用ライブラリは関係なく、結構Ajaxで文字化けを遭遇した人が多いみたい。 ・Apacheのmbstring設定を換える。 ・全ファイルUTF-8にする。 […]