夏休み前の最後のゼミです！

さて、今日は夏休み前の最後のゼミです。先週は、サーバからJSON形式で患者一覧情報と患者受診一覧情報を受け取り、それを画面に表示するプログラムを作成しました。今日は、その応用で、JSON形式ではなくXML形式で患者一覧情報と患者受診一覧情報を受け取り、それを画面に表示するプログラムを作成します。

患者一覧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>

患者受診一覧XMLデータには、複数の患者の受診履歴があり、patient要素のid属性でどの患者の受診履歴か区別できるようになっています。

XML形式のデータの扱い方

サーバからのレスポンスがJSON形式からXML形式に変わったからといってもプログラムが大きく変わるわけではありません。変更点は大きく以下の2点です。

1. サーバのURLが変わる
2. サーバからのレスポンスが変わる

URLについては上で示した通りです。サーバからのレスポンスはJSON形式ではなくXML形式となり、Ajaxで取得したデータはJSON形式の時のように解析（JSON.parse）する必要はなく、そのまま使えます。
次に、XML形式のデータはXMLオブジェクトとしてプログラム中に取り込まれ、JSON形式のデータがJSON.parseによってjavascriptオブジェクトに変換されるのと異なります。XMLオブジェクトの取り扱い方は専用のメソッドを使います。
具体的には、タグ名が'ABC'の要素を取り出すには、$(XMLオブジェクト).find('ABC').text()とします。また，タグ名が'ABC'の要素の中にある属性値名が'XYZ'の属性値を取り出したい場合は$(XMLオブジェクト).find('ABC').attr('XYZ')とします。