Ajax 非同期通信して取得したデータを表示する方法。

今回は Ajax の特徴である非同期通信を行なってみます。非同期通信は JavaScript の XMLHttpRequest オブジェクトを使って行なうことができます。しかし XMLHttpRequest は Webブラウザ間で実装に違いがあります。

そのため非同期通信の機能も Ajaxフレームワークである prototype.js を使うことにします。prototype.js がWebブラウザ間の違いを吸収してくれるので、プログラマーは簡単にプログラムを書くことができます。

最初は Ajax の基本的な動きと開発の流れに専念してもらいたいので、プログラムの解説は次回にします。今回ぜひ押えておいてほしい点は以下の通りです。

・動作確認はローカル環境のWebサーバー上で行なう
・必ずWebサーバーを起動している必要がある
・prototype.js を使う
・取得できるデータは同一ドメイン内のファイルに限られる
・画面への表示は innerHTML を使って動的に行なう
・複数のWebブラウザで動作確認する

それでは早速試してみましょう。以下の例は非同期通信の最も基本的なプログラムです。これが理解できるようになれば、ネット上にある様々なデータを活用できるようになります。


【1】新しく sample003 フォルダを作成します。

ajax-176.gif

＊Ajax の動作確認はローカル環境のWebサーバー上で行なうため、フォルダの作成場所に注意してください。


【2】今回は以下のようなファイルの構成になります。

ajax-177.gif

＊各ファイルは必ず UTF-8 形式で保存してください。
＊「\」はWindowsでは円記号のことです。

保存先　C:\phpdev\www\ajax\sample003
ファイル名　pref.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="pref.js"></script>
    <link href="pref.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\sample003
ファイル名　pref.js

onload = init;
var state;
var result;

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

function prefDisp() {
  state.innerHTML = "処理中です・・・<br />\n";
  var url = "pref.xml";
  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";
  }

}

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


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

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

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


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

<?xml version="1.0" encoding="UTF-8" ?>
<Response>
  <Items>
    <Item>
      <PREF_CD>1</PREF_CD>
      <PREF_NAME>北海道</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>2</PREF_CD>
      <PREF_NAME>青森県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>3</PREF_CD>
      <PREF_NAME>岩手県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>4</PREF_CD>
      <PREF_NAME>宮城県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>5</PREF_CD>
      <PREF_NAME>秋田県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>6</PREF_CD>
      <PREF_NAME>山形県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>7</PREF_CD>
      <PREF_NAME>福島県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>8</PREF_CD>
      <PREF_NAME>東京都</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>9</PREF_CD>
      <PREF_NAME>神奈川県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>10</PREF_CD>
      <PREF_NAME>埼玉県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>11</PREF_CD>
      <PREF_NAME>千葉県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>12</PREF_CD>
      <PREF_NAME>茨城県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>13</PREF_CD>
      <PREF_NAME>栃木県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>14</PREF_CD>
      <PREF_NAME>群馬県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>15</PREF_CD>
      <PREF_NAME>山梨県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>16</PREF_CD>
      <PREF_NAME>新潟県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>17</PREF_CD>
      <PREF_NAME>長野県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>18</PREF_CD>
      <PREF_NAME>富山県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>19</PREF_CD>
      <PREF_NAME>石川県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>20</PREF_CD>
      <PREF_NAME>福井県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>21</PREF_CD>
      <PREF_NAME>愛知県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>22</PREF_CD>
      <PREF_NAME>岐阜県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>23</PREF_CD>
      <PREF_NAME>静岡県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>24</PREF_CD>
      <PREF_NAME>三重県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>25</PREF_CD>
      <PREF_NAME>大阪府</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>26</PREF_CD>
      <PREF_NAME>兵庫県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>27</PREF_CD>
      <PREF_NAME>京都府</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>28</PREF_CD>
      <PREF_NAME>滋賀県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>29</PREF_CD>
      <PREF_NAME>奈良県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>30</PREF_CD>
      <PREF_NAME>和歌山県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>31</PREF_CD>
      <PREF_NAME>鳥取県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>32</PREF_CD>
      <PREF_NAME>島根県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>33</PREF_CD>
      <PREF_NAME>岡山県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>34</PREF_CD>
      <PREF_NAME>広島県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>35</PREF_CD>
      <PREF_NAME>山口県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>36</PREF_CD>
      <PREF_NAME>徳島県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>37</PREF_CD>
      <PREF_NAME>香川県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>38</PREF_CD>
      <PREF_NAME>愛媛県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>39</PREF_CD>
      <PREF_NAME>高知県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>40</PREF_CD>
      <PREF_NAME>福岡県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>41</PREF_CD>
      <PREF_NAME>佐賀県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>42</PREF_CD>
      <PREF_NAME>長崎県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>43</PREF_CD>
      <PREF_NAME>熊本県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>44</PREF_CD>
      <PREF_NAME>大分県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>45</PREF_CD>
      <PREF_NAME>宮崎県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>46</PREF_CD>
      <PREF_NAME>鹿児島県</PREF_NAME>
    </Item>
    <Item>
      <PREF_CD>47</PREF_CD>
      <PREF_NAME>沖縄県</PREF_NAME>
    </Item>
  </Items>
</Response>



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

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

ajax-166.gif

http://localhost/ が表示されればWebサーバーが起動しています。


【4】Firefox を起動して、アドレスに以下のように入力し実行します。

http://localhost/ajax/sample003/pref.html

ajax-178.gif


【5】「データ取得」ボタンをクリックします。

ajax-179.gif


【6】メッセージと取得したデータが表示されました。

ajax-180.gif

画面が切り替わらずに、動的に表示しているところがポイントです。URLは変わっていませんよね。

また取得しているデータが、同一ドメイン(localhost)内のファイルだということにも注目してください。


【7】「クリア」ボタンをクリックします。

ajax-181.gif


【8】メッセージとデータが消去されました。

ajax-182.gif

余裕がある方は Firebug を起動して、ブレイクポイントを設定し、プログラムを追ってみたり、CSSのボックスを視覚化してみると理解が深まります。


【9】同様に Internet Explorer6.0 でも実行してみてください。

http://localhost/ajax/sample003/pref.html

ajax-183.gif

これで同一ドメイン上のデータを取得できるようになりました。


【解説】

(1)画面への表示は innerHTML プロパティを使って動的に行ないましたが、他にDOM(ドム： Document Object Model)を使う方法もあります。

innerHTML はHTMLタグをそのまま書くことができるので、初心者が理解しやすいメリットがあります。まずは innerHTML を使う方法を理解してください。DOMを使う方法は少し難しいのでまたの機会に解説します。


(2)開発に便利な Firefox で動作確認した後、ユーザー数の多い Internet Explorer でも動作確認するようにしてください。

主な流れ
1.　http://localhost/　でWebサーバーの起動を確認
↓
2.　Firefox で動作確認
↓
3.　Internet Explorer で動作確認


スポンサード　リンク

スポンサード　リンク






Ajax初心者入門講座TOPへ