スポンサード リンク

Ajax JavaScriptのプログラムを分割する方法。

Ajax では頻繁に非同期通信を行なったり、動的にページを書き換えたりするので、それに関わるプログラムが長くなります。

例えば複数のWebサービスからデータを取得する場合を考えてみてください。prefDisp()のような関数が増えることが想像できますよね。

もちろん1つのファイルに長いプログラムを書くこともできますが、見通しが悪くなります。

そこで今後の展開も考えて、前回までに作成した JavaScript のプログラムを分割することにします。

JavaScript の外部ファイルは複数読み込むことができるので、プログラムを適当なまとまりに分割することで、とても読みやすくなります。


【1】sample004 フォルダをコピーして sample005 フォルダを作成します。

ajax-232.gif


【2】次は以下のように変更してください。

pref.html → ファイル名を index.html に変更
pref.js → コピーして index.js と pref.js の二つにする
pref.css → ファイル名を index.css に変更
pref.php そのまま


【3】最終的に以下のようなファイルの構成になります。

ajax-233.gif

index.css と pref.php の中身に変更はありませんが、念のために掲載しておきます。

*pref.php は SHIFT-JIS、それ以外は UTF-8 形式で保存してください。
*「\」はWindowsでは円記号のことです。

保存先 C:\phpdev\www\ajax\sample005
ファイル名 index.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../lib/prototype.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="pref.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css">
    <title>pref</title>
  </head>
  <body>
    <div>
      <input type="button" id="btnData" value="データ取得" />
      <input type="button" id="btnClear" value="クリア" />
    </div>
    <div id="state"></div>
    <div id="result"></div>
  </body>
</html>


保存先 C:\phpdev\www\ajax\sample005
ファイル名 index.js

onload = init;
var state;
var result;

function init() {
  $("btnData").onclick = prefDisp;
  $("btnClear").onclick = clearDisp;
  state = $('state');
  result = $('result');
}

function clearDisp() {
  state.innerHTML = "";
  result.innerHTML = "";
}


保存先 C:\phpdev\www\ajax\sample005
ファイル名 pref.js

function prefDisp() {
  state.innerHTML = "処理中です・・・<br />\n";
  var url = "pref.php";
  var paramList = "";

  new Ajax.Request(url,
    {
      method: 'get',
      onSuccess: getData,
      onFailure: showErrMsg,
      parameters: paramList
  });

  function getData(data){
    var response = data.responseXML.getElementsByTagName('Response');

    var item = response[0].getElementsByTagName('Item');
    var tmpHtml="";

    for(i = 0; i < item.length; i++){
      var prefCd = item[i].getElementsByTagName('PREF_CD');
      var prefCdValue = prefCd[0].firstChild.nodeValue;

      var prefName = item[i].getElementsByTagName('PREF_NAME');
      var prefNameValue = prefName[0].firstChild.nodeValue;

      tmpHtml += prefCdValue + " " + prefNameValue + "<br />\n";
    }

    result.innerHTML = tmpHtml;
    state.innerHTML = "データを取得しました。<br />\n";

  }

  function showErrMsg(){
    clearDisp();
    state.innerHTML = "データを取得できませんでした。<br />\n";
  }

}


保存先 C:\phpdev\www\ajax\sample005
ファイル名 index.css

#state {
  font-size:16px;
  color:#0000cc;
  margin-top:10px;
  margin-bottom:10px;
}

#result {
  font-size:14px;
  color:#000000;
}


保存先 C:\phpdev\www\ajax\sample005
ファイル名 pref.php

<?php
  header("Content-type: application/xml");
  $url = "http://ws.bzen.net/pgtop/pref.xml";
  readfile($url);
?>



準備が整ったらWebサーバーを起動して動作確認してみましょう。

【4】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


【5】Webブラウザを起動して、プログラムを分割する前と同じように動作するか確認します。

http://localhost/ajax/sample005/

*index.html や index.php というファイル名は、サーバーの初期設定で省略できるようになっています。

・Firefox で表示した場合
ajax-234.gif

・Internet Explorer で表示した場合
ajax-235.gif


【解説】

■index.html側

(1)JavaScriptのプログラムを分割したので、外部ファイルとして読み込む部分が2つになりました。

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

<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="pref.js"></script>


(2)CSSのファイル名を変更したので、それに合わせました。

<link href="index.css" rel="stylesheet" type="text/css">


■index.js側

全体で使うプログラムだけにしました。


■pref.js側

都道府県を表示するための、非同期通信と表示に関わる部分だけにしました。


*index.css と pref.php に変更はありません。


今後、非同期通信や表示に関わるプログラムが増える場合は、pref.jsのような外部ファイルを増やして、index.html側で読み込むだけで済みます。

このように関連性のあるプログラムをまとめることで、ソースコードが見やすくなります。


スポンサード リンク






Ajax初心者入門講座TOPへ