XML-Ajaxを用いた患者情報取得アプリの全ソース

index.html

これまで患者リスト(patientList)や患者受診リスト(visitData)はJSON形式でしたがここではXML形式で取得する場合のプログラムを示します。最初にindex.htmlですが，これはJSON-Ajax版と変わりありません。 
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/app.js"></script>
  <script>
    ons.bootstrap()

  </script>
  <style>
    .item, .detail-item {
      padding: 10px;
      line-height: 1;
    }
    .item-thum {
      background-color: #ccc;
      width: 50px;
      height: 50px;
      border-radius: 4px;
    }
    .item-id, .detail-item-id {
      font-size: 15px;
      font-weight: 500;
    }
    .item-name, .item-birthdate, .item-address, .detail-item-dept, .detail-item-diseaseName {
      font-size: 14px;
      color: #666;
      line-height: 1.3;
      margin: 4px 0 0 0;
      padding: 0 30px 0 0;
    }
    .item-gender {
      font-size: 12px;
      color: #999;
      float: right;
    }
  </style>
</head>

<body>    
  <ons-navigator page="list.html" var="app.navi"></ons-navigator>
</body>

</html>

list.html

次に，患者一覧用のHTMLファイルであるlist.htmlですが，これもこれまでと同じで変わりありません。 
<ons-page id="list-page">
  <ons-toolbar>
    <div class="center">Master Details</div>
  </ons-toolbar>

  <ons-list id="item-list">
  </ons-list>
</ons-page>
次に，患者の受診一覧用のHTMLファイルであるdetail.htmlですが，これもこれまでと同じで変わりありません。

detail.html 

    <ons-page id="detail-page">

      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Details</div>
      </ons-toolbar>

      <ons-list modifier="inset" style="margin-top: 10px">
        <ons-list-item class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum">
                <img src="" class="item-thum-photo" width="50px"></img>  
              </div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-id">id</span>
                <span class="item-gender">gender</span>
              </header>
              <p class="item-name">name</p>
              <p class="item-birthdate">birthdate</p>
              <p class="item-address">address</p>
            </ons-col>
          </ons-row>
        </ons-list-item>

        <ons-list-item modifier="chevron" id="add-note-action" class="add-note-action-item">
          <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
          Add a note
        </ons-list-item>
      </ons-list>

      <ons-list id="detail-item-list" style="margin-top: 10px">
      </ons-list>

    </ons-page>

app.js

