例えば複数のWebサービスからデータを取得する場合を考えてみてください。prefDisp()のような関数が増えることが想像できますよね。
もちろん1つのファイルに長いプログラムを書くこともできますが、見通しが悪くなります。
そこで今後の展開も考えて、前回までに作成した JavaScript のプログラムを分割することにします。
JavaScript の外部ファイルは複数読み込むことができるので、プログラムを適当なまとまりに分割することで、とても読みやすくなります。
【1】sample004 フォルダをコピーして sample005 フォルダを作成します。
【2】次は以下のように変更してください。
pref.html → ファイル名を index.html に変更
pref.js → コピーして index.js と pref.js の二つにする
pref.css → ファイル名を index.css に変更
pref.php そのまま
【3】最終的に以下のようなファイルの構成になります。
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 を起動します。
【5】Webブラウザを起動して、プログラムを分割する前と同じように動作するか確認します。
http://localhost/ajax/sample005/
＊index.html や index.php というファイル名は、サーバーの初期設定で省略できるようになっています。
・Firefox で表示した場合
・Internet Explorer で表示した場合
【解説】
■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側で読み込むだけで済みます。
このように関連性のあるプログラムをまとめることで、ソースコードが見やすくなります。
