第1回 PHPで簡単なAjaxプログラムを作ろう - Ajax+RIA講座

くまちゃん先生のAjax+Flex講座

Lecutures on PHP

第1回 PHPで簡単なAjaxプログラムを作ろう (その4)

 このエントリーをはてなブックマークに追加

作ってみる

さて、Ajaxを用いたアプリケーションが今度はどのようなコードで動作しているのか、簡単なサンプルコードを通して見ていくことにしましょう。以下のサンプルコード、hello.html(リスト1)とhello.php(リスト2)>を見てください。

●リスト1 hello.html
  1   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
2  <html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="ja" lang= "ja" dir="ltr">
  
3  <head>
  
4      <meta http-equiv="Content-Type"  content= "text/html; charset=UTF-8" />
  
5      <meta http-equiv="Content-Script-Type"  content= "text/javascript" />
  
6      <meta http-equiv="Content-Style-Type"  content="text/css" />
  
7      <script type="text/javascript">
  
8  //<![CDATA[
  
9  function createXMLHttpRequest(){
 
10  
 11      
/* XMLHttpRequest オブジェクトを作成する   */
 
12      if(window.addEventListener){
 
13  
 14          
/* Firefox 用 */
 
15          return new XMLHttpRequest();
 
16      }else{
 
17  
 18          
/* IE 用 */
 
19          return new ActiveXObject("Microsoft.XMLHTTP");
 
20      }
 
21  
 22  
}
 
23  
 24  
function XMLHttpRequestByPost(postdata){
 
25  
 26      
/* hello.php にリクエストを送る */
 
27      var request createXMLHttpRequest();
 
28  
 29      
/* ステータス( 読み込み中なのか完了したのか) が変更されたら、                    readyStateChangeHandler を実行 */
 
30      request.open("POST""hello.php" true);
 
31      request.onreadystatechange readyStateChangeHandler;
 
32      request.setRequestHeader"Content-Type"  "application/x-www-form-urlencoded");
 
33      request.send("name=" postdata);
 
34  
 35      
function readyStateChangeHandler(){
 
36          switch(request.readyState){
 
37              case 4:
 
38                  /* 完了の場合、サーバから送られたデータを表示 */
 
39                  if(request.status == 200){
 
40                      document.getElementById'result').innerHTML  request.responseText;
 
41                  }
 
42                  break;
 
43          }
 
44      }
 
45  }
 
46  
 47  
function RequestByPost(){
 
48      XMLHttpRequestByPost(document.getElementById('name').value);
 
49  }
 
50  
 51  
 52  
/* ページをロードしたときに以下のイベントハンドラを追加する */
 
53  window.onload = function(){
 
54  
 55      
/* id がsubmit-button のボタンがクリックされたら            RequestByPost 関数を実行 */
 
56      var obj document.getElementById('submit-button');
 
57      if(window.addEventListener){
 
58  
 59          
/* Firefox 用 */
 
60          obj.addEventListener("click"RequestByPostfalse);
 
61  
 62      
}else{
 
63  
 64          
/* IE 用 */
 
65          obj.attachEvent("onclick"RequestByPost);
 
66      }
 
67  }
 
68  //]]>
 
69      </script>
 
70      <title>  こんにちはサンプル </title>
 
71  </head>
 
72  <body>
 
73      <h1こんにちは○○○さん</h1>
 
74      <label for="name" 名前 </label>
 
75      <input type="text" id="name" name="name" width="10" />
 
76      <p id="result"></p>
 
77      <input type="submit"  id="submit-button"  value="クリック"  />
 
78  </body>
 
79  </html
●リスト2 hello.php
  1   <?php
  2  
  3   
if($_POST['name']){
  
4       $post_name htmlspecialchars($_POST['name'], ENT_QUOTES);
  
5       echo " こんにちは、".$post_name." さん ";
  
6   }else{
  
7       echo " 名前を入力してください";
  
8   }
  
9  
 10   ?>

テキストボックスに名前を入力しボタンをクリックすると、入力された名前をサーバに送信し「こんにちは」という語句を付加しクライアントに返すという、いわゆるHello Worldです。これをAjaxを用いて行っています。

まず、サーバ側の処理であるhello.phpを説明します。これは単純にPOSTで渡されたnameの値を取得して、その値に「こんにちは」と語句を付加しechoで表示しているだけです。

そしてAjaxを用いたWebアプリケーションで一番重要なクライアント側の処理になるhello.htmlです。始めに、ページをロードしたときイベントを登録していきます。イベントの登録方法にはいくつか方法があります。各要素のイベントプロパティを用いる、たとえば、

<span id="button1" onclick="showMessage();">

というようにHTML内でonclick等を記述していく方法です。その他にAddEventListerやattachEventを使ってイベントを登録する方法、たとえば、

document.getElementById('button1').addEventListener("click", showMessage, false);

というようにJavaScript内に処理を記述していく方法があります。

くまちゃん先生どちらが最善の方法なのか、これは人によっていろいろな考えがあると思います。前者のHTML内に記入していく方法の利点としては、イベントの登録が簡単であるということが挙げられます。クリックでアクションを起こしたい要素にonclickを追加すればいいわけですし、HTML内を見ればどこでアクションが起きるのか一目瞭然です。

後者のJavaScript内にイベントを記入していくという方法の利点は、ビューとロジックが分離しているということが一番になります。HTMLはビュー、JavaScriptはロジックという形で分けることができ全体の処理の流れがわかりやすくなります。
またソースコードが綺麗になりますしHTMLを作成するデザイナーと作業を分担することが可能になります。

以上のことから、今回は作業のしやすさという面で後者のJavaScript内にイベントを記入していくという方法をとっていきます。

今回はボタンをクリックしたときにサーバに送信するのでそのイベントを登録します。ここで注意することは、IEとFirefoxではJavaScriptの実装の違いによりイベントの登録方法が異なるという点です。IEではattachEventを使用してFirefoxではaddEventListenerを使用するので、ブラウザごとの分岐処理を行う必要があります。

その分岐処理、ユーザのブラウザがどちらなのかを判断する方法として、addEventListenerが実装されているかどうかで判断するようにしています。ブラウザのUserAgentを取得して判断するという方法もありますが、UserAgentは簡単に偽装することができます。なので、もっと確実な方法として、実装されているかされていないかで直接判断するほうが確実です。

addEventListenerの第一引数は、clickと書かれているので想像できるかもしれませんが、呼び出すイベントを記述します。第二引数にはイベントが発生した時点で呼び出されるメソッドや関数を記述します。第三引数にはキャプチャするかしないかを、trueまたはfalseで記述します。IEで使用されるattachEventもaddEventListenerと似ていますが、第一引数の呼び出すイベントにはonclickやonmouseoverなどonが付きます。第二引数はaddEventListenerと同じで、イベントが発生した時点で呼び出されるメソッドや関数を記述します。

くまちゃん先生イベントが登録されたら、後はそのイベントが発生したときにどのような処理を行うか、書けばよいわけです。その処理とはXMLHttpRequestを使ってサーバにデータを送受信すること。

ここでまた注意することが出てきます。先のイベントの登録と同じでIEとFirefoxではこのXMLHttpRequestが異なります。正確にはIEにはこのクラスが実装されていません。よってIE の場合Microsoft.XMLHTTPと呼ばれるActiveXObjectを使って同じことを実現させます。

このオブジェクトを作成したら、openメソッドを使用してサーバと接続します。この時接続できるのはセキュリティ上の理由から、このプログラムと同じドメインのサーバだけです。

次に通信中や受信完了といった状態を受け取るため、onreadystatechangeメソッドを使用してイベントハンドラを登録します。通信中や受信完了といった状態はreadyStateプロパティの値をみることによって判断できます。このreadyStateの値が4の場合、処理完了ということでサーバからすべてのデータの受信が完了したということになります。

ちなみに、0の場合は未初期化(openメソッドが呼ばれていない状態)、1の場合は読み込み中(sendメソッドが呼び出されていない状態)、2の場合は読み込み完了(sendメソッドが呼び出されサーバの処理待ち状態)、3の場合は部分的に応答(一部のデータを受信し部分的な結果を取得できる状態)というものになっています。

接続ができたらデータを送信するわけですが、このときContent-Typeがapplication/x-wwwform-urlencodedになっていないと、場合によってはエラーになりサーバ側で認識してもらえない事があります。送信するときのContent-Typeはapplication/x-www-form-urlencodedと覚えておきましょう。そして、sendメソッドを使用してデータを送信します。

あとは、先ほどのイベントハンドラでreadyStateプロパティの値が4になったとき、処理が完了したという状態のときに、responseTextプロパティを使ってテキスト形式で読み取り、指定された要素、今回の場合はid名がresultの部分にそのデータを流し込みます。

最後に

くまちゃん先生以上が今回のサンプルコードの説明になります。いかがでしょうか。今回の記事を読むことで、Ajaxを用いたWebアプリケーションの仕組みが何となくでも理解いただけたのではないかと思います。

一見するとちょっと複雑かもしれませんが、やっていることは単純で、イベントを登録しそのイベントが発生したらサーバにデータを送信し、サーバからの応答を受信したら結果を表示する、それだけです。ただ、ブラウザによってJavaScriptの実装が違うということがあり、その処理をしなければいけないということで冗長なコードになることがあります。また、やっていることは単純といっても、やはり通信の部分がわかりにくいという方もいるかもしれません。

今回はAjax入門ということで、Ajaxとは、から始まりその歴史や流れといった内容になりました。次回は、一歩進んで今回少し出てきたJSONの使い方やブラウザによる実装の違いを吸収し、もっと簡単にAjaxを用いたWebアプリケーションを作ることができる、JavaScriptライブラリを紹介する予定です。

  • くまちゃん先生

本名:熊谷裕志(くまがい ひろし)

アシアル株式会社

PHPやRubyといったLightweightなスクリプト言語に触れて以来その素晴らしさを実感し、Webプログラミングの可能性を極めようと日々精進中である。そして、PHPを仕事にしていながらこっそりとRubyを使っているかもしれないというほどRubyが好きだったりする。しかし、それ以上にJavaScriptやCSS、HTML、特にCSSに関しては目の色が変わるほど高い興味を持っている。

ご意見・感想フォーム

今回の「くまちゃん先生のAjax+Flex講座」への評価・ご意見があればご記入下さい。

評価:
ご意見・感想:



Pick Up Q&A

Q
ログファイルの中の空のデータ行を削除したい
 このエントリーをはてなブックマークに追加 
A
ログのデータ個数(列数)が固定で、空のログが"<><><>"だと既知であれば if ($line === "<><><>") { continue; } で読み飛ばしてもいいのでは? ...

>>続きを読む

まずは配列や文字列の扱いから、じっくり勉強して行きましょう。

▲解説者:岡本(アシアル株式会社 教育コーディネーター兼 システムエンジニア)