Yama's Memorandum

Ajaxの基本XMLHttpRequestを試してみた

 前回のエントリー『Javascriptを学習しなくちゃということで・・・・』で、いまや常識のAjaxを学ぼうという話を書いた。JavaScriptを基本から学ばねばということだった。しかし、phpを学習したときと同様、やはり「習うより慣れろ」というのがプログラミングを学ぶには良いのではということで、w3SchoolsにでているAjaxのサンプルを実際に動かしてみることにした。結果、一番簡単なところが、なんとかうまく動作した。なるほどこういうことであったか、悦にいっている。私のAjaxのサンプルがどんな感じで動作するのかを示してみることにした。

Ajaxを実感してみよう！：　ご覧になるように、すぐ下に入力フォームが配置されている。Nameと名づけているフォームに適当な文字を打ち込んでみて欲しい。そうすると、Timeのほうになにか数字が現れるはずである。Nameフォームにタイプするたび（キーから指を離すたび）にTimeの部分の値が変化しているのに気づいていただけるだろうか？

この動作を実現するのに、Ajaxの基本であるXMLHttpRequestを用いている。結構、分かり易い例だと思う。以下、ここで示した例が、どのようになっているか、具体的なコーディング例をしめしながら説明してみよう。

JavaScriptの組み込みとフォームの作成： 上にしめしたサンプルを実現するため、このポスト上に、（HTML形式で）書き下したのが以下だ。

<script type="text/javascript" src="/scripts/ajax_sample.js" ></script>

<form name=”myForm”>
<table border="0">
<tbody>
<tr>
<td>Name:</td>
<td><input name="username" type="text" onkeyup="ajaxFunction();"/> </td>
</tr>
<tr>
<td>Time:</td>
<td><input name="time" type="text" /></td>
</tr>
</tbody>
</table>
</form>
        

まず、一行目に、このサンプルを動作するために準備したJavaScriptファイルajax_sample.jsを定義した。ほぼ2週間前のエントリー「WPのPOST上でGoogle Visualization APIのサンプルを動かしてみた」で書いたように、私が使っているブログツールWordPressのPost上でJavaScriptを使う場合、ここに示したように、JavaScriptコードをPost内に直接書かないでPost 外にJavaScriptファイルを定義しておけばよい。

2行目以降に書いたHTML FORMタグの部分がAjaxのサンプルを動作させるために作成したフォームの部分である。ここでは、HTMLタグについて解説することはしないが、二つのinput要素のうち1番目に、onkeyup=”ajaxFunction();”というかたちで、この入力フォーム中でキーボード入力でキーアップ時にajaxFunction()と名づけたscriptが動作するようにしている。このajaxFunction()は、JavaScriptファイルajax_sample.jsのなかで定義している。

JavaScriptファイル ajax_sample.jsは以下のようなものである；

function ajaxFunction() {
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }

  xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    document.myForm.time.value=xmlHttp.responseText;
    }
  }
  xmlHttp.open("GET", "server.php",true);
  xmlHttp.send(null);
}
        

このJavaScriptファイルの内容について見てゆく。try･･catch･･の一連の部分は、XMLHttpRequestを活性化する（オブジェクトを作る）部分だ。ブラウザの違いにより、このXMLHttpRequestという名称の「クラス」（こういう言い方は正しいかどうかは分からない）は、Firefox、Operaといったブラウザ上では成立するようであるが、MSWindows系のブラウザで提供されている「クラスの名称」は異なる。この違いを吸収して、クライアントユーザーが使用しているブラウザに対応した「XMLHttpRequest」のオブジェクトxmlHttpが作られる。
オブジェクトxmlHttpの作成に失敗すると、「Your browser does not support AJAX」なる警告がポップアップされて終了する。

XMLHttpRequestオブジェクトの３つのプロパティ： XMLHttpRequestでAjaxの動作を実現するうえで欠くことのできないpropertyがある。その夫々についてみてみよう。

まず、 onreadystatechangeプロパティだ。書式は、以下の形式をとる：

XMLHttp.onreadystatechange=function()
{
// wirte some code here
}
        

ここで、function()に書かれるコードは serverからのresponseを処理する。

次に、readyState プロパティだ。 readyStateプロパティはserver からのresponseの状態を保持し、readyStateが変化する度に、上記したonreadystatechangeの function()が実行される。

readyStateには、状態の変化に伴い、0から4が返されてくる。

readyState      対応する状態
             0            request が初期化されていない状態
             1             request がセットアップされた状態
             2             request がserverに送付された状態
             3             request がserverで処理中にある状態
             4              request が完了した状態

clientからのrequestについてserver側の処理が完結した状態(readyStateが4)になった時点　　　でなんらかの処理を実行するということで、上記のfunction部分を完成させると、

　　　XMLHttp.onreadystatechange=function()
      {
           if (XMLHttp.readyState == 4)
               {
               document.myForm.time.value = XMLHttp.responseText;
               }
           }
      }
        

ということになる。ここで、responseTextプロパティにserver側からテキストデータが返されており、最初に説明したフォームの2番目のinput要素（name=time）に返された値を格納するという簡単な処理を行っている。

ServerへのRequest:　ServerへのRequestを送信するのに open()とsend()のメソドが用いられる。

open()メソドは、３つのargumentを持つ。その夫々は、

第１argument: requestを送信するのにGET、POSTのいずれを使うかを指定する
第２argument: サーバー側のscriptのURLを指定する
第３argument: requestが非同期（asynchronously）に取り扱われるかどうかを指定する。非同期の場合、trueを指定する。

send()メソドは、送付するデータを与えるが、requestの終了を単にserver側に伝える場合には、argumentにnullを与える。

Server側scriptのURLの指定：　以上でclient側というかブラウザ側からの送信処理は終了した。次に、Server側のURLを指定しなければならない。サンプルでは、サーバー側のドキュメントルート配下のディレクトリscripts/に置いたphpファイルserver.phpを与えている。この部分を採録しておくと、

　　　 xmlHttp.open(“GET”,”/scripts/server.php”,true);
          xmlHttp.send(null);

Serverサイドの処理内容：　単純なserver.phpを以下のように作成している。

<?php
header("Cache-Control: no-cache, must-revalidate");
$time = microtime();
echo $time;
?>
        

まず、第一行目であるが、これを最初に定義しておくことにより、このphpファイルがコールされるたびにキャッシュ値が返されるのでなく、その時点時点で実行された値が返されることになる（実際には、キャッシュのコントロールをどうするか、きちんと考えておかねばならないだろう）。

次の行では、phpが実行された時点での時間をphpの関数microtime()を用いて変数$timeに格納、それを次のecho文で出力する。これで、実際に、クライアント側に返される値は、$timeの値ということになる。

まとめ：　以上がAjaxを学ぶために作成したサンプルの実行例と、その（私が理解した範囲での）解説である。Ajaxで行なわれる処理は、実際には、より複雑なものを扱うことになるが、その基本的な仕組みはここに記したサンプルで理解できたと思う。

次回（いつになるか分からないが）は、蔵書管理でアマゾンDBの読み取りに用いたphpを使いながら少しは実用的なAjaxのコーディングに挑戦してみることにしたい。