連載：AjaxとPHPでリッチクライアント（2）

Ajaxを使ったファイルマネージャをPHPで作ろう

上鍵 忠志
日本PHPユーザ会
2006/4/29

はじめに

　前回からずいぶん時間がたってしまった。前回AjaxACというライブラリを用いてAjaxを使用してみた。今回は予告とは懸け離れるが、一部の読者からリクエストのあった原始的なアプリケーションへのAjaxとPHPの実装について解説したいと思う。

Ajax×PHPファイルマネージャ実装までの流れ

　今回はJavaScriptからPHPへのアクセス方法、Ajaxを用いたファイルマネージャの実装を行う。

JavaScriptとPHPの通信 JavaScriptから見たPHPからのリクエストとPHPから見たJavaScriptからのリクエスト Ajaxを使わずにファイルマネージャを作ろう Ajaxを使わないでPHPファイルマネージャの概要と実装スタイル Ajaxを使ってファイルマネージャを作ろう Ajaxへの改変部分と注意点／ファイルマネージャの制限／Ajaxを用いたオープンソースのPHPアプリケーション／phpFreeChat／自前WebにphpFreeChatをコピーしてみよう

JavaScriptとPHPの通信

　JavaScriptはブラウザ上で実行されるインタプリタ言語である。PHPはサーバ上で実行されるインタプリタ言語である。JavaScriptとPHPのメッセージの流れは基本的に＠IT上のほかの記事を参考にしてもらうといいだろう。

■JavaScriptでの実装例

　下記はJavaScriptからサーバ上のURL、「http://www.example.com/ajax/index.php」へアクセスし、HTML上に存在するID「foo」にリクエスト結果を挿入する例だ。

if(window.XMLHttpRequest) {     ajax = new XMLHttpRequest(); } else if(window.ActiveXObject) {     try {         ajax = new ActiveXObject("Msxml2.XMLHTTP");     } catch(e) {         ajax = new ActiveXObject("Microsoft.XMLHTTP");     } } ajax.open("GET", "http://www.example.com/ajax/index.php"); ajax.onreadystatechange = function() {     if (ajax.readyState == 4 && ajax.status == 200) {         var obj = document.getElementById( 'foo');         obj.innerHTML = ajax.responseText;     } } ajax.send("");

リスト1　Ajaxのクライアント側の実装例

　基本的にはこれだけである。やっていることとしては、

1. XMLHttpRequestを扱うオブジェクトのインスタンス
2. サーバとの通信準備
3. 状態監視関数の作成、登録
4. HTTPリクエストの送信

の4ステップである。下記は＠ITの古くて新しいAjaxの真実を見極めるを併せて読むと理解が深まると思われる。

■XMLHttpRequestを扱うオブジェクトのインスタンス

　これは条件分岐がいくつかある処理になっている。理由はブラウザごと（さらにバージョンごと）にXMLHttpRequestを扱うオブジェクトのインスタンス方法が違うからだ。

　このロジックはいまのところおまじないのように覚えておいてもいいだろう。

if(window.XMLHttpRequest) {     ajax = new XMLHttpRequest(); } else if(window.ActiveXObject) {     try {         ajax = new ActiveXObject("Msxml2.XMLHTTP");     } catch(e) {         ajax = new ActiveXObject("Microsoft.XMLHTTP");     } }

サーバとの通信準備

　次にウェブサーバとの通信方法（通常GET、POSTを使う）とアクセスするURLを指定する。URLはもともとのドメインから別のところを指定することはできないことに注意したい。

ajax.open( "GET", "http://www.example.com/ajax/index.php");

状態監視関数の作成、登録

　次にHTTPサーバとの通信状態の監視関数の作成と登録を行う。この変数ajaxはいくつかのプロパティを持っており、その中の1つにonreadystatechangeがある。

　これはHTTPサーバとの通信状態の変化があると、設定された関数が実行されるのである。

　詳しくは枯れた新しいUI革命「Ajax」をASP.NETで活用するを参考にするといいだろう。

ajax.onreadystatechange = function() {     if (ajax.readyState == 4 && ajax.status == 200) {         var obj = document.getElementById( 'foo');         obj.innerHTML = ajax.responseText;     } }




HTTPリクエストの送信

　最後は実際のHTTP通信を行うメソッドsend()だ。多くの場合引数にはnullを渡していると思うが、筆者が調べたところnullではなく空文字列を渡す方がいいという記述のページがあったため、筆者は空文字列にしている。

ajax.send("");

　これは読者の環境に合わせてもいいだろう。

■PHPでの実装例

　それではPHP上の実装はどう記述すればいいのか。これは非常に簡単で、ID「foo」に挿入したいテキストを出力するだけである。このテキストはHTML形式で記述する。

<?php header( "Content-Type: text/html; charset=UTF-8"); echo "<h1>Hello! World.</h1>\n"; ?>

リスト2　Ajaxのサーバ側の実装例

　非常に簡単である。ちなみにAjaxを用いる場合、文字エンコードをUTF-8にしておく方がいい。Ajaxでは通常UTF-8を用いるため、通常UTF-8以外を使用しているシステムの場合、mbstringやiconvなどで何らかの手段で文字エンコードを変換する処理が必要になるだろう。

1/3

INDEX
Ajaxを使ったファイルマネージャをPHPで作ろう
	Page1＜JavaScriptとPHPの通信＞ JavaScriptでの実装例／XMLHttpRequestを扱うオブジェクトのインスタンス／サーバとの通信準備／状態監視関数の作成、登録／HTTPリクエストの送信／PHPでの実装例
	Page2＜Ajaxを使わずにファイルマネージャを作ろう＞ Ajaxを使わないでPHPファイルマネージャの概要と実装スタイル
	Page3＜Ajaxを使ってファイルマネージャを作ろう＞ どこをAjaxにするか／改変部分／注意点／ファイルマネージャの制限／Ajaxを用いたオープンソースのPHPアプリケーション／phpFreeChat／自前WebにphpFreeChatをコピーしてみよう

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）