Ajax を使ってみよう

「Ajax」とは、Asynchronous JavaScript + XML(非同期なJavaScriptとXML)の略です。

この技術を用いれば、JavaScriptを用いて、まるでFlash で作ったかのようにページを読み込むことなく、動的なアプリケーションを作ることができます。

Ajax を使った実装例

実際に、Ajaxがどんなものかサンプルを作成してみました。

Ajax サンプル

なお、上記のページを見るにはJavaScriptを有効にしておく必要があります。

Javascript での実装部分（Ajaxのクライアント側の実装例）

Ajaxのクライアント側の実装としては、次の4ステップとなります。

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

ajax.js

// XMLHttpRequestオブジェクト生成
function createHttpRequest()
{
  var xmlhttp = null;
  if(window.ActiveXObject){
    try {
      // MSXML2以降用
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        // 旧MSXML用
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {

      }
    }
  } else if(window.XMLHttpRequest){
    // Win Mac Linux m1,f1,o8 Mac s1 Linux k3用
    xmlhttp = new XMLHttpRequest();
  } else {

  }
  if (xmlhttp == null) {
    alert("Can not create an XMLHTTPRequest instance");
  }
  return xmlhttp;
} 

// ファイルにアクセスし受信内容を確認します
function sendRequest (method, url, data, async, callback)
{
    // XMLHttpRequestオブジェクト生成
    var xmlhttp = createHttpRequest();
    
    // 受信時に起動するイベント
    xmlhttp.onreadystatechange = function() { 
        // readyState値は4で受信完了
        if (xmlhttp.readyState == 4) { 
            //コールバック
            callback(xmlhttp);
        }
    }
    // open メソッド
    xmlhttp.open(method, url, async);
    // HTTPリクエストヘッダを設定
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    // send メソッド
    xmlhttp.send(data);
}

条件分岐が多いのは。ブラウザごと（バージョンごと）にXMLHttpRequestを扱うオブジェクトのインスタンス方法が違うからです。

JavaScript での実装部分 2（サーバーとの送受信の実装部分）

上記の sendRequest関数に対して、methodには POST または GET を指定し、url には呼び出し先を指定します。

また、PHPを呼び出すならPHPスクリプト名、ファイルを読み込むならファイル名を指定します。さらにasync には、非同期通信なら true を、同期通信なら false を指定します。

setDate関数では、HTML から受け取ったデータを加工し、sendRequest関数に渡す処理を行っています。
ajax_sample.js

function setDate(obj)
{
    var data = "";
    data += "filename=" + obj.value + ".txt";
    sendRequest("POST", "./ajax_sample.php", data, false, callback);
}

// コールバック関数
function callback(xmlhttp)
{
    var result = document.getElementById("result");
    result.innerHTML = xmlhttp.responseText;
}

受信後の処理として、callback という関数を呼び出しています。

PHPでの実装部分（Ajaxのサーバ側の実装例）

PHP 部分は今回は非常に単純です。open または send メソッドで送信された値は、PHP側では $_POSTまたは$_GETで値を受け取ります。
ajax_sample.php

<?php
  // POSTを取得
  $filename = $_POST['filename'] ;
  // ファイルデータを読み込む
  $data = file_get_contents($filename);
  // 出力
  echo($data);
?>

ちなみにAjaxを用いる場合、文字エンコードをUTF-8にしておく方がよいです。

このため、mbstring や iconv など何らかの手段で文字エンコードを変換する処理が必要になります。

HTML での実装部分

サーバーからの応答を受信後、HTMLを差し替えるにはHTMLのタグに id を設定し、この id を付けたタグに囲まれた部分を差し替えます。
index.html

<html>
<head>
<title>サンプル</title>
<script language="javascript" src="ajax.js"></script>
<script language="javascript" src="ajax_sample.js"></script>
<script language="javascript" type="text/JavaScript"></script>
</head>
<body>

<form action="" method=post">
<select name="obj" onChange="setDate(this)">
<option value="1">サンプル1
<option value="2">サンプル2
</select>
</form>

<div id="result"></div>

</body>
</html>

この例を利用する場合は、「1.txt」「2.txt」というファイルを別に用意し、UTF-8 で保存してください。

フォームのプルダウンで条件を選択すると、テキストファイルのデータを読み込んで表示されます。

Ajax を使ってみよう