次に，javascriptのプログラムを集めたapp.jsです。これはXML仕様に変更しなければなりません。 大きな修正点はAjaxでサーバからXML形式のデータを取得する関数getPatientList()とgetVisitData()です。 Ajaxのコールバック関数function(xml, status, error)は3つの引数を取りますが，その先頭の引数にXML形式のレスポンスデータが入っています。 JSON形式の場合と違ってパースする必要がありません。 XML形式のデータがそのまま返されます。 そこで，statusを確認してエラーでなければ大域変数(patientListやvisitData)に代入して画面レンダリングに利用できるようにします。 ただし，getVisitData()では，全患者の受診データが戻ってくるので，引数に指定された患者ID(patientId)に一致する患者の受診データのみ抽出して大域変数visitDataに設定している(108～112行目)ことに注意してください。
XMLデータの場合，もう一つ注意しなければならないことがあります。 JSON形式の場合は，いったんパース(JSON.parse)してしまえばレスポンスメッセージをjavascriptオブジェクトとして利用できますが，XMLデータの場合はそうはいきません。 XMLデータをjQueryで扱う場合は$(XMLオブジェクト).find(タグ名).text()などとしてタグ要素のデータを取り出します。 また，属性値を取り出したい場合は$(XMLオブジェクト).find(タグ名).attr(属性名)とします。
下記のプログラム内の11行目～19行目がその処理です。ここでは、$(visitData).find('visit')によって患者受診一覧XMLデータ（このページの最後にあります）から、<visit>要素を取り出し、その一つ一つに対してhtmlの作成処理を行っています(.each(function(){ htmlの作成処理 })。その中ではXML要素が$(this)と表現されています。これは、.eachメソッドの無名関数内では、XMLデータから抜き取ったvisit要素の一つ一つを$(this)という変数で扱うことができるからです。
(function(){
  'use strict';

  var currentItem = {};
  var patientList = null;
  var visitData = null;

  $(document).on('pageinit', '#detail-page', function() {
    getVisitData(currentItem.id);
    var html = '';
    $(visitData).find('visit').each(function(){
        html += '<ons-list-item class="detail-item">';
        html += '<header>';
        html += '<span class="detail-item-date">' + $(this).find('date').text() + '</span>';
        html += '</header>';
        html += '<p class="detail-item-dept">' + $(this).find('dept').text() + '</p>';
        html += '<p class="detail-item-diseaseName">' + $(this).find('diseaseName').text() + '</p>';
        html += '</ons-list-item>';
    });
    $("#detail-item-list").html(html);
    var content = $("#detail-item-list").get(0);
    ons.compile(content);
    $('.item-id', this).text(currentItem.id);
    $('.item-gender', this).text(currentItem.gender);
    $('.item-name', this).text(currentItem.name);
    $('.item-birthdate', this).text(currentItem.birthdate);
    $('.item-address', this).text(currentItem.address);
    $('.add-note-action-item', this).click(function () {
        alert('dummy message');
    });
  });

  $(document).on('pageinit', '#list-page', function() {
    getPatientList();
    var html = '';
    $(patientList).find('patient').each(function(){
        html += '<ons-list-item modifier="chevron" class="item">';
        html += '<ons-row>';
        html += '<ons-col width="60px"> ';
        html += '<div class="item-thum">';
        html += '</div>';
        html += '</ons-col>';
        html += '<ons-col>';
        html += '<header>';
        html += '<span class="item-id">' + $(this).find('id').text() + '</span>';
        html += '<span class="item-gender">' + $(this).find('gender').text() + '</span>';
        html += '</header>';
        html += '<p class="item-name">' + $(this).find('name').text() + '</p>';
        html += '<p class="item-birthdate">' + $(this).find('birthdate').text() + '</p>';
        html += '<p class="item-address">' + $(this).find('address').text() + '</p>';
        html += '</ons-col>';
        html += '</ons-row> ';                        
        html += '</ons-list-item>';
      }
    );
    $("#item-list").html(html);
    var content = $("#item-list").get(0);
    ons.compile(content);

    $('.item', this).on('click', function() {
      currentItem = {
        id : $('.item-id', this).text(),
        gender : $('.item-gender', this).text(),
        name : $('.item-name', this).text(),
        birthdate : $('.item-birthdate', this).text(),
        address : $('.item-address', this).text()
      };

      app.navi.pushPage('detail.html');
    });
  });
 function getPatientList() {
  var url = 'http://172.16.108.250/~semi2015/XML/getPatientList.php';
  patientList = null;
  
  $.ajax({
   type: 'GET',
   url: url,
   async: false,
   cache: false,
   dataType: "xml"
  }).done(function(xml, status, error){
   if (status == 'success') {
    patientList = xml;
   } else {
    alert('文書データ取得失敗');
   }
  }).fail(function(xhr, status, error){
   var message = "xhr.status = " + xhr.status + ", xhr.statusText = " + xhr.statusText + ", status = " + status + ", error = " + error;
   alert('サーバから応答がありません: ' + message);
  });
 }

 function getVisitData(patientId) {
  var url = 'http://172.16.108.250/~semi2015/XML/getVisitData.php';
  visitData = null;
  $.ajax({
   type: 'GET',
   url: url,
   async: false,
   cache: false,
   dataType: "xml"
  }).done(function(xml, status, error){
   if (status == 'success') {
    $(xml).find('patient').each(function(){
     if($(this).attr('id') == patientId) {
      visitData = this;
     }
    });
    return null;
   } else {
    alert('文書データ取得失敗');
    return null;
   }
  }).fail(function(xhr, status, error){
   var message = "xhr.status = " + xhr.status + ", xhr.statusText = " + xhr.statusText + ", status = " + status + ", error = " + error;
   alert('サーバから応答がありません: ' + message);
   return null;
  });
 }

})();

患者一覧XMLデータ

Ajaxで取得する患者一覧のXMLデータです。このデータは次のURLで取得します。
http://172.16.108.250/~semi2015/XML/getPatientList.php
JSON形式と違ってXMLタグで各データ要素の意味が明確です。 
<?xml version="1.0" encoding="UTF-8"?>
<patientList>
  <patient>
    <id>A0001</id>
    <name>在本　璃奈</name>
    <gender>female</gender>
    <birthdate>1996/4/1</birthdate>
    <address>岡山県倉敷市山田町１丁目－２－３</address>
  </patient>
  <patient>
    <id>A0002</id>
    <name>清水　伸平</name>
    <gender>male</gender>
    <birthdate>1995/5/10</birthdate>
    <address>岡山県岡山市苦米地３丁目－５－６</address>
  </patient>
  <patient>
    <id>A0003</id>
    <name>田中　昌昭</name>
    <gender>male</gender>
    <birthdate>1958/7/6</birthdate>
    <address>岡山県瀬戸内市大岡５丁目－９－８</address>
  </patient>
</patientList>

患者受診一覧XMLデータ

続いて患者受診一覧のXMLデータです。このデータは、以下のURLで取得します。
http://172.16.108.250/~semi2015/XML/getVisitData.php 
<?xml version="1.0" encoding="UTF-8"?>
<visitData>
  <patient id="A0001">
    <visit>
      <date>2016/5/20</date>
      <dept>内科</dept>
      <diseaseName>気管支炎</diseaseName>
    </visit>
    <visit>
      <date>2014/1/29</date>
      <dept>外科</dept>
      <diseaseName>大腿骨骨折</diseaseName>
    </visit>
    <visit>
      <date>2015/8/6</date>
      <dept>耳鼻科</dept>
      <diseaseName>中耳炎</diseaseName>
    </visit>
  </patient>
  <patient id="A0002">
    <visit>
      <date>2016/3/19</date>
      <dept>内科</dept>
      <diseaseName>インフルエンザ</diseaseName>
    </visit>
    <visit>
      <date>2015/2/10</date>
      <dept>外科</dept>
      <diseaseName>虫垂炎</diseaseName>
    </visit>
  </patient>
  <patient id="A0003">
    <visit>
      <date>2016/4/8</date>
      <dept>眼科</dept>
      <diseaseName>白内障</diseaseName>
    </visit>
    <visit>
      <date>2013/2/5</date>
      <dept>内科</dept>
      <diseaseName>心筋梗塞</diseaseName>
    </visit>
    <visit>
      <date>2011/11/4</date>
      <dept>皮膚科</dept>
      <diseaseName>アトピー性皮膚炎</diseaseName>
    </visit>
    <visit>
      <date>2014/12/15</date>
      <dept>精神科</dept>
      <diseaseName>気分障害</diseaseName>
    </visit>
  </patient>
</visitData>

0 件のコメント:

コメントを投稿

登録: コメント (Atom